borekon/PeerTube_original
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor modal buttons style

Browse Source
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 {

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

@ -22,12 +22,12 @@
<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"
type="submit" i18n-value value="Accept" class="peertube-button orange-button"
(click)="close()"
>
</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>

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

@ -26,6 +26,7 @@
z-index: z(header);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
display: flex;
}
.top-left-block {
z-index: 1;
@ -36,8 +37,9 @@
.icon {
@include icon(24px);
}
&.icon-menu {
.icon-menu {
background-color: pvar(--mainForegroundColor);
mask-image: url('../assets/images/misc/menu.svg');
margin: 0 18px 0 20px;
@ -48,6 +50,15 @@
}
}
.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;
@ -70,25 +81,11 @@
height: 24px;
margin-right: .5rem;
}
}
@media screen and (max-width: $mobile-view) {
.peertube-title {
display: none;
}
}
}
.header-right {
height: $header-height;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
flex: 1;
}
}
.broadcast-message {
min-height: 50px;
@ -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;
}

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

@ -8,12 +8,12 @@
<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>

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

@ -47,6 +47,7 @@ li {
.columns {
display: flex;
}
.link-block {
@include disable-default-a-behaviour;
@ -73,17 +74,3 @@ li {
text-align: center;
}
}
}
.configure-instance-button {
@include peertube-button;
@include orange-button;
@include disable-default-a-behaviour;
display: inline-block;
}
.action-button-understood {
@include peertube-button;
@include grey-button;
}

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"

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

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

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