Refactor modal buttons style
This commit is contained in:
parent
251a82ffbb
commit
266947e5ef
|
@ -45,14 +45,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Submit" class="action-button-submit"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
<input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
input[type=text] {
|
||||
@include peertube-input-text(340px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" i18n-value value="Login" [disabled]="!form.valid">
|
||||
<input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
|
||||
|
||||
<div class="additionnal-links">
|
||||
<a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
|
||||
|
@ -114,12 +114,12 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value="Password reset button" value="Reset" class="action-button-submit"
|
||||
type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
|
||||
(click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -8,16 +8,9 @@ label {
|
|||
display: block;
|
||||
}
|
||||
|
||||
input:not([type=submit]) {
|
||||
input[type=text],
|
||||
input[type=email] {
|
||||
@include peertube-input-text(340px);
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
|
@ -22,13 +22,13 @@
|
|||
<div class="modal-footer inputs">
|
||||
<div class="inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="dismiss()" (key.enter)="dismiss()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Accept" class="action-button-submit"
|
||||
(click)="close()"
|
||||
type="submit" i18n-value value="Accept" class="peertube-button orange-button"
|
||||
(click)="close()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,14 +1,6 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.peertube-select-container {
|
||||
@include peertube-select-container(350px);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 20px 0;
|
||||
}
|
|
@ -19,14 +19,13 @@
|
|||
<div class="modal-footer">
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="dismiss()" (key.enter)="dismiss()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Submit" class="action-button-submit"
|
||||
[disabled]="!form.valid"
|
||||
(click)="close()"
|
||||
type="submit" i18n-value value="Submit" class="peertube-button orange-button"
|
||||
[disabled]="!form.valid" (click)="close()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -34,12 +34,12 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Add this caption" class="action-button-submit"
|
||||
type="submit" i18n-value value="Add this caption" class="peertube-button orange-button"
|
||||
[disabled]="!form.valid" (click)="addCaption()"
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -26,67 +26,64 @@
|
|||
z-index: z(header);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top-left-block {
|
||||
z-index: 1;
|
||||
height: $header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
.top-left-block {
|
||||
z-index: 1;
|
||||
height: $header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
.icon {
|
||||
@include icon(24px);
|
||||
|
||||
&.icon-menu {
|
||||
background-color: pvar(--mainForegroundColor);
|
||||
mask-image: url('../assets/images/misc/menu.svg');
|
||||
margin: 0 18px 0 20px;
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-title {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: $font-bold;
|
||||
color: inherit !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.instance-name {
|
||||
@include ellipsis;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon.icon-logo {
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
|
||||
.peertube-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
@include icon(24px);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
height: $header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
.icon-menu {
|
||||
background-color: pvar(--mainForegroundColor);
|
||||
mask-image: url('../assets/images/misc/menu.svg');
|
||||
margin: 0 18px 0 20px;
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
height: $header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.peertube-title {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: $font-bold;
|
||||
color: inherit !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.instance-name {
|
||||
@include ellipsis;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon.icon-logo {
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -103,18 +100,9 @@
|
|||
justify-self: center;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.alert-#{$color} {
|
||||
my-global-icon {
|
||||
@include apply-svg-color(theme-color-level($color, $alert-color-level));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
|
|
@ -17,13 +17,13 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="dismiss()" (key.enter)="dismiss()"
|
||||
>
|
||||
|
||||
<input
|
||||
ngbAutofocus
|
||||
type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
|
||||
type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
|
||||
(click)="close()" (key.enter)="confirm()"
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -17,5 +17,3 @@ input[type=text] {
|
|||
.form-group {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -3,17 +3,17 @@
|
|||
<h4 class="modal-title">{{title}}</h4>
|
||||
<my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal-body" [innerHTML]="content"></div>
|
||||
|
||||
<div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
|
||||
<input
|
||||
*ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel"
|
||||
*ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
|
||||
(click)="onCancelClick()" (key.enter)="onCancelClick()"
|
||||
>
|
||||
|
||||
<input
|
||||
*ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm"
|
||||
*ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
|
||||
(click)="onConfirmClick()" (key.enter)="onConfirmClick()"
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -8,13 +8,3 @@
|
|||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.action-button-cancel {
|
||||
@include peertube-button;
|
||||
@include grey-button;
|
||||
}
|
||||
|
||||
.action-button-confirm {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
}
|
||||
|
|
|
@ -35,10 +35,11 @@
|
|||
</my-peertube-checkbox>
|
||||
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
<a i18n class="action-button action-button-configure" ngbAutofocus
|
||||
|
||||
<a i18n class="peertube-button-link orange-button" ngbAutofocus
|
||||
href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
|
||||
Configure
|
||||
</a>
|
||||
|
|
|
@ -1,10 +1,6 @@
|
|||
@import '_mixins';
|
||||
@import '_variables';
|
||||
|
||||
.action-button-cancel {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
@ -18,11 +14,3 @@ li {
|
|||
margin: 0 auto 50px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.action-button-configure {
|
||||
display: inline-block;
|
||||
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
@include disable-default-a-behaviour;
|
||||
}
|
||||
|
|
|
@ -1,24 +0,0 @@
|
|||
@import '_mixins';
|
||||
|
||||
.modal-button {
|
||||
@include disable-default-a-behaviour;
|
||||
transform: translateY(2px);
|
||||
|
||||
button {
|
||||
@include peertube-button;
|
||||
@include grey-button;
|
||||
@include button-with-icon(18px, 4px, -1px);
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(#585858);
|
||||
}
|
||||
}
|
||||
|
||||
& + .modal-button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-settings-title {
|
||||
@include in-content-small-title;
|
||||
}
|
|
@ -8,8 +8,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
|
|||
|
||||
@Component({
|
||||
selector: 'my-quick-settings',
|
||||
templateUrl: './quick-settings-modal.component.html',
|
||||
styleUrls: [ './quick-settings-modal.component.scss' ]
|
||||
templateUrl: './quick-settings-modal.component.html'
|
||||
})
|
||||
export class QuickSettingsModalComponent extends FormReactive implements OnInit {
|
||||
@ViewChild('modal', { static: true }) modal: NgbModal
|
||||
|
|
|
@ -71,12 +71,12 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
|
||||
type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
|
||||
class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
|
||||
class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
|
||||
rel="noopener noreferrer" ngbAutofocus>
|
||||
Configure my instance
|
||||
</a>
|
||||
|
|
|
@ -47,43 +47,30 @@ li {
|
|||
|
||||
.columns {
|
||||
display: flex;
|
||||
|
||||
.link-block {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: pvar(--mainForegroundColor);
|
||||
padding: 10px;
|
||||
transition: background-color 0.2s ease-in;
|
||||
flex-basis: 33%;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.link-title {
|
||||
font-size: 16px;
|
||||
font-weight: $font-semibold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.link-title,
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-instance-button {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
.link-block {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
color: pvar(--mainForegroundColor);
|
||||
padding: 10px;
|
||||
transition: background-color 0.2s ease-in;
|
||||
flex-basis: 33%;
|
||||
|
||||
.action-button-understood {
|
||||
@include peertube-button;
|
||||
@include grey-button;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.link-title {
|
||||
font-size: 16px;
|
||||
font-weight: $font-semibold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.link-title,
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group inputs">
|
||||
<input type="submit" i18n-value value="Add a message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
|
||||
<input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -23,14 +23,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Update this comment" class="action-button-submit"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
<input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -28,14 +28,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" [value]="action" class="action-button-submit"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
<input type="submit" [value]="action" class="peertube-button orange-button" [disabled]="!form.valid" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -51,10 +51,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
<input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
|
||||
|
||||
<input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
|
@ -89,10 +89,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
<input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
|
||||
|
||||
<input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
|
@ -23,14 +23,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Ban this user" class="action-button-submit"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
<input type="submit" i18n-value value="Ban this user" class="peertube-button orange-button" [disabled]="!form.valid" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -35,14 +35,11 @@
|
|||
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Submit" class="action-button-submit"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
<input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Maybe later" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
.action-button-cancel {
|
||||
margin-right: 0 !important;
|
||||
}
|
|
@ -6,8 +6,7 @@ import { VideoChannel } from '@shared/models'
|
|||
|
||||
@Component({
|
||||
selector: 'my-support-modal',
|
||||
templateUrl: './support-modal.component.html',
|
||||
styleUrls: [ './support-modal.component.scss' ]
|
||||
templateUrl: './support-modal.component.html'
|
||||
})
|
||||
export class SupportModalComponent {
|
||||
@Input() video: VideoDetails = null
|
||||
|
|
|
@ -30,10 +30,7 @@
|
|||
|
||||
<div class="modal-footer">
|
||||
<div class="form-group inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
|
||||
(click)="dismiss()"
|
||||
>
|
||||
<input type="button" role="button" i18n-value value="Close" class="peertube-button grey-button" (click)="dismiss()" />
|
||||
|
||||
<my-edit-button
|
||||
i18n-label label="Update live settings"
|
||||
|
|
|
@ -4,10 +4,10 @@
|
|||
<ng-container i18n>Download</ng-container>
|
||||
|
||||
<div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1">
|
||||
<span id="dropdownDownloadType" ngbDropdownToggle>
|
||||
<span id="dropdown-download-type" ngbDropdownToggle>
|
||||
{{ type }}
|
||||
</span>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownDownloadType">
|
||||
<div ngbDropdownMenu aria-labelledby="dropdown-download-type">
|
||||
<button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
|
||||
<button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
|
||||
</div>
|
||||
|
@ -37,7 +37,7 @@
|
|||
|
||||
<ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
|
||||
<a ngbNavLink i18n>{{ file.resolution.label }}</a>
|
||||
|
||||
|
||||
<ng-template ngbNavContent>
|
||||
<div class="nav-content">
|
||||
<div class="input-group input-group-sm">
|
||||
|
@ -53,7 +53,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div [ngbNavOutlet]="resolutionNav"></div>
|
||||
|
||||
|
||||
<div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
|
||||
<ng-container *ngIf="videoFile?.metadata">
|
||||
<div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
|
||||
|
@ -67,7 +67,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
|
||||
<a ngbNavLink i18n>Video stream</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
|
||||
<a ngbNavLink i18n>Audio stream</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
@ -91,7 +91,7 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
|
||||
</ng-container>
|
||||
</div>
|
||||
<div [ngbNavOutlet]="nav"></div>
|
||||
|
@ -107,20 +107,20 @@
|
|||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
|
||||
<div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
|
||||
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
|
||||
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
|
||||
<span class="glyphicon glyphicon-menu-down"></span>
|
||||
|
||||
|
||||
<ng-container i18n>
|
||||
Advanced
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container *ngIf="!isAdvancedCustomizationCollapsed">
|
||||
<span class="glyphicon glyphicon-menu-up"></span>
|
||||
|
||||
|
||||
<ng-container i18n>
|
||||
Simple
|
||||
</ng-container>
|
||||
|
@ -131,13 +131,10 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
(click)="hide()" (key.enter)="hide()"
|
||||
>
|
||||
|
||||
<input
|
||||
type="submit" i18n-value value="Download" class="action-button-submit"
|
||||
(click)="download()"
|
||||
>
|
||||
<input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
.nav-tabs {
|
||||
margin-top: 10x;
|
||||
}
|
||||
|
||||
|
||||
.glyphicon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
@ -46,7 +46,7 @@
|
|||
@include orange-button;
|
||||
}
|
||||
|
||||
#dropdownDownloadType {
|
||||
#dropdown-download-type {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
@ -153,17 +153,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
|
||||
.action-button-cancel {
|
||||
@include peertube-button;
|
||||
@include tertiary-button;
|
||||
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.action-button-submit {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
> .peertube-button:not(:first-child) {
|
||||
margin-left: 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -238,7 +238,8 @@
|
|||
font-size: 15px;
|
||||
height: $button-height;
|
||||
line-height: $button-height;
|
||||
border-radius: 3px;
|
||||
// FIXME: because of primeng that redefines border-radius of all input[type="..."]
|
||||
border-radius: 3px !important;
|
||||
text-align: center;
|
||||
padding: 0 17px 0 13px;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -3,6 +3,11 @@
|
|||
|
||||
@import '~primeng/resources/primeng.css';
|
||||
|
||||
// Override primeng style we don't want
|
||||
input[type="button"] {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
// Taken from old nova light theme
|
||||
|
||||
body .p-disabled {
|
||||
|
|
Loading…
Reference in New Issue