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

Use form-control to display box-shadow on form inputs/selects upon focus

This commit is contained in:
Rigel Kent 2020-04-02 11:39:14 +02:00
parent 21973012ab
commit a6d5ff7604
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
38 changed files with 247 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
<div class="form-group">
<label i18n for="fromName">Your name</label>
<input
type="text" id="fromName"
type="text" id="fromName" class="form-control"
formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }"
>
<div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div>
@ -19,7 +19,7 @@
<div class="form-group">
<label i18n for="fromEmail">Your email</label>
<input
type="text" id="fromEmail"
type="text" id="fromEmail" class="form-control"
formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }"
>
<div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div>
@ -28,7 +28,7 @@
<div class="form-group">
<label i18n for="subject">Subject</label>
<input
type="text" id="subject"
type="text" id="subject" class="form-control"
formControlName="subject" [ngClass]="{ 'input-error': formErrors['subject'] }"
>
<div *ngIf="formErrors.subject" class="form-error">{{ formErrors.subject }}</div>
@ -36,7 +36,7 @@
<div class="form-group">
<label i18n for="body">Your message</label>
<textarea id="body" formControlName="body" [ngClass]="{ 'input-error': formErrors['body'] }">
<textarea id="body" formControlName="body" class="form-control" [ngClass]="{ 'input-error': formErrors['body'] }">
</textarea>
<div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div>
</div>
@ -44,9 +44,10 @@
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Submit" class="action-button-submit"

38
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
View File

@ -19,7 +19,7 @@
<div class="form-group">
<label i18n for="instanceName">Name</label>
<input
type="text" id="instanceName"
type="text" id="instanceName" class="form-control"
formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
>
<div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
@ -28,7 +28,7 @@
<div class="form-group">
<label i18n for="instanceShortDescription">Short description</label>
<textarea
id="instanceShortDescription" formControlName="shortDescription" class="small"
id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
></textarea>
<div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
@ -107,7 +107,7 @@
</my-help>
<div class="peertube-select-container">
<select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
<select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
<option i18n value="do_not_list">Do not list</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>
@ -172,7 +172,7 @@
<div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
<textarea
id="instanceCreationReason" formControlName="creationReason" class="small"
id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
[ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
></textarea>
<div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
@ -183,7 +183,7 @@
<div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
<textarea
id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
></textarea>
<div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
@ -194,7 +194,7 @@
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
<textarea
id="instanceBusinessModel" formControlName="businessModel" class="small"
id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
></textarea>
<div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
@ -249,7 +249,7 @@
<label i18n for="themeDefault">Theme</label>
<div class="peertube-select-container">
<select formControlName="default" id="themeDefault">
<select formControlName="default" id="themeDefault" class="form-control">
<option i18n value="default">default</option>
<option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
@ -261,7 +261,7 @@
<div class="form-group" formGroupName="instance">
<label i18n for="instanceDefaultClientRoute">Landing page</label>
<div class="peertube-select-container">
<select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
<select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
<option i18n value="/videos/overview">Discover videos</option>
<option i18n value="/videos/trending">Trending videos</option>
<option i18n value="/videos/most-liked">Most liked videos</option>
@ -303,7 +303,7 @@
<div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
<label i18n for="signupLimit">Signup limit</label>
<input
type="number" min="-1" id="signupLimit"
type="number" min="-1" id="signupLimit" class="form-control"
formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
>
<div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
@ -318,7 +318,7 @@
<div class="form-group">
<label i18n for="userVideoQuota">Default video quota per user</label>
<div class="peertube-select-container">
<select id="userVideoQuota" formControlName="videoQuota">
<select id="userVideoQuota" formControlName="videoQuota" class="form-control">
<option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
{{ videoQuotaOption.label }}
</option>
@ -330,7 +330,7 @@
<div class="form-group">
<label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
<div class="peertube-select-container">
<select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
<select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
<option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
{{ videoQuotaDailyOption.label }}
</option>
@ -451,7 +451,7 @@
<div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
<label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
<input
type="text" id="followingsInstanceAutoFollowIndexUrl"
type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
>
<div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
@ -477,7 +477,7 @@
<div class="form-group" formGroupName="admin">
<label i18n for="adminEmail">Admin email</label>
<input
type="text" id="adminEmail"
type="text" id="adminEmail" class="form-control"
formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
>
<div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
@ -518,7 +518,7 @@
<label i18n for="signupLimit">Your Twitter username</label>
<input
type="text" id="servicesTwitterUsername"
type="text" id="servicesTwitterUsername" class="form-control"
formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
>
<div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
@ -656,7 +656,7 @@
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
<label i18n for="transcodingThreads">Transcoding threads</label>
<div class="peertube-select-container">
<select id="transcodingThreads" formControlName="threads">
<select id="transcodingThreads" formControlName="threads" class="form-control">
<option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
{{ transcodingThreadOption.label }}
</option>
@ -707,7 +707,7 @@
<div class="form-group" formGroupName="previews">
<label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
<input
type="number" min="0" id="cachePreviewsSize"
type="number" min="0" id="cachePreviewsSize" class="form-control"
formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
>
<div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
@ -716,7 +716,7 @@
<div class="form-group" formGroupName="captions">
<label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
<input
type="number" min="0" id="cacheCaptionsSize"
type="number" min="0" id="cacheCaptionsSize" class="form-control"
formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
>
<div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
@ -750,7 +750,7 @@
</my-help>
<textarea
id="customizationJavascript" formControlName="javascript"
id="customizationJavascript" formControlName="javascript" class="form-control"
[ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
></textarea>
@ -780,7 +780,7 @@
</my-help>
<textarea
id="customizationCSS" formControlName="css"
id="customizationCSS" formControlName="css" class="form-control"
[ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
></textarea>
<div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>

7
client/src/app/+admin/follows/following-add/following-add.component.scss
View File

@ -5,13 +5,6 @@ textarea {
height: 250px;
}
.form-control {
&, &:focus {
background-color: var(--inputBackgroundColor);
color: var(--mainForegroundColor);
}
}
input[type=submit] {
@include peertube-button;
@include orange-button;

5
client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
View File

@ -20,7 +20,10 @@
</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Update this comment" class="action-button-submit"

6
client/src/app/+admin/users/user-edit/user-edit.component.html
View File

@ -82,7 +82,7 @@
<div class="form-group" *ngIf="isCreation()">
<label i18n for="username">Username</label>
<input
type="text" id="username" i18n-placeholder placeholder="john"
type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
>
<div *ngIf="formErrors.username" class="form-error">
@ -93,7 +93,7 @@
<div class="form-group">
<label i18n for="email">Email</label>
<input
type="text" id="email" i18n-placeholder placeholder="mail@example.com"
type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
autocomplete="off"
>
@ -112,7 +112,7 @@
</ng-template>
</my-help>
<input
type="password" id="password" autocomplete="new-password"
type="password" id="password" autocomplete="new-password" class="form-control"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div *ngIf="formErrors.password" class="form-error">

7
client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
View File

@ -21,9 +21,10 @@
<div class="modal-footer inputs">
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="dismiss()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="dismiss()" (key.enter)="dismiss()"
>
<input
type="submit" i18n-value value="Submit" class="action-button-submit"

4
client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
View File

@ -14,7 +14,7 @@
<div class="form-group">
<label i18n for="new-email">New email</label>
<input
type="email" id="new-email" i18n-placeholder placeholder="Your new email"
type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control"
formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
>
<div *ngIf="formErrors['new-email']" class="form-error">
@ -25,7 +25,7 @@
<div class="form-group">
<input
type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
>
<div *ngIf="formErrors['password']" class="form-error">
{{ formErrors['password'] }}

6
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
View File

@ -5,7 +5,7 @@
<label i18n for="current-password">Change password</label>
<input
type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password"
formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" class="form-control"
>
<div *ngIf="formErrors['current-password']" class="form-error">
{{ formErrors['current-password'] }}
@ -13,7 +13,7 @@
<input
type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password"
formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" class="form-control"
>
<div *ngIf="formErrors['new-password']" class="form-error">
{{ formErrors['new-password'] }}
@ -21,7 +21,7 @@
<input
type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password"
formControlName="new-confirmed-password"
formControlName="new-confirmed-password" class="form-control"
>
<div *ngIf="formErrors['new-confirmed-password']" class="form-error">
{{ formErrors['new-confirmed-password'] }}

2
client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
View File

@ -3,7 +3,7 @@
<label i18n for="theme">Theme</label>
<div class="peertube-select-container">
<select formControlName="theme" id="theme">
<select formControlName="theme" id="theme" class="form-control">
<option i18n value="instance-default">instance default</option>
<option i18n value="default">peertube default</option>

4
client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
View File

@ -5,7 +5,7 @@
<div class="form-group">
<label i18n for="display-name">Display name</label>
<input
type="text" id="display-name"
type="text" id="display-name" class="form-control"
formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
>
<div *ngIf="formErrors['display-name']" class="form-error">
@ -16,7 +16,7 @@
<div class="form-group">
<label i18n for="description">Description</label>
<textarea
id="description" formControlName="description"
id="description" formControlName="description" class="form-control"
[ngClass]="{ 'input-error': formErrors['description'] }"
></textarea>
<div *ngIf="formErrors.description" class="form-error">

2
client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
View File

@ -10,7 +10,7 @@
</my-help>
<div class="peertube-select-container">
<select id="nsfwPolicy" formControlName="nsfwPolicy">
<select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
<option i18n value="do_not_list">Do not list</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>

6
client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
View File

@ -33,7 +33,7 @@
<div class="input-group">
<input
type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
>
<div class="input-group-append">
<span class="input-group-text">@{{ instanceHost }}</span>
@ -52,7 +52,7 @@
<div class="form-group">
<label i18n for="display-name">Display name</label>
<input
type="text" id="display-name"
type="text" id="display-name" class="form-control"
formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
>
<div *ngIf="formErrors['display-name']" class="form-error">
@ -63,7 +63,7 @@
<div class="form-group">
<label i18n for="description">Description</label>
<textarea
id="description" formControlName="description"
id="description" formControlName="description" class="form-control"
[ngClass]="{ 'input-error': formErrors['description'] }"
></textarea>
<div *ngIf="formErrors.description" class="form-error">

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

@ -18,9 +18,10 @@
<div class="modal-footer inputs">
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="dismiss()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="dismiss()" (key.enter)="dismiss()"
>
<input
type="submit" i18n-value value="Submit" class="action-button-submit"

6
client/src/app/+signup/+register/register-step-user.component.html
View File

@ -21,7 +21,7 @@
<div class="input-group">
<input
type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
>
<div class="input-group-append">
<span class="input-group-text">@{{ instanceHost }}</span>
@ -41,7 +41,7 @@
<label for="email" i18n>Email</label>
<input
type="text" id="email" i18n-placeholder placeholder="Email"
formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
>
<div *ngIf="formErrors.email" class="form-error">
{{ formErrors.email }}
@ -52,7 +52,7 @@
<label for="password" i18n>Password</label>
<input
type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div *ngIf="formErrors.password" class="form-error">
{{ formErrors.password }}

2
client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
View File

@ -8,7 +8,7 @@
<label i18n for="verify-email-email">Email</label>
<input
type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
formControlName="verify-email-email" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
>
<div *ngIf="formErrors['verify-email-email']" class="form-error">
{{ formErrors['verify-email-email'] }}

9
client/src/app/login/login.component.html
View File

@ -28,7 +28,7 @@
<label i18n for="username">User</label>
<input
type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
>
<a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
or create an account
@ -45,7 +45,7 @@
<div>
<input
type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
</div>
@ -81,7 +81,10 @@
</div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
>
<input
type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"

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

@ -40,7 +40,10 @@
</my-peertube-checkbox>
<span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
<input
type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
</div>
</ng-template>

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

@ -76,10 +76,14 @@
</div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span>
<input
type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
(click)="hide()" (key.enter)="hide()"
>
<a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
rel="noopener noreferrer">
<a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
rel="noopener noreferrer" ngbAutofocus>
Configure my instance
</a>
</div>

8
client/src/app/search/search-filters.component.html
View File

@ -46,6 +46,7 @@
type="text" id="original-publication-after" name="original-publication-after"
i18n-placeholder placeholder="After..."
[(ngModel)]="originallyPublishedStartYear"
class="form-control"
>
</div>
<div class="col-sm-6">
@ -55,6 +56,7 @@
type="text" id="original-publication-before" name="original-publication-before"
i18n-placeholder placeholder="Before..."
[(ngModel)]="originallyPublishedEndYear"
class="form-control"
>
</div>
</div>
@ -102,7 +104,7 @@
Reset
</button>
<div class="peertube-select-container">
<select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
<select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf" class="form-control">
<option [value]="undefined" i18n>Display all categories</option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
@ -115,7 +117,7 @@
Reset
</button>
<div class="peertube-select-container">
<select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
<select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf" class="form-control">
<option [value]="undefined" i18n>Display all licenses</option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
@ -128,7 +130,7 @@
Reset
</button>
<div class="peertube-select-container">
<select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
<select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf" class="form-control">
<option [value]="undefined" i18n>Display all languages</option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>

63
client/src/app/search/search-filters.component.scss
View File

@ -66,65 +66,4 @@ input[type=submit] {
white-space: nowrap;
}
::ng-deep {
.ng2-tag-input {
border: none !important;
}
.ng2-tags-container {
display: flex;
align-items: center;
border: 1px solid #C6C6C6;
border-radius: 3px;
padding: 5px !important;
height: max-content;
}
tag-input-form {
input {
height: 30px !important;
font-size: 12px !important;
background-color: var(--mainBackgroundColor) !important;
color: var(--mainForegroundColor) !important;
}
}
tag {
background-color: $grey-background-color !important;
color: #000 !important;
border-radius: 3px !important;
font-size: 12px !important;
height: 30px !important;
line-height: 30px !important;
margin: 0 5px 0 0 !important;
cursor: default !important;
padding: 0 8px 0 10px !important;
div {
height: 100% !important;
}
}
delete-icon {
cursor: pointer !important;
height: auto !important;
vertical-align: middle !important;
padding-left: 6px !important;
svg {
position: relative;
top: -1px;
height: auto !important;
vertical-align: middle !important;
path {
fill: $grey-foreground-color !important;
}
}
&:hover {
transform: none !important;
}
}
}
@include ng2-tags

8
client/src/app/shared/confirm/confirm.component.html
View File

@ -16,11 +16,15 @@
</div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="dismiss()" (key.enter)="dismiss()"
>
<input
ngbAutofocus
type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
(click)="close()"
(click)="close()" (key.enter)="confirm()"
>
</div>
</ng-template>

1
client/src/app/shared/confirm/confirm.component.ts
View File

@ -45,7 +45,6 @@ export class ConfirmComponent implements OnInit {
)
}
@HostListener('document:keydown.enter')
confirm () {
if (this.openedModal) this.openedModal.close()
}

3
client/src/app/shared/forms/markdown-textarea.component.html
View File

@ -1,7 +1,8 @@
<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
<textarea
[(ngModel)]="content" (ngModelChange)="onModelChange()"
[ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
class="form-control" [ngClass]="classes"
[ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
[id]="name" [name]="name">
</textarea>

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

@ -8,8 +8,10 @@
<div class="modal-body">
<form novalidate [formGroup]="form" (ngSubmit)="banUser()">
<div class="form-group">
<textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
</textarea>
<textarea
i18n-placeholder placeholder="Reason..." formControlName="reason"
class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
></textarea>
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
@ -20,7 +22,10 @@
</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Ban this user" class="action-button-submit"

13
client/src/app/shared/video/modals/video-blacklist.component.html
View File

@ -8,8 +8,10 @@
<form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
<div class="form-group">
<textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
</textarea>
<textarea
i18n-placeholder placeholder="Reason..." formControlName="reason"
[ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
></textarea>
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
@ -27,9 +29,10 @@
</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Submit" class="action-button-submit"

7
client/src/app/shared/video/modals/video-download.component.html
View File

@ -95,9 +95,10 @@
</div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Download" class="action-button-submit"

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

@ -12,17 +12,20 @@
<form novalidate [formGroup]="form" (ngSubmit)="report()">
<div class="form-group">
<textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
</textarea>
<textarea
i18n-placeholder placeholder="Reason..." formControlName="reason"
[ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
></textarea>
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Submit" class="action-button-submit"

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

@ -52,7 +52,7 @@
<div class="video-actions">
<!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
<my-video-actions-dropdown
*ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
*ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
(videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
></my-video-actions-dropdown>
</div>

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

@ -32,9 +32,10 @@
</div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
<input
type="submit" i18n-value value="Add this caption" class="action-button-submit"

12
client/src/app/videos/+video-edit/shared/video-edit.component.html
View File

@ -9,7 +9,7 @@
<div class="col-md-8">
<div class="form-group">
<label i18n for="name">Title</label>
<input type="text" id="name" formControlName="name" />
<input type="text" id="name" class="form-control" formControlName="name" />
<div *ngIf="formErrors.name" class="form-error">
{{ formErrors.name }}
</div>
@ -58,7 +58,7 @@
<div class="form-group">
<label i18n>Channel</label>
<div class="peertube-select-container">
<select formControlName="channelId">
<select formControlName="channelId" class="form-control">
<option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
</select>
</div>
@ -67,7 +67,7 @@
<div class="form-group">
<label i18n for="category">Category</label>
<div class="peertube-select-container">
<select id="category" formControlName="category">
<select id="category" formControlName="category" class="form-control">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
@ -81,7 +81,7 @@
<div class="form-group">
<label i18n for="licence">Licence</label>
<div class="peertube-select-container">
<select id="licence" formControlName="licence">
<select id="licence" formControlName="licence" class="form-control">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
@ -95,7 +95,7 @@
<div class="form-group">
<label i18n for="language">Language</label>
<div class="peertube-select-container">
<select id="language" formControlName="language">
<select id="language" formControlName="language" class="form-control">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
@ -109,7 +109,7 @@
<div class="form-group">
<label i18n for="privacy">Privacy</label>
<div class="peertube-select-container">
<select id="privacy" formControlName="privacy">
<select id="privacy" formControlName="privacy" class="form-control">
<option></option>
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
<option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>

68
client/src/app/videos/+video-edit/shared/video-edit.component.scss
View File

@ -1,6 +1,11 @@
@import '_variables';
@import '_mixins';
label {
font-weight: $font-regular;
font-size: 100%;
}
.peertube-select-container {
@include peertube-select-container(auto);
}
@ -148,65 +153,4 @@ p-calendar {
}
}
::ng-deep {
.ng2-tag-input {
border: none !important;
}
.ng2-tags-container {
display: flex;
align-items: center;
border: 1px solid #C6C6C6;
border-radius: 3px;
padding: 5px !important;
height: max-content;
}
tag-input-form {
input {
height: 30px !important;
font-size: 12px !important;
background-color: var(--mainBackgroundColor) !important;
color: var(--mainForegroundColor) !important;
}
}
tag {
background-color: $grey-background-color !important;
color: #000 !important;
border-radius: 3px !important;
font-size: 12px !important;
height: 30px !important;
line-height: 30px !important;
margin: 0 5px 0 0 !important;
cursor: default !important;
padding: 0 8px 0 10px !important;
div {
height: 100% !important;
}
}
delete-icon {
cursor: pointer !important;
height: auto !important;
vertical-align: middle !important;
padding-left: 6px !important;
svg {
position: relative;
top: -1px;
height: auto !important;
vertical-align: middle !important;
path {
fill: $grey-foreground-color !important;
}
}
&:hover {
transform: none !important;
}
}
}
@include ng2-tags

8
client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
View File

@ -2,16 +2,16 @@
<div class="first-step-block">
<my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
<div class="button-file">
<div class="button-file form-control">
<span i18n>Select the file to upload</span>
<input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" />
<input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
</div>
<span class="button-file-extension">({{ videoExtensions }})</span>
<div class="form-group form-group-channel">
<label i18n for="first-step-channel">Channel</label>
<div class="peertube-select-container">
<select id="first-step-channel" [(ngModel)]="firstStepChannelId">
<select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
<option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
</select>
</div>
@ -20,7 +20,7 @@
<div class="form-group">
<label i18n for="first-step-privacy">Privacy</label>
<div class="peertube-select-container">
<select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
<select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
<option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
</select>

7
client/src/app/videos/+video-watch/comment/video-comment-add.component.html
View File

@ -43,9 +43,10 @@
<my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
</div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">
Cancel
</span>
<input
type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
(click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
>
<input
type="submit" i18n-value value="Login to comment" class="action-button-submit"

5
client/src/app/videos/+video-watch/modal/video-support.component.html
View File

@ -7,6 +7,9 @@
<div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
<div class="modal-footer inputs">
<span i18n class="action-button action-button-cancel" (click)="hide()">Maybe later</span>
<input
type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
(click)="hide()" (key.enter)="hide()"
>
</div>
</ng-template>

2
client/src/sass/application.scss
View File

@ -25,6 +25,7 @@ body {
// for css custom properties #{$var}
--mainColor: #{$main-color};
--mainColorLighter: #{$main-color-lighter};
--mainColorLightest: #{$main-color-lightest};
--mainHoverColor: #{$main-hover-color};
--mainBackgroundColor: #{$bg-color};
--mainForegroundColor: #{$fg-color};
@ -113,6 +114,7 @@ label {
.main-col {
margin-left: $menu-width;
width: calc(100% - #{$menu-width});
outline: none;
.margin-content {
margin-left: $not-expanded-horizontal-margins;

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

@ -230,3 +230,20 @@ ngb-tooltip-window {
background-color: var(--secondaryColor);
}
}
// input box-shadow on focus
.form-control {
font-size: 15px;
color: var(--mainForegroundColor);
background-color: var(--inputBackgroundColor);
outline: none;
&:focus-within,
&:focus {
box-shadow: 0 0 0 .2rem var(--mainColorLightest);
&.input-error {
box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
}
}
}

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

@ -80,9 +80,10 @@
}
}
@mixin button-focus-visible-shadow($color) {
@mixin button-focus($color) {
&:focus,
&.focus-visible {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
box-shadow: 0 0 0 .2rem $color;
}
}
@ -127,7 +128,7 @@
}
@mixin orange-button {
@include button-focus-visible-shadow(var(--mainHoverColor));
@include button-focus(var(--mainColorLightest));
&, &:active, &:focus {
color: #fff;
@ -151,6 +152,8 @@
}
@mixin tertiary-button {
@include button-focus($grey-button-outline-color);
color: $grey-foreground-color;
background-color: transparent;
@ -164,6 +167,8 @@
}
@mixin grey-button {
@include button-focus($grey-button-outline-color);
&, &:active, &:focus {
background-color: $grey-background-color;
color: $grey-foreground-color;
@ -274,10 +279,8 @@
@mixin peertube-select-container ($width) {
padding: 0;
margin: 0;
border: 1px solid #C6C6C6;
width: $width;
border-radius: 3px;
overflow: hidden;
background: var(--inputBackgroundColor);
position: relative;
font-size: 15px;
@ -303,8 +306,7 @@
width: calc(100% + 2px);
position: relative;
left: 1px;
border: none;
box-shadow: none;
border: 1px solid #C6C6C6;
background: transparent none;
appearance: none;
cursor: pointer;
@ -370,7 +372,7 @@
position: absolute;
&:focus + span {
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
box-shadow: 0 0 0 .2rem var(--mainColorLightest);
}
& + span {
@ -703,3 +705,72 @@
text-align: center;
}
}
@mixin ng2-tags {
::ng-deep {
.ng2-tag-input {
border: none !important;
}
.ng2-tags-container {
display: flex;
align-items: center;
border: 1px solid #C6C6C6;
border-radius: 3px;
padding: 5px !important;
height: max-content;
&:focus-within {
box-shadow: 0 0 0 .2rem var(--mainColorLightest);
}
}
tag-input-form {
input {
height: 30px !important;
font-size: 12px !important;
background-color: var(--mainBackgroundColor) !important;
color: var(--mainForegroundColor) !important;
}
}
tag {
background-color: $grey-background-color !important;
color: #000 !important;
border-radius: 3px !important;
font-size: 12px !important;
height: 30px !important;
line-height: 30px !important;
margin: 0 5px 0 0 !important;
cursor: default !important;
padding: 0 8px 0 10px !important;
div {
height: 100% !important;
}
}
delete-icon {
cursor: pointer !important;
height: auto !important;
vertical-align: middle !important;
padding-left: 6px !important;
svg {
position: relative;
top: -1px;
height: auto !important;
vertical-align: middle !important;
path {
fill: $grey-foreground-color !important;
}
}
&:hover {
transform: none !important;
}
}
}
}

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

@ -12,11 +12,13 @@ $grey-background-color: #E5E5E5;
$grey-background-hover-color: #EFEFEF;
$grey-foreground-color: #585858;
$grey-foreground-hover-color: #303030;
$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
// Palette
$main-color: hsl(24, 90%, 50%);
$main-hover-color: lighten($main-color, 5%);
$main-color-lighter: lighten($main-color, 10%);
$main-color-lightest: lighten($main-color, 40%);
$secondary-color: hsl(187, 77, 34);
//
@ -77,6 +79,7 @@ $activated-action-button-color: black;
$variables: (
--mainColor: var(--mainColor),
--mainColorLighter: var(--mainColorLighter),
--mainColorLightest: var(--mainColorLightest),
--mainHoverColor: var(--mainHoverColor),
--mainBackgroundColor: var(--mainBackgroundColor),
--mainForegroundColor: var(--mainForegroundColor),