interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor modal buttons style

This commit is contained in:
Chocobozzz 2021-04-14 16:39:37 +02:00
parent 251a82ffbb
commit 266947e5ef
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
35 changed files with 143 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/+about/about-instance/contact-admin-modal.component.html
View File

@ -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>

1
client/src/app/+about/about-instance/contact-admin-modal.component.scss
View File

@ -3,7 +3,6 @@
input[type=text] {
@include peertube-input-text(340px);
display: block;
}
textarea {

6
client/src/app/+login/login.component.html
View File

@ -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>

11
client/src/app/+login/login.component.scss
View File

@ -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 {

6
client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
View File

@ -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>

8
client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
View File

@ -1,14 +1,6 @@
@import '_variables';
@import '_mixins';
select {
display: block;
}
.peertube-select-container {
@include peertube-select-container(350px);
}
.form-group {
margin: 20px 0;
}

7
client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
View File

@ -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>

4
client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
View File

@ -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>

120
client/src/app/app.component.scss
View File

@ -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;

4
client/src/app/modal/confirm.component.html
View File

@ -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>

2
client/src/app/modal/confirm.component.scss
View File

@ -17,5 +17,3 @@ input[type=text] {
.form-group {
margin: 20px 0;
}

6
client/src/app/modal/custom-modal.component.html
View File

@ -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>

10
client/src/app/modal/custom-modal.component.scss
View File

@ -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;
}

5
client/src/app/modal/instance-config-warning-modal.component.html
View File

@ -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>

12
client/src/app/modal/instance-config-warning-modal.component.scss
View File

@ -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;
}

24
client/src/app/modal/quick-settings-modal.component.scss
View File

@ -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;
}

3
client/src/app/modal/quick-settings-modal.component.ts
View File

@ -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

4
client/src/app/modal/welcome-modal.component.html
View File

@ -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>

55
client/src/app/modal/welcome-modal.component.scss
View File

@ -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;
}
}

2
client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
View File

@ -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>

7
client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
View File

@ -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>

7
client/src/app/shared/shared-moderation/batch-domains-modal.component.html
View File

@ -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>

5
client/src/app/shared/shared-moderation/report-modals/report.component.html
View File

@ -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>

5
client/src/app/shared/shared-moderation/report-modals/video-report.component.html
View File

@ -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>

7
client/src/app/shared/shared-moderation/user-ban-modal.component.html
View File

@ -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>

7
client/src/app/shared/shared-moderation/video-block.component.html
View File

@ -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>

2
client/src/app/shared/shared-support-modal/support-modal.component.html
View File

@ -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>

3
client/src/app/shared/shared-support-modal/support-modal.component.scss
View File

@ -1,3 +0,0 @@
.action-button-cancel {
margin-right: 0 !important;
}

3
client/src/app/shared/shared-support-modal/support-modal.component.ts
View File

@ -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

5
client/src/app/shared/shared-video-live/live-stream-information.component.html
View File

@ -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"

29
client/src/app/shared/shared-video-miniature/video-download.component.html
View File

@ -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>

4
client/src/app/shared/shared-video-miniature/video-download.component.scss
View File

@ -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;
}

13
client/src/sass/bootstrap.scss vendored
View File

@ -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
}
}
}

3
client/src/sass/include/_mixins.scss
View File

@ -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;

5
client/src/sass/primeng-custom.scss
View File

@ -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 {