Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Some input styling

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-24 01:12:37 +03:00
parent 40067ff6e6
commit b78f8493d9
9 changed files with 87 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
View File

@ -17,7 +17,7 @@
<textarea formControlName="description" name="description" type="text" rows="5"></textarea>
</div>
<mat-form-field>
<mat-form-field class="mt-20">
<mat-label>{{'project-listing.add-edit-dialog.form.due-date.label' | translate}}</mat-label>
<input matInput [matDatepicker]="picker" formControlName="dueDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

16
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-redaction-dialog.component.html
View File

@ -7,11 +7,11 @@
<div class="dialog-content">
<div class="file-details">
<div class="detail-row"
[innerHTML]="'manual-redaction.dialog.content.text.label' | translate:addRedactionRequest">
</div>
<div class="red-input-group">
<label translate="manual-redaction.dialog.content.text.label"></label>
</div>
{{ addRedactionRequest.value }}
<div class="red-input-group">
<label translate="manual-redaction.dialog.content.reason.label"></label>
@ -23,17 +23,17 @@
<textarea formControlName="comment" name="comment" type="text" rows="2"></textarea>
</div>
<mat-form-field >
<mat-label>{{'manual-redaction.dialog.content.dictionary.label' | translate}}</mat-label>
<div class="red-input-group">
<label translate="manual-redaction.dialog.content.dictionary.label"></label>
<mat-select formControlName="dictionary">
<mat-option *ngFor="let dictionary of dictionaries | async" [value]="dictionary.type">
{{dictionary.type}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="red-input-group">
<mat-checkbox
<mat-checkbox color="primary"
formControlName="addToDictionary">{{'manual-redaction.dialog.content.dictionary.add.label' | translate}}</mat-checkbox>
</div>

8
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -62,13 +62,7 @@ redaction-pdf-viewer {
.pages, .annotations {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
width: 0;
background: transparent; /* Chrome/Safari/Webkit */
}
@include no-scroll-bar();
&.activePanel {
background-color: #FAFAFA;

2
apps/red-ui/src/assets/i18n/en.json
View File

@ -52,7 +52,7 @@
},
"content": {
"text": {
"label": "<strong>Selected Text: </strong> {{value}}"
"label": "Selected text:"
},
"dictionary": {
"add": {

16
apps/red-ui/src/assets/styles/red-checkbox.scss
View File

@ -10,3 +10,19 @@
width: 18px;
height: 18px;
}
.mat-checkbox-layout {
.mat-checkbox-inner-container {
margin-left: 0;
}
.mat-checkbox-label {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: $accent;
display: flex;
align-items: center;
gap: 4px;
}
}

4
apps/red-ui/src/assets/styles/red-dialog.scss
View File

@ -1,3 +1,7 @@
.mat-dialog-container {
border-radius: 8px;
}
.dialog {
position: relative;
min-height: 80px;

80
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -1,53 +1,63 @@
@import "red-variables";
@import "red-mixins";
.red-input-group {
display: flex;
flex-direction: column;
margin-top: 5px;
margin-bottom: 8px;
margin-top: 13px;
label {
height: 14px;
opacity: 0.6;
&:first-child {
margin-top: 0;
}
input, textarea, mat-select {
box-sizing: border-box;
width: 322px;
padding-left: 11px;
padding-right: 11px;
border: 1px solid $grey-5;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
line-height: 14px;
margin-bottom: 5px;
background-color: #FFFFFF;
border-radius: 8px;
outline: none;
margin-top: 3px;
min-height: 34px;
&:focus {
border-color: $grey-1;
}
}
mat-select {
width: 220px;
.mat-select-trigger {
height: 32px;
}
.mat-select-value {
vertical-align: middle;
}
}
textarea {
resize: none;
box-sizing: border-box;
padding-left: 11px;
padding-right: 11px;
width: 300px;
border: 1px solid $grey-3;
opacity: 0.4;
border-radius: 2px;
background-color: #FFFFFF;
outline: none;
&:focus {
border-color: $grey-1;
}
padding-top: 7px;
padding-bottom: 7px;
@include no-scroll-bar();
}
input {
box-sizing: border-box;
padding-left: 11px;
padding-right: 11px;
height: 34px;
width: 300px;
border: 1px solid $grey-3;
opacity: 0.4;
border-radius: 2px;
background-color: #FFFFFF;
outline: none;
label {
opacity: 0.7;
font-size: 11px;
letter-spacing: 0;
line-height: 14px;
margin-bottom: 2px;
&:focus {
border-color: $grey-1;
&.mat-checkbox-layout {
opacity: 1;
}
}
}

21
apps/red-ui/src/assets/styles/red-menu.scss
View File

@ -11,7 +11,8 @@
color: $accent;
.arrow-wrapper {
width: 24px;
width: 16px;
margin-right: 8px;
text-align: center;
mat-icon {
@ -24,23 +25,5 @@
&.padding-left {
padding-left: 64px;
}
.mat-checkbox-layout {
margin-left: 4px;
.mat-checkbox-inner-container {
margin-left: 0;
}
.mat-checkbox-label {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: $accent;
display: flex;
align-items: center;
gap: 4px;
}
}
}
}

9
apps/red-ui/src/assets/styles/red-mixins.scss
View File

@ -8,3 +8,12 @@
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin no-scroll-bar {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
width: 0;
background: transparent; /* Chrome/Safari/Webkit */
}
}