Pull request #64: Added ruleset to create project, fixes for Safari

Merge in RED/ui from ui-updates to master * commit 'c850f3126b6ddbff5bfd0e8704f3dff579a0562c': Added ruleset to create project, fixes for Safari
2020-12-11 10:59:49 +01:00 · 2020-12-11 10:59:49 +01:00 · 79b265bc36
commit 79b265bc36
parent 4f4ea14536 c850f3126b
29 changed files with 153 additions and 51 deletions
--- a/apps/red-ui/src/app/common/file-actions/file-actions.component.scss
+++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.scss
@ -1,6 +1,9 @@
 .file-actions {
    display: flex;
-    gap: 2px;
+
+    > *:not(last-child) {
+        margin-right: 2px;
+    }
 }

 .reviewer {
--- a/apps/red-ui/src/app/common/filter/filter.component.scss
+++ b/apps/red-ui/src/app/common/filter/filter.component.scss
@ -8,7 +8,10 @@

    .actions {
        display: flex;
-        gap: 8px;
+
+        > *:not(last-child) {
+            margin-right: 8px;
+        }
    }
 }

--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
@ -2,7 +2,7 @@
    <div [className]="colorClass + ' oval ' + size" [matTooltipPosition]="'above'" [matTooltip]="username">
        {{ initials }}
    </div>
-    <div *ngIf="withName" class="clamp-2">
+    <div *ngIf="withName" class="clamp-2 username">
        {{ username || ('initials-avatar.unassigned' | translate) }}
    </div>
 </div>
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss
+++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss
@ -2,5 +2,8 @@
    display: flex;
    align-items: center;
    width: fit-content;
-    gap: 6px;
+
+    .username {
+        margin-left: 6px;
+    }
 }
--- a/apps/red-ui/src/app/components/comments/comments.component.scss
+++ b/apps/red-ui/src/app/components/comments/comments.component.scss
@ -3,12 +3,18 @@
 .wrapper {
    display: flex;
    flex-direction: column;
-    gap: 10px;
    margin-top: 10px;

+    > *:not(last-child) {
+        margin-bottom: 10px;
+    }
+
    .comment {
        display: flex;
-        gap: 12px;
+
+        > *:not(last-child) {
+            margin-right: 12px;
+        }

        .owner {
            opacity: 0.7;
@ -45,13 +51,19 @@
    .comment-actions-container,
    .actions-container {
        display: flex;
-        gap: 15px;
        align-items: center;
+
+        > *:not(last-child) {
+            margin-right: 15px;
+        }
    }

    .actions-container {
        margin-left: 26px;
-        gap: 5px;
+
+        > *:not(last-child) {
+            margin-right: 5px;
+        }

        > div:not(:last-child):after {
            content: '•';
--- a/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss
+++ b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss
@ -3,5 +3,8 @@
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
-    gap: 4px;
+
+    > *:not(last-child) {
+        margin-right: 4px;
+    }
 }
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
@ -8,10 +8,19 @@
    position: relative;
    display: flex;
    align-items: center;
-    gap: 20px;
+
+    &:not(.column) {
+        > *:not(last-child) {
+            margin-right: 20px;
+        }
+    }

    &.column {
        flex-direction: column;
+
+        > *:not(last-child) {
+            margin-bottom: 20px;
+        }
    }
 }

@ -33,19 +42,19 @@
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 8px;
    margin-left: -8px;

    > div {
        width: fit-content;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;

        > div {
            border-radius: 4px;
            padding: 3px 8px;

+            &:not(last-child) {
+                margin-bottom: 8px;
+            }
+
            &:not(.filter-disabled) {
                cursor: pointer;
            }
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
@ -14,7 +14,10 @@
        .section-wrapper {
            display: flex;
            align-items: center;
-            gap: 10px;
+
+            > *:not(last-child) {
+                margin-right: 10px;
+            }
        }
    }

--- a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
+++ b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
@ -9,7 +9,6 @@
        display: flex;
        width: 100%;
        line-height: 11px;
-        gap: 8px;
        padding: 0 24px;
    }

@ -20,6 +19,8 @@
    .sort-arrows-container {
        display: none;
        color: $primary;
+        margin-left: 8px;
+
        mat-icon {
            height: 14px;
            width: 6px;
--- a/apps/red-ui/src/app/components/type-filter/type-filter.component.scss
+++ b/apps/red-ui/src/app/components/type-filter/type-filter.component.scss
@ -2,5 +2,8 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    gap: 8px;
+
+    redaction-annotation-icon {
+        margin-right: 8px;
+    }
 }
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@ -10,12 +10,24 @@
                <label translate="project-listing.add-edit-dialog.form.name"></label>
                <input formControlName="projectName" name="projectName" type="text" />
            </div>
+
+            <div class="red-input-group" *ngIf="!project">
+                <mat-form-field floatLabel="always">
+                    <mat-label>{{ 'project-listing.add-edit-dialog.form.rule-set' | translate }}</mat-label>
+                    <mat-select value="EFSA 1 (Authors by vertebrates)" style="width: 100%;">
+                        <mat-option *ngFor="let type of ['EFSA 1 (Authors by vertebrates)']" [value]="type">
+                            {{ type }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+
            <div class="red-input-group">
                <label translate="project-listing.add-edit-dialog.form.description"></label>
                <textarea formControlName="description" name="description" type="text" rows="5"></textarea>
            </div>

-            <mat-form-field class="mt-20">
+            <mat-form-field>
                <mat-label>{{ 'project-listing.add-edit-dialog.form.due-date' | translate }}</mat-label>
                <input matInput [matDatepicker]="picker" formControlName="dueDate" />
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
--- a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss
+++ b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss
@ -10,7 +10,6 @@
    justify-content: flex-end;
    width: 120px;
    padding-right: 16px;
-    background: linear-gradient(to right, transparent 0%, #f9fafb, #f9fafb, #f9fafb);

    .confirm.active {
        background-color: $grey-2;
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@ -99,11 +99,11 @@

                .details {
                    display: flex;
-                    gap: 10px;
                }

-                redaction-annotation-icon {
+                redaction-type-annotation-icon {
                    margin-top: 6px;
+                    margin-right: 10px;
                }

                &:hover {
@ -129,8 +129,11 @@

 .assign-actions-wrapper {
    display: flex;
-    gap: 2px;
    margin-left: 8px;
+
+    > *:not(last-child) {
+        margin-right: 2px;
+    }
 }

 .mr-16 {
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
@ -21,7 +21,6 @@
            .project-stats-item {
                display: flex;
                width: fit-content;
-                gap: 5px;
                margin-top: 25px;

                &:first-of-type {
@ -31,6 +30,7 @@
                mat-icon {
                    height: 16px;
                    margin-top: 2px;
+                    margin-right: 5px;
                }
            }
        }
--- a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss
@ -1,5 +1,8 @@
 :host {
    display: flex;
    align-items: center;
-    gap: 2px;
+
+    > *:not(last-child) {
+        margin-right: 2px;
+    }
 }
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
@ -8,14 +8,13 @@
    redaction-circle-button {
        position: absolute;
        top: -5px;
-        left: 277px;
+        left: 290px;
    }
 }

 .legend {
    display: flex;
    flex-direction: column;
-    gap: 4px;
    margin-left: -8px;

    > div {
@ -32,13 +31,20 @@
        &.active {
            background-color: rgba($primary, 0.1);
        }
+
+        &:not(:last-of-type) {
+            margin-bottom: 4px;
+        }
    }
 }

 .stats-subtitle {
-    gap: 0;
    flex-direction: column;
    align-items: flex-start;
+
+    > * {
+        margin-right: 0;
+    }
 }

 .mt-8 {
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@ -49,15 +49,16 @@ redaction-table-col-name::ng-deep {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
-            gap: 4px;
            opacity: 0.7;
            color: $grey-1;
            font-size: 11px;
            letter-spacing: 0;
            line-height: 14px;
+
            .mat-icon {
                width: 10px;
                height: 10px;
+                margin-right: 4px;
            }
        }

@ -68,13 +69,13 @@ redaction-table-col-name::ng-deep {
 }

 .left-container {
-    width: calc(100vw - 358px);
+    width: calc(100vw - 375px);
 }

 .right-container {
    display: flex;
-    width: 358px;
-    min-width: 358px;
+    width: 375px;
+    min-width: 375px;
    padding: 16px 16px 16px 24px;

    redaction-project-details {
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@ -165,7 +165,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
    }

    public get areAllFilesSelected() {
-        return this.appStateService.activeProject.files.length !== 0 && this.selectedFileIds.length === this.displayedFiles.length;
+        return this.displayedFiles.length !== 0 && this.selectedFileIds.length === this.displayedFiles.length;
    }

    public get areSomeFilesSelected() {
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@ -102,11 +102,12 @@
            "form": {
                "description": "Description",
                "name": "Name",
-                "due-date": "Due Date"
+                "due-date": "Due Date",
+                "rule-set": "Rule Set"
            },
            "actions": {
                "save": "Save",
-                "save-and-add-members": "Save and edit Team"
+                "save-and-add-members": "Save and Edit Team"
            }
        },
        "header": "Projects",
--- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
+++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
@ -4,7 +4,10 @@
 .breadcrumbs-container {
    display: flex;
    align-items: center;
-    gap: 6px;
+
+    > *:not(last-child) {
+        margin-right: 6px;
+    }

    .breadcrumb {
        text-decoration: none;
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@ -13,7 +13,10 @@
        display: flex;
        align-items: center;
        line-height: 34px;
-        gap: 6px;
+
+        > *:not(last-child) {
+            margin-right: 6px;
+        }
    }
 }

@ -34,6 +37,7 @@ redaction-icon-button,
 redaction-chevron-button,
 redaction-circle-button {
    position: relative;
+    display: flex;
    transition: background-color 0.2s;

    button {
--- a/apps/red-ui/src/assets/styles/red-checkbox.scss
+++ b/apps/red-ui/src/assets/styles/red-checkbox.scss
@ -24,6 +24,9 @@

        display: flex;
        align-items: center;
-        gap: 8px;
+
+        > *:not(last-child) {
+            margin-right: 8px;
+        }
    }
 }
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@ -66,7 +66,6 @@

 .stats-subtitle {
    display: flex;
-    gap: 12px;

    > div {
        display: flex;
@ -77,6 +76,10 @@
            width: 10px;
            margin-right: 4px;
        }
+
+        &:not(last-child) {
+            margin-right: 12px;
+        }
    }
 }

--- a/apps/red-ui/src/assets/styles/red-grid.scss
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@ -8,15 +8,21 @@
    display: flex;
    align-items: center;
    z-index: 1;
-    gap: 10px;
    border-bottom: 1px solid $separator;
    box-sizing: border-box;
    @include inset-shadow;

+    > *:not(last-child) {
+        margin-right: 10px;
+    }
+
    .actions {
        display: flex;
        align-items: center;
-        gap: 25px;
+
+        > *:not(last-child) {
+            margin-right: 25px;
+        }
    }

    &.justify-end {
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@ -38,6 +38,10 @@
        display: none;
    }

+    .mat-form-field-wrapper {
+        padding-bottom: 0;
+    }
+
    .mat-form-field-label {
        opacity: 0.7 !important;
        color: $grey-1 !important;
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@ -23,7 +23,10 @@

        display: flex;
        align-items: center;
-        gap: 8px;
+
+        > *:not(last-child) {
+            margin-right: 8px;
+        }

        .arrow-wrapper {
            width: 16px;
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@ -23,12 +23,15 @@ body {
    background-color: $white;

    .filters {
-        gap: 2px;
        display: flex;
        align-items: center;

+        > *:not(last-child) {
+            margin-right: 2px;
+        }
+
        > div:first-child {
-            margin-right: 6px;
+            margin-right: 8px;
        }

        form {
@ -43,7 +46,10 @@ body {
    .actions {
        display: flex;
        align-items: center;
-        gap: 2px;
+
+        > *:not(last-child) {
+            margin-right: 2px;
+        }
    }
 }

@ -251,9 +257,12 @@ body {
    justify-content: center;
    align-items: center;
    flex-direction: column;
-    gap: 12px;
    height: calc(100vh - 61px);
    position: relative;
+
+    > *:not(last-child) {
+        margin-bottom: 2px;
+    }
 }

 .fit-content {
--- a/apps/red-ui/src/assets/styles/red-select.scss
+++ b/apps/red-ui/src/assets/styles/red-select.scss
@ -8,10 +8,6 @@
        line-height: 14px;
    }

-    .mat-form-field-wrapper {
-        padding-bottom: 0;
-    }
-
    .mat-form-field-infix {
        padding: 0;
        border: none;
--- a/apps/red-ui/src/assets/styles/red-toasts.scss
+++ b/apps/red-ui/src/assets/styles/red-toasts.scss
@ -11,9 +11,12 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
-    gap: 10px;
    box-shadow: none;

+    > *:not(last-child) {
+        margin-right: 10px;
+    }
+
    &:hover {
        box-shadow: none;
    }
@ -21,7 +24,10 @@
    .actions-wrapper {
        margin-top: 24px;
        display: flex;
-        gap: 24px;
+
+        > *:not(last-child) {
+            margin-right: 24px;
+        }

        a {
            font-size: 11px;