diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-02 11:39:14 +0200 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-02 11:39:14 +0200 |
commit | a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634 (patch) | |
tree | d8b27f30741ae3c9a2a72c68210644c16cd8d9b3 /client/src/app/videos/+video-edit | |
parent | 21973012ab06a93dd901821dbbe078eb793bac4d (diff) | |
download | PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.tar.gz PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.tar.zst PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.zip |
Use form-control to display box-shadow on form inputs/selects upon focus
Diffstat (limited to 'client/src/app/videos/+video-edit')
4 files changed, 20 insertions, 75 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html index 19043eee6..4262ff0fc 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html | |||
@@ -32,9 +32,10 @@ | |||
32 | </div> | 32 | </div> |
33 | 33 | ||
34 | <div class="modal-footer inputs"> | 34 | <div class="modal-footer inputs"> |
35 | <span i18n class="action-button action-button-cancel" (click)="hide()"> | 35 | <input |
36 | Cancel | 36 | type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" |
37 | </span> | 37 | (click)="hide()" (key.enter)="hide()" |
38 | > | ||
38 | 39 | ||
39 | <input | 40 | <input |
40 | type="submit" i18n-value value="Add this caption" class="action-button-submit" | 41 | type="submit" i18n-value value="Add this caption" class="action-button-submit" |
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 967f3b188..152b069d2 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html | |||
@@ -9,7 +9,7 @@ | |||
9 | <div class="col-md-8"> | 9 | <div class="col-md-8"> |
10 | <div class="form-group"> | 10 | <div class="form-group"> |
11 | <label i18n for="name">Title</label> | 11 | <label i18n for="name">Title</label> |
12 | <input type="text" id="name" formControlName="name" /> | 12 | <input type="text" id="name" class="form-control" formControlName="name" /> |
13 | <div *ngIf="formErrors.name" class="form-error"> | 13 | <div *ngIf="formErrors.name" class="form-error"> |
14 | {{ formErrors.name }} | 14 | {{ formErrors.name }} |
15 | </div> | 15 | </div> |
@@ -58,7 +58,7 @@ | |||
58 | <div class="form-group"> | 58 | <div class="form-group"> |
59 | <label i18n>Channel</label> | 59 | <label i18n>Channel</label> |
60 | <div class="peertube-select-container"> | 60 | <div class="peertube-select-container"> |
61 | <select formControlName="channelId"> | 61 | <select formControlName="channelId" class="form-control"> |
62 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> | 62 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> |
63 | </select> | 63 | </select> |
64 | </div> | 64 | </div> |
@@ -67,7 +67,7 @@ | |||
67 | <div class="form-group"> | 67 | <div class="form-group"> |
68 | <label i18n for="category">Category</label> | 68 | <label i18n for="category">Category</label> |
69 | <div class="peertube-select-container"> | 69 | <div class="peertube-select-container"> |
70 | <select id="category" formControlName="category"> | 70 | <select id="category" formControlName="category" class="form-control"> |
71 | <option></option> | 71 | <option></option> |
72 | <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> | 72 | <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> |
73 | </select> | 73 | </select> |
@@ -81,7 +81,7 @@ | |||
81 | <div class="form-group"> | 81 | <div class="form-group"> |
82 | <label i18n for="licence">Licence</label> | 82 | <label i18n for="licence">Licence</label> |
83 | <div class="peertube-select-container"> | 83 | <div class="peertube-select-container"> |
84 | <select id="licence" formControlName="licence"> | 84 | <select id="licence" formControlName="licence" class="form-control"> |
85 | <option></option> | 85 | <option></option> |
86 | <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> | 86 | <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> |
87 | </select> | 87 | </select> |
@@ -95,7 +95,7 @@ | |||
95 | <div class="form-group"> | 95 | <div class="form-group"> |
96 | <label i18n for="language">Language</label> | 96 | <label i18n for="language">Language</label> |
97 | <div class="peertube-select-container"> | 97 | <div class="peertube-select-container"> |
98 | <select id="language" formControlName="language"> | 98 | <select id="language" formControlName="language" class="form-control"> |
99 | <option></option> | 99 | <option></option> |
100 | <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> | 100 | <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> |
101 | </select> | 101 | </select> |
@@ -109,7 +109,7 @@ | |||
109 | <div class="form-group"> | 109 | <div class="form-group"> |
110 | <label i18n for="privacy">Privacy</label> | 110 | <label i18n for="privacy">Privacy</label> |
111 | <div class="peertube-select-container"> | 111 | <div class="peertube-select-container"> |
112 | <select id="privacy" formControlName="privacy"> | 112 | <select id="privacy" formControlName="privacy" class="form-control"> |
113 | <option></option> | 113 | <option></option> |
114 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 114 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> |
115 | <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> | 115 | <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> |
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 90d26e13d..1b7bc56b4 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss | |||
@@ -1,6 +1,11 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | label { | ||
5 | font-weight: $font-regular; | ||
6 | font-size: 100%; | ||
7 | } | ||
8 | |||
4 | .peertube-select-container { | 9 | .peertube-select-container { |
5 | @include peertube-select-container(auto); | 10 | @include peertube-select-container(auto); |
6 | } | 11 | } |
@@ -148,65 +153,4 @@ p-calendar { | |||
148 | } | 153 | } |
149 | } | 154 | } |
150 | 155 | ||
151 | ::ng-deep { | 156 | @include ng2-tags |
152 | .ng2-tag-input { | ||
153 | border: none !important; | ||
154 | } | ||
155 | |||
156 | .ng2-tags-container { | ||
157 | display: flex; | ||
158 | align-items: center; | ||
159 | border: 1px solid #C6C6C6; | ||
160 | border-radius: 3px; | ||
161 | padding: 5px !important; | ||
162 | height: max-content; | ||
163 | } | ||
164 | |||
165 | tag-input-form { | ||
166 | input { | ||
167 | height: 30px !important; | ||
168 | font-size: 12px !important; | ||
169 | |||
170 | background-color: var(--mainBackgroundColor) !important; | ||
171 | color: var(--mainForegroundColor) !important; | ||
172 | } | ||
173 | } | ||
174 | |||
175 | tag { | ||
176 | background-color: $grey-background-color !important; | ||
177 | color: #000 !important; | ||
178 | border-radius: 3px !important; | ||
179 | font-size: 12px !important; | ||
180 | height: 30px !important; | ||
181 | line-height: 30px !important; | ||
182 | margin: 0 5px 0 0 !important; | ||
183 | cursor: default !important; | ||
184 | padding: 0 8px 0 10px !important; | ||
185 | |||
186 | div { | ||
187 | height: 100% !important; | ||
188 | } | ||
189 | } | ||
190 | |||
191 | delete-icon { | ||
192 | cursor: pointer !important; | ||
193 | height: auto !important; | ||
194 | vertical-align: middle !important; | ||
195 | padding-left: 6px !important; | ||
196 | |||
197 | svg { | ||
198 | position: relative; | ||
199 | top: -1px; | ||
200 | height: auto !important; | ||
201 | vertical-align: middle !important; | ||
202 | |||
203 | path { | ||
204 | fill: $grey-foreground-color !important; | ||
205 | } | ||
206 | } | ||
207 | |||
208 | &:hover { | ||
209 | transform: none !important; | ||
210 | } | ||
211 | } | ||
212 | } | ||
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html index 3cb57e375..be3a9662b 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html | |||
@@ -2,16 +2,16 @@ | |||
2 | <div class="first-step-block"> | 2 | <div class="first-step-block"> |
3 | <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> | 3 | <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> |
4 | 4 | ||
5 | <div class="button-file"> | 5 | <div class="button-file form-control"> |
6 | <span i18n>Select the file to upload</span> | 6 | <span i18n>Select the file to upload</span> |
7 | <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" /> | 7 | <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus /> |
8 | </div> | 8 | </div> |
9 | <span class="button-file-extension">({{ videoExtensions }})</span> | 9 | <span class="button-file-extension">({{ videoExtensions }})</span> |
10 | 10 | ||
11 | <div class="form-group form-group-channel"> | 11 | <div class="form-group form-group-channel"> |
12 | <label i18n for="first-step-channel">Channel</label> | 12 | <label i18n for="first-step-channel">Channel</label> |
13 | <div class="peertube-select-container"> | 13 | <div class="peertube-select-container"> |
14 | <select id="first-step-channel" [(ngModel)]="firstStepChannelId"> | 14 | <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control"> |
15 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> | 15 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> |
16 | </select> | 16 | </select> |
17 | </div> | 17 | </div> |
@@ -20,7 +20,7 @@ | |||
20 | <div class="form-group"> | 20 | <div class="form-group"> |
21 | <label i18n for="first-step-privacy">Privacy</label> | 21 | <label i18n for="first-step-privacy">Privacy</label> |
22 | <div class="peertube-select-container"> | 22 | <div class="peertube-select-container"> |
23 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId"> | 23 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control"> |
24 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 24 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> |
25 | <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> | 25 | <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> |
26 | </select> | 26 | </select> |