From 5781c152cd0ed1d3cf1fc16dadddd4609733f6aa Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Mon, 16 Dec 2024 12:08:42 +0100 Subject: [PATCH] scss and icons --- .../two-column/two-column.component.html | 2 +- .../_views/base-data/base-data.component.html | 2 +- .../_views/dashboard/dashboard.component.html | 2 +- .../location-form.component.html | 78 ++++++++------- .../shipping-company-form.component.html | 64 +++++++------ .../user-detail/user-detail.component.html | 9 +- .../src/app/_views/user/users.component.html | 2 +- .../vessel-form/vessel-form.component.html | 90 +++++++++--------- .../zone/zone-form/zone-form.component.html | 40 ++++---- angular/src/app/app.component.html | 8 +- angular/src/app/app.component.ts | 4 +- .../images/icons/dark-mode-toggle-icon.svg | 1 + .../assets/images/icons/icon-back-white.svg | 1 + angular/src/assets/images/icons/icon-back.svg | 1 + .../images/icons/icon-lefthand-active.svg | 1 + .../src/assets/images/icons/icon-lefthand.svg | 1 + .../src/assets/images/icons/icon-logout.svg | Bin 0 -> 3700 bytes .../images/icons/light-mode-toggle-icon.svg | 1 + angular/src/assets/scss/_basics.scss | 82 +++++++++++++++- angular/src/assets/scss/_dark.scss | 27 +++++- 20 files changed, 270 insertions(+), 146 deletions(-) create mode 100644 angular/src/assets/images/icons/dark-mode-toggle-icon.svg create mode 100644 angular/src/assets/images/icons/icon-back-white.svg create mode 100644 angular/src/assets/images/icons/icon-back.svg create mode 100644 angular/src/assets/images/icons/icon-lefthand-active.svg create mode 100644 angular/src/assets/images/icons/icon-lefthand.svg create mode 100644 angular/src/assets/images/icons/icon-logout.svg create mode 100644 angular/src/assets/images/icons/light-mode-toggle-icon.svg diff --git a/angular/src/app/_components/layout/two-column/two-column.component.html b/angular/src/app/_components/layout/two-column/two-column.component.html index 77fcca3..fe0bf8a 100644 --- a/angular/src/app/_components/layout/two-column/two-column.component.html +++ b/angular/src/app/_components/layout/two-column/two-column.component.html @@ -34,7 +34,7 @@
-
< {{'basic.back' | translate}}
+
diff --git a/angular/src/app/_views/base-data/base-data.component.html b/angular/src/app/_views/base-data/base-data.component.html index 82c9082..c7e790f 100644 --- a/angular/src/app/_views/base-data/base-data.component.html +++ b/angular/src/app/_views/base-data/base-data.component.html @@ -1,5 +1,5 @@
-
+

{{ 'view.base_data' | translate }}

diff --git a/angular/src/app/_views/dashboard/dashboard.component.html b/angular/src/app/_views/dashboard/dashboard.component.html index 94efa18..ef071dc 100644 --- a/angular/src/app/_views/dashboard/dashboard.component.html +++ b/angular/src/app/_views/dashboard/dashboard.component.html @@ -1,5 +1,5 @@
-
+

{{ 'dashboard.view' | translate }}

Space for important stuff. diff --git a/angular/src/app/_views/location/location-form/location-form.component.html b/angular/src/app/_views/location/location-form/location-form.component.html index b01aa9f..4666659 100644 --- a/angular/src/app/_views/location/location-form/location-form.component.html +++ b/angular/src/app/_views/location/location-form/location-form.component.html @@ -1,39 +1,43 @@ -

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}

-
-
-
- - -
-
- - -
-
- - - - -
+
+
+

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}

+
+
+ +
+ + +
+
+ + +
+
+ + + + +
-
- - - @if (isEditMode()) { - - } -
- -
\ No newline at end of file + + @if (isEditMode()) { + + } +
+ +
+
diff --git a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html index 5e0b3dd..2d48a4a 100644 --- a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html +++ b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html @@ -1,34 +1,38 @@ -

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}

-
-
-
- - -
+
+
+

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}

+
+
+ +
+ + +
-
- - -
+
+ + +
-
- - - @if (isEditMode()) { - - } -
- + + @if (isEditMode()) { + + } +
+ +
\ No newline at end of file diff --git a/angular/src/app/_views/user/user-detail/user-detail.component.html b/angular/src/app/_views/user/user-detail/user-detail.component.html index 7098d67..8b7f752 100644 --- a/angular/src/app/_views/user/user-detail/user-detail.component.html +++ b/angular/src/app/_views/user/user-detail/user-detail.component.html @@ -1,5 +1,5 @@
-
+

{{ 'users.user' | translate }}: {{ user.firstName }} {{ user.lastName }}

@@ -14,9 +14,10 @@
- - - + @if (user.imageUrl !== null && user.imageUrl !== undefined) { + {{user.firstName}} {{user.lastName}} + }
diff --git a/angular/src/app/_views/user/users.component.html b/angular/src/app/_views/user/users.component.html index 36eebb5..edf572b 100644 --- a/angular/src/app/_views/user/users.component.html +++ b/angular/src/app/_views/user/users.component.html @@ -1,5 +1,5 @@
-
+

{{ 'basic.users' | translate }}

diff --git a/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html b/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html index b365682..374ae84 100644 --- a/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html +++ b/angular/src/app/_views/vessel/vessel-form/vessel-form.component.html @@ -1,48 +1,52 @@ -

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}

-
-
-
- - -
+
+
+

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}

+
+
+ +
+ + +
-
- - -
+
+ + +
-
- - - - -
+
+ + + + +
-
- - - @if (isEditMode()) { - - } -
- + + @if (isEditMode()) { + + } +
+ +
\ No newline at end of file diff --git a/angular/src/app/_views/zone/zone-form/zone-form.component.html b/angular/src/app/_views/zone/zone-form/zone-form.component.html index cd0b1cd..97aef3d 100644 --- a/angular/src/app/_views/zone/zone-form/zone-form.component.html +++ b/angular/src/app/_views/zone/zone-form/zone-form.component.html @@ -1,21 +1,25 @@ -

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}

-
-
-
- - -
+
+
+

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}

+
+
+ +
+ + +
-
- - - @if (isEditMode()) { - - } -
- + + @if (isEditMode()) { + + } +
+ +
\ No newline at end of file diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 9258875..719f100 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -20,10 +20,10 @@ - - - - + + + +
diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index 6729ef5..a64e225 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -96,10 +96,10 @@ export class AppComponent implements OnInit { } get buttonClassLefties(): string { - return this.isLeftHanded ? 'btn-primary' : 'btn-secondary'; + return this.isLeftHanded ? 'is-left' : ''; } get buttonClassDarkMode(): string { - return this.isDarkMode ? 'btn-primary' : 'btn-secondary'; + return this.isDarkMode ? 'toggle-light' : 'toggle-dark'; } } diff --git a/angular/src/assets/images/icons/dark-mode-toggle-icon.svg b/angular/src/assets/images/icons/dark-mode-toggle-icon.svg new file mode 100644 index 0000000..e83c83a --- /dev/null +++ b/angular/src/assets/images/icons/dark-mode-toggle-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/angular/src/assets/images/icons/icon-back-white.svg b/angular/src/assets/images/icons/icon-back-white.svg new file mode 100644 index 0000000..b069f21 --- /dev/null +++ b/angular/src/assets/images/icons/icon-back-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/angular/src/assets/images/icons/icon-back.svg b/angular/src/assets/images/icons/icon-back.svg new file mode 100644 index 0000000..fb3c50d --- /dev/null +++ b/angular/src/assets/images/icons/icon-back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/angular/src/assets/images/icons/icon-lefthand-active.svg b/angular/src/assets/images/icons/icon-lefthand-active.svg new file mode 100644 index 0000000..645f2c3 --- /dev/null +++ b/angular/src/assets/images/icons/icon-lefthand-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/angular/src/assets/images/icons/icon-lefthand.svg b/angular/src/assets/images/icons/icon-lefthand.svg new file mode 100644 index 0000000..417f032 --- /dev/null +++ b/angular/src/assets/images/icons/icon-lefthand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/angular/src/assets/images/icons/icon-logout.svg b/angular/src/assets/images/icons/icon-logout.svg new file mode 100644 index 0000000000000000000000000000000000000000..88a0c9143d88efebdda005f143fd75ef62380cf3 GIT binary patch literal 3700 zcmbuC-A>y;5QXP2PQUVG=~ z%$Xl2e|{gOZF)%OX)isd>vWZF^!zF9r;D`HahpD-106r(80$Js;Kxh zl&@3yejm|Bcz5!At@BB8-_pG_uJp7^zXHn-t*>-|f#Y<`yRW7wJ~V$L=-;??&?Tz6@yb3YxYBcVJMq6_V2JY?#_a~9w%zprtE@FpU= z(+at>@cBia+BDbmL|ItqI@Z%d9*w0@wrBCK)7w2sFXL&hw|m05)H#+`6T6F$1@APS zXw7}Ba~d9q3hAljr_#=GVx^7uhc9sxzmaXl@yXqt!^gq?OvOYFWM9jIz<2FqK@fA znCl!2nXNNHHTL!Kr0yWDPN*8;YP1Unpq%OG#P%d4h^18|WSM$tbzQ!p+go~Vx3mF{ z+HY@lxKqkK2-{)!p9u}?8q0Khsb5-# zIXV#ko(gn1Q-!(0Tf8oG&o*FzexvWeN4)eVXqT~GXhr4Q9$4vB>~W{t(ZT|r@ju*w zGj?r`d_@l324?D0jSH~JZbwr)O$m#`Oo|s0` zK!s6NnE`hMOcK54qpO@X9>^^g#yPbJqRb?r$6kMtX?_*bIm5$~9IutF@BHv_qk z?ZLUADu^6rTn*%b8gj;A<79w_JcAvE@|-soY8*XsPZT|-jMHEG8eNIRGs*MD^FQP8 zyviuyi{DHciMyCN28(>D&>rHU?& \ No newline at end of file diff --git a/angular/src/assets/scss/_basics.scss b/angular/src/assets/scss/_basics.scss index 8151b9e..ce9bf8f 100644 --- a/angular/src/assets/scss/_basics.scss +++ b/angular/src/assets/scss/_basics.scss @@ -78,10 +78,73 @@ body { color: #fff; } +.btn-logout { + width: 30px; + height: 30px; + padding: 0; + margin: 0 0 0 10px; + border: none; + background: transparent url("../images/icons/icon-logout.svg") no-repeat left top; + background-size: 100% auto; +} + +.toggle-left-hand { + width: 30px; + height: 30px; + padding: 0; + margin: 0 0 0 10px; + border: none; + background: transparent url("../images/icons/icon-lefthand.svg") no-repeat left top; + background-size: 100% auto; + + &.is-left { + background: transparent url("../images/icons/icon-lefthand-active.svg") no-repeat left top; + background-size: 100% auto; + } +} + +.toggle-dark-mode { + width: 46px; + height: 23px; + padding: 0; + border: none; + margin: 0 0 0 10px; + background: transparent; + + &.toggle-dark { + background: transparent url("../images/icons/light-mode-toggle-icon.svg") no-repeat left top; + background-size: 100% auto; + } + + &.toggle-light { + background: transparent url("../images/icons/dark-mode-toggle-icon.svg") no-repeat left top; + background-size: 100% auto; + } +} + +.btn-back { + width: 30px; + height: 30px; + background: transparent url("../images/icons/icon-back.svg") no-repeat left top; + background-size: 100% auto; + cursor: pointer; + @media only screen and (min-width: 1200px) { + position: relative; + z-index: 100; + } +} + +.spt-headline { + @media only screen and (min-width: 1200px) { + margin: -32px 0 0 50px; + } +} + label, .form-label { font-size: 13px; margin-bottom: 5px !important; + a { color: rgba(33, 37, 41); } @@ -307,8 +370,10 @@ textarea#pasteCodes { margin-bottom: 3px; position: relative; cursor: pointer; + &.small { padding: 6px 10px 6px 83px; + &:before, &:after { top: 14px; @@ -445,9 +510,11 @@ textarea#pasteCodes { } } } + .mat-mdc-header-row { height: auto; } + img { width: 30px; } @@ -590,12 +657,14 @@ textarea#pasteCodes { width: 54px; height: 28px; margin: 0 !important; + input { opacity: 0; width: 0; height: 0; } } + .slider { position: absolute; cursor: pointer; @@ -605,6 +674,7 @@ textarea#pasteCodes { bottom: 0; background-color: #ccc; transition: .4s; + &:before { position: absolute; content: ""; @@ -616,15 +686,19 @@ textarea#pasteCodes { transition: .4s; } } + input:checked + .slider { background-color: #2ecc71; } + input:checked + .slider:before { transform: translateX(26px); } + .slider.round { border-radius: 34px; } + .slider.round:before { border-radius: 50%; } @@ -654,6 +728,7 @@ input[readonly], input:disabled { font-size: 10px; line-height: 13px; } + .lastname { top: 75%; font-size: 8px; @@ -678,7 +753,7 @@ input[readonly], input:disabled { //transform: translate(-50%, -50%); right: 0; bottom: 0; - transform: translate(-10%,-46.3%); + transform: translate(-10%, -46.3%); width: 65%; } @@ -747,11 +822,13 @@ input[readonly], input:disabled { &:first-child { border: none; } + > div { display: flex; justify-content: flex-start; align-items: center; padding-left: 20px; + div { &:first-child { min-width: 300px; @@ -804,13 +881,16 @@ input[readonly], input:disabled { border: 1px solid #2b3b44; padding: 10px 0; max-height: 600px; + ul { margin-right: 20px; + li { border-bottom: 1px solid #eee; padding: 3px 0; } } + p { margin-bottom: 0; } diff --git a/angular/src/assets/scss/_dark.scss b/angular/src/assets/scss/_dark.scss index ccec16d..eab5b4f 100644 --- a/angular/src/assets/scss/_dark.scss +++ b/angular/src/assets/scss/_dark.scss @@ -1,5 +1,4 @@ .dark-mode { - .navbar-primary, .spt-main, .mat-mdc-table, .mat-elevation-z8 th, .mat-mdc-elevation-specific.mat-elevation-z8 th, @@ -7,6 +6,10 @@ background: #2b3a44 !important; } + .navbar-primary { + background: #6a7277 !important; + } + h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, .mat-mdc-select, .mat-mdc-select-arrow svg, @@ -32,31 +35,49 @@ fill: #fff; } - .toggle:before, .toggle:after { + .toggle:before, .toggle:after, + #btn-sidebar::after { background: #fff; } + .spt-dl dt, .spt-dl dd, .mat-mdc-cell, - .spt-container .card:not(.contacts .card, .tasks .card, .post .card) { + .spt-container .card:not(.contacts .card, .tasks .card, .post .card), + #btn-sidebar::before, #btn-sidebar::after, + .mat-elevation-z8 th, .mat-mdc-elevation-specific.mat-elevation-z8 th { border-color: #fff; } + .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon { fill: #3e525f; } + .mat-mdc-tab-list .mat-ripple { background: #4e697b; } + .mat-mdc-table .mat-mdc-row:hover .mdc-data-table__cell, .toggle, .mat-mdc-tab-list .mdc-tab-indicator--active .mat-ripple { background: #3e525f; } + .spt-icon-details { border-color: #3e525f; } + .form-control, select { background: #1d262d !important; } + + .modal-content { + background-color: #6c757d; + } + + .btn-back { + background-image: url("../images/icons/icon-back-white.svg"); + background-size: 100% auto; + } } \ No newline at end of file