From 24d6799f72eac9d20854dcd1b002a0f2072d0139 Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Fri, 17 Feb 2023 10:10:34 +0100 Subject: [PATCH 01/16] Add styles for buttons, sidebar, toggle, input, checkbox, radio, grid --- .../Pages/Demo.razor | 449 ++++++++++++++---- .../Styles/Connected.Components.scss | 8 +- .../Styles/components/_buttons.scss | 36 +- .../Styles/components/_checkbox.scss | 260 ++++++---- .../Styles/components/_grid.scss | 58 +++ .../Styles/components/_index.scss | 3 +- .../Styles/components/_inputs.scss | 71 ++- .../Styles/components/_radio.scss | 340 ++++++++++--- .../Styles/components/_sidebar.scss | 442 +++++++++++++---- .../Styles/components/_toggle.scss | 107 +++++ .../Styles/globals/_core.scss | 51 +- .../Styles/globals/_reset.scss | 12 +- .../Styles/globals/_typography.scss | 23 +- .../Styles/globals/_variables.scss | 131 +++-- .../Styles/layout/_css_documentation.scss | 36 +- .../Styles/layout/_document.scss | 7 +- .../Styles/util/_breakpoints.scss | 6 +- .../Styles/util/_colors.scss | 3 +- .../Styles/util/_functions.scss | 2 +- .../Styles/util/_utilities.scss | 29 ++ 20 files changed, 1623 insertions(+), 451 deletions(-) create mode 100644 src/Connected.Components/Styles/components/_toggle.scss diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor index f59846a..a5727b0 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor @@ -1,83 +1,123 @@ @page "/demo" - +
+
  • + + + Main navbar link 2 + +
    + 22 +
    +     +     + + Main navbar link 2 + +
    • +
  • + + + Main navbar link 3 + +
    + 22 +
    +     +     + + Main navbar link 3 + +
    • -
    +
  • + + + Main navbar link 4 + +
    + 22 +
    +     +     + + Main navbar link 4 + +
    • +
    + + + +
    + -
    -
    -
    - +
    - - - - - - -
    -
    +
    +
    +
    + + @* *@ + Open Sidebar -
    -
    - - Open Sidebar +
    +
    + + Open Filters +
    +

    Borders

    Use border utilities to quickly style the border, border color and border-radius of an element. @@ -152,19 +192,19 @@ 

    - 
-<span class="text-core">text-core</span>
-<span class="text-primary">text-primary</span>
-<span class="text-secondary">text-secondary</span>
-<span class="text-success">text-success</span>
-<span class="text-info">text-info</span>
-<span class="text-warning">text-warning</span>
-<span class="text-danger">text-danger</span>
-<span class="text-white">text-white</span>
-<span class="text-light">text-light</span>
-<span class="text-dark">text-dark</span>
-<span class="text-black">text-black</span>
-
    + + <span class="text-core">text-core</span> + <span class="text-primary">text-primary</span> + <span class="text-secondary">text-secondary</span> + <span class="text-success">text-success</span> + <span class="text-info">text-info</span> + <span class="text-warning">text-warning</span> + <span class="text-danger">text-danger</span> + <span class="text-white">text-white</span> + <span class="text-light">text-light</span> + <span class="text-dark">text-dark</span> + <span class="text-black">text-black</span> +

    Background color

    @@ -457,15 +497,15 @@

    Sizes

    - +
    - +
    -
    @@ -496,40 +536,110 @@

    -
    +
    + +
    + + + + + +
    + + @*
    - - + +
    - - + +
    - - + + +
    +
    *@ + + + +
    + + + + + +
    + @*
    - - + +
    - - + +
    - - + +
    -
    +
    *@ + + +
    + + + + + + +
    +
    @@ -541,7 +651,7 @@
    -
    +
    @@ -646,6 +756,7 @@ +
    Header
    @@ -678,11 +789,9 @@
    -
    - - +
    + +
    @@ -707,10 +816,166 @@
    12
    + +
    + + + + + + + +
      +
    • +
      +
      Product 1
      + 0023 001445669 1 +
      Product serial code
      +
      +
      +
      77,29
      +
      + +
      +
      + You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected +
      +
      +
      • + +
    • +
      +
      Product 2
      + 0023 001445669 2 +
      You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
      +
      +
      +
      727,29
      +
      +
      • +
    + + + + + + +
    - + @code { private string sidebarClosed { get; set; } = "close"; @@ -720,12 +985,20 @@ sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : ""; } + private string sidebarRightClosed { get; set; } = "close-r"; + + private void ToggleSidebarRight() + { + sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; + } + + - private string NavClosed { get; set; } = "showMenu"; + private string NavClosed { get; set; } = ""; private void ToggleNav() { - NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "showMenu" : ""; + NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } -} +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/Connected.Components.scss b/src/Connected.Components/Styles/Connected.Components.scss index 7829ff0..0bdfb75 100644 --- a/src/Connected.Components/Styles/Connected.Components.scss +++ b/src/Connected.Components/Styles/Connected.Components.scss @@ -1,4 +1,4 @@ -@import 'globals/_index'; -@import 'layout/_index'; -@import 'components/_index'; -@import 'util/_index'; \ No newline at end of file +@forward 'globals'; +@forward 'layout'; +@forward 'components'; +@forward 'util'; \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_buttons.scss b/src/Connected.Components/Styles/components/_buttons.scss index 5b46b0e..09c7678 100644 --- a/src/Connected.Components/Styles/components/_buttons.scss +++ b/src/Connected.Components/Styles/components/_buttons.scss @@ -12,12 +12,12 @@ user-select: none; background-color: $bg-color; border: 1px solid transparent; - padding: 0.375rem 1rem; + padding: 0.3rem 1.35rem; font-size: $base-font-size; text-transform: uppercase; line-height: $base-font-size * 1.5; text-decoration: none; - border-radius: $base-border-radius * 20; + border-radius: $border-radius-pill; transition: $transition; } @@ -46,12 +46,12 @@ } .btn-outline-#{$key} { // @include btn(); - color: $val; + color: darken($val, 10); background-color: transparent; - border: 1px solid $val; + border: 1px solid darken($val, 10); &:hover { - color: darken($val, 10); - border: 1px solid darken($val, 10); + color: darken($val, 30); + border: 1px solid darken($val, 30); } &:focus-visible, &.focus { @@ -67,24 +67,24 @@ } .btn.btn-sm { - font-size: $font-size-sm; - line-height: $font-size-sm * 1.5; - padding: 0.25rem 0.75rem; - border-radius: $base-border-radius; + font-size: .75rem; + line-height: $font-size-sm * 1.25; + padding: 0.4rem 1rem; + //border-radius: $base-border-radius; } .btn.btn-lg { font-size: $font-size-md; line-height: $font-size-md * 1.5; - padding: 0.5rem 1.25rem; - border-radius: $base-border-radius * 2.5; + padding: 0.5rem 1.65rem; + //border-radius: $base-border-radius * 2.5; } .btn.btn-block { font-size: $font-size-md; line-height: $font-size-md * 1.5; - padding: 0.5rem 1.25rem; - border-radius: $base-border-radius * 2.5; + padding: 0.5rem 1.5rem; + //border-radius: $base-border-radius * 2.5; display: block; width: 100%; } @@ -114,12 +114,12 @@ } .btn-outline-core { - color: var(--bg-core-primary) !important; + color: var(--bg-core-primary-darken) !important; background-color: transparent !important; - border: 1px solid var(--bg-core-primary) !important; + border: 1px solid var(--bg-core-primary-darken) !important; &:hover { - color: var(--bg-core-primary-darken) !important; - border: 1px solid var(--bg-core-primary-darken) !important; + color: var(--bg-core-primary-dark) !important; + border: 1px solid var(--bg-core-primary-dark) !important; } &:focus-visible, &.focus { diff --git a/src/Connected.Components/Styles/components/_checkbox.scss b/src/Connected.Components/Styles/components/_checkbox.scss index cf01d5d..908c33a 100644 --- a/src/Connected.Components/Styles/components/_checkbox.scss +++ b/src/Connected.Components/Styles/components/_checkbox.scss @@ -1,102 +1,188 @@ -$color3: #f4f4f4; -$color4: var(--bg-core-primary-darken); +$checkbox-primary-color: var(--bg-core-primary-darken); +$checkbox-secondary-color: #f4f4f4; +$checkbox-disabled-color: darken($checkbox-secondary-color, 25%); .checkbox-group { - margin: 0.5rem; - position:relative; - input[type="checkbox"] { - position: absolute; - opacity: 0; - + .checkbox-label { - &:before { - content: ""; - background: transparent; - border-radius: 0%; - border: 2px solid $color4; - display: inline-block; - width: 1.25em; - height: 1.25em; - position: relative; - top: .15rem; - margin-right: .75em; - vertical-align: top; - cursor: pointer; - text-align: center; - z-index: 1; - transition: all 250ms ease; - } - } - &:checked { - + .checkbox-label { - &:before { - background-color: $color4; - box-shadow: inset 0 0 0 2px $color3; + --width: 1.25rem; + --height: var(--width); + --inset: calc(var(--width) / 10); + + margin: 0.75rem 0; + width: max-content; + cursor: pointer; + position:relative; + display: flex; + align-items: center; + gap:.75rem; + z-index: 1; + + &.reversed{ + justify-content: space-between; + width: 100%; + + & :nth-child(1) {order:2;} + & :nth-child(2) {order:1;} } + + &.column{ + flex-direction: column; + gap:.25rem; + width: 100%; } - } - // &:checked { - // + .checkbox-label { - // &:after { - // background: $color3; - // z-index: 1; - // opacity: 1; - // scale: 0.25; - // clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); - - // } - // } - // } - &:focus { - + .checkbox-label { - &:before { - outline: none; - border-color: $color4; - } - } - } - &:disabled { - + .checkbox-label { - color: darken($color3, 25%); - pointer-events: none; - &:before { - box-shadow: inset 0 0 0 2px $color3; - border-color: darken($color3, 25%); - background: darken($color3, 25%); - } - } - } - + .checkbox-label { - &:empty { - &:before { - margin-right: 0; + + input[type="checkbox"] { + position: absolute; + opacity: 0; } - } - } +} + +.checkbox-fill { + position: relative; + display: inline-block; + width: var(--width); + height: var(--height); + background: transperent; + border: 2px solid $checkbox-primary-color; + transition: background 0.2s ease-in-out; } + +.checkbox-input:checked ~ .checkbox-fill { + background: var(--bg-core-primary-darken); + box-shadow: inset 0 0 0 var(--inset) $checkbox-secondary-color; + +} + +.checkbox-input:focus-within ~ .checkbox-fill { + outline: 1px solid $checkbox-primary-color; + } +.checkbox-input:disabled ~ .checkbox-fill { + box-shadow: inset 0 0 0 var(--inset) $checkbox-secondary-color; + border-color: $checkbox-disabled-color; + background: $checkbox-disabled-color; + pointer-events: none; + } + .checkbox-input:disabled ~ .checkbox-label { + color: $checkbox-disabled-color; + } -.checkbox-label:after { - content: ""; - display: inline-block; - width: 35px; - height: 35px; - border-radius: 50%; - background-color: transparent; - position: absolute; - left: -8px; - top: -6px; - scale: .75; - transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); -} + + .checkbox-fill::before { + content: ""; + display: inline-block; + width: calc(var(--width) * 1.8); + height: calc(var(--width) * 1.8); + border-radius: 50%; + background-color: transparent; + position: absolute; + z-index: -1; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + scale: .75; + transform-origin: left top; + transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s; + } + + .checkbox-fill:hover::before { + background: var(--bg-core-primary-lighten); + scale: 1; + opacity: .5; + } + + + + + +// $checkbox-primary-color: var(--bg-core-primary-darken); +// $checkbox-secondary-color: #f4f4f4; +// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%); + +// .checkbox-group { +// margin: 0.5rem; +// position:relative; + +// input[type="checkbox"] { +// position: absolute; +// opacity: 0; + +// + .checkbox-label { +// &:before { +// content: ""; +// background: transparent; +// border: 2px solid $checkbox-primary-color; +// display: inline-block; +// width: 1.25em; +// height: 1.25em; +// position: relative; +// top: .15rem; +// margin-right: .75em; +// vertical-align: top; +// cursor: pointer; +// text-align: center; +// z-index: 1; +// transition: all 250ms ease; +// } +// } +// &:checked { +// + .checkbox-label { +// &:before { +// background-color: $checkbox-primary-color; +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; + +// } +// } +// } +// &:focus { +// + .checkbox-label { +// &:before { +// outline: 1px solid $checkbox-primary-color; +// border-color: $checkbox-primary-color; +// } +// } +// } +// &:disabled { +// + .checkbox-label { +// color: darken($checkbox-secondary-color, 25%); +// pointer-events: none; +// &:before { +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; +// border-color: $checkbox-disabled-color; +// background: $checkbox-disabled-color; +// } +// } +// } +// + .checkbox-label { +// &:empty { +// &:before { +// margin-right: 0; +// } +// } +// } +// } +// } +// .checkbox-label:after { +// content: ""; +// display: inline-block; +// width: 35px; +// height: 35px; +// border-radius: 50%; +// background-color: transparent; +// position: absolute; +// left: -8px; +// top: -6px; +// scale: .75; +// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); +// } -.checkbox-label:hover:after { - background: var(--bg-core-primary-lighten); - scale: 1; - opacity: .5; -} \ No newline at end of file +// .checkbox-label:hover:after { +// background: var(--bg-core-primary-lighten); +// scale: 1; +// opacity: .5; +// } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_grid.scss b/src/Connected.Components/Styles/components/_grid.scss index 6a994b3..0bfe0d7 100644 --- a/src/Connected.Components/Styles/components/_grid.scss +++ b/src/Connected.Components/Styles/components/_grid.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @use "../util" as *; @use "../globals" as *; @@ -102,3 +104,59 @@ $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"); } } } + +/*grid-css*/ +$columns: 12; + +@mixin create-selectors($breakpoint: null) { + $infix: if($breakpoint == null, '', '-#{$breakpoint}'); + + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + grid-column-end: span $i; + padding: $base-padding; + } + .col-offset#{$infix}-#{$i} { + grid-column-start: $i + 1; + } + .row#{$infix}-#{$i} { + grid-row-end: span $i; + } + .row-offset#{$infix}-#{$i} { + grid-row-start: $i + 1; + } + } +} + + + +.row { + display: grid; + grid-template-columns: repeat($columns, 1fr); +} + +@include create-selectors; + +@each $breakpoint, $width in $breakpoints-up { + @media (min-width: $width) { + @include create-selectors($breakpoint); + } +} + +.collapse{ + max-height: 0; + overflow: hidden; + padding-top: 0; + padding-bottom: 0; + //opacity: 0; + transition: all 0.5s ease-out; +} + +.collapse.show{ + max-height: 25vh; + overflow: auto; + padding-top: initial; + padding-bottom: initial; + //opacity: 1; + transition: all 0.5s ease-in; +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_index.scss b/src/Connected.Components/Styles/components/_index.scss index 62e9a2a..fa4868c 100644 --- a/src/Connected.Components/Styles/components/_index.scss +++ b/src/Connected.Components/Styles/components/_index.scss @@ -3,4 +3,5 @@ @forward "sidebar"; @forward "radio"; @forward "inputs"; -@forward "checkbox"; \ No newline at end of file +@forward "checkbox"; +@forward "toggle"; \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_inputs.scss b/src/Connected.Components/Styles/components/_inputs.scss index da9aad1..46c65af 100644 --- a/src/Connected.Components/Styles/components/_inputs.scss +++ b/src/Connected.Components/Styles/components/_inputs.scss @@ -10,7 +10,7 @@ $width: 100%; form{ display: block; - margin-top: 1rem; + //padding-top: 1rem; } .form-group{ @@ -36,12 +36,13 @@ form{ width: 100%; border: none; border-radius: 0; - border-bottom: 1px solid $border-core; + border-bottom: 1px solid var(--border-core); &:focus { outline: none; } &:focus ~ label.label-animated, - &:valid ~ label.label-animated { + &:valid ~ label.label-animated, + &:disabled ~ label.label-animated { top: -12px; font-size: $font-size-sm; color: var(--bg-core-primary-darken); @@ -204,31 +205,71 @@ select { height: auto; max-height: max-content; opacity: 1; - transition: all $trans-time ease-in-out; + pointer-events: initial; + + } + &:focus-within ~ .backdrop { + opacity: 1; + display: block; } } - .drop-down{ - position: absolute; - opacity: 0; - display: flex; - flex-direction: column; - top: 46px; - left: 0; - min-width: 100%; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 80%; + width: 80%; height: 0; max-height: 0; - //padding: $base-padding; + display: flex; + flex-direction: column; + opacity: 0; + pointer-events: none; z-index: 1500; list-style: none; background-color: #fff; box-shadow: $base-box-shadow; + border-radius: $border-radius-lg; + transition: all $trans-time ease-in-out; + +} + +.backdrop{ + display: none; + opacity: 0; + z-index: 1499; + position: fixed; + top: 0; + right:0; + bottom:0; + left:0; + overflow: hidden; + background-color: rgba(0,0,0,.5); + transition: all $trans-time ease-in-out; +} + +@include breakpoint(sm) { +.drop-down{ + position: absolute; + top: 46px; + left: 0; + opacity: 0; + min-width: 100%; + width: 100%; + transform: none; border-radius: 0 0 $border-radius-lg $border-radius-lg; + } } + + + + + .dropdown-header { display: block; padding: 0.5rem 1.5rem; @@ -253,12 +294,12 @@ select { .dropdown-item:focus, .dropdown-item:hover { color: var(--text-core-hc); text-decoration: none; - background-color: var(--bg-core-primary-lighten); + background-color: var(--bg-core-primary-light); } .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; - border-top: 1px solid $border-core; + border-top: 1px solid var(--bg-core-primary-light); } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_radio.scss b/src/Connected.Components/Styles/components/_radio.scss index a9bcd14..e132d57 100644 --- a/src/Connected.Components/Styles/components/_radio.scss +++ b/src/Connected.Components/Styles/components/_radio.scss @@ -1,86 +1,276 @@ -$color1: #f4f4f4; -$color2: var(--bg-core-primary-darken); +$radio-primary-color: var(--bg-core-primary-darken); +$radio-secondary-color: #f4f4f4; +$radio-disabled-color: darken($radio-secondary-color, 25%); .radio-group { - margin: 0.5rem; - position:relative; - input[type="radio"] { - position: absolute; - opacity: 0; - + .radio-label { - &:before { - content: ""; - background: $color1; - border-radius: 100%; - border: 2px solid $color2; - display: inline-block; - width: 1.25em; - height: 1.25em; - position: relative; - top: .15rem; - margin-right: .75em; - vertical-align: top; - cursor: pointer; - text-align: center; - z-index: 1; - transition: all 250ms ease; - } - } - &:checked { - + .radio-label { - &:before { - background-color: $color2; - box-shadow: inset 0 0 0 2px $color1; - } - } - } - &:focus { - + .radio-label { - &:before { - outline: none; - border-color: $color2; - } - } - } - &:disabled { - + .radio-label { - color: darken($color1, 25%); - pointer-events: none; - &:before { - box-shadow: inset 0 0 0 2px $color1; - border-color: darken($color1, 25%); - background: darken($color1, 25%); + --width: 1.25rem; + --height: var(--width); + --inset: calc(var(--width) / 10); + + margin: 0.75rem 0; + width: max-content; + cursor: pointer; + position:relative; + display: flex; + align-items: center; + gap:.75rem; + z-index: 1; + + &.reversed{ + justify-content: space-between; + width: 100%; + + & :nth-child(1) {order:2;} + & :nth-child(2) {order:1;} } + + &.column{ + flex-direction: column; + gap:.25rem; + width: 100%; } - } - + .radio-label { - &:empty { - &:before { - margin-right: 0; + + input[type="radio"] { + position: absolute; + opacity: 0; } - } - } +} + +.radio-fill { + position: relative; + display: inline-block; + width: var(--width); + height: var(--height); + border-radius: 50%; + background: transperent; + border: 2px solid $radio-primary-color; + transition: background 0.2s ease-in-out; } + +.radio-input:checked ~ .radio-fill { + background: var(--bg-core-primary-darken); + box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color; + } +.radio-input:focus-within ~ .radio-fill { + outline: 1px solid $radio-primary-color; + +} +.radio-input:disabled ~ .radio-fill { + box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color; + border-color: $radio-disabled-color; + background: $radio-disabled-color; + pointer-events: none; + } -.radio-label:after { - content: ""; - display: inline-block; - width: 35px; - height: 35px; - border-radius: 50%; - background-color: transparent; - position: absolute; - left: -8px; - top: -6px; - scale: .75; - transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); -} + .radio-input:disabled ~ .radio-label { + color: $radio-disabled-color; + } + + + + + .radio-fill::before { + content: ""; + display: inline-block; + width: calc(var(--width) * 1.8); + height: calc(var(--width) * 1.8); + border-radius: 50%; + background-color: transparent; + position: absolute; + z-index: -1; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + scale: .75; + transform-origin: left top; + transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s; + } + + .radio-fill:hover::before { + background: var(--bg-core-primary-lighten); + scale: 1; + opacity: .5; + } + + + +// $checkbox-primary-color: var(--bg-core-primary-darken); +// $checkbox-secondary-color: #f4f4f4; +// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%); + +// .checkbox-group { +// margin: 0.5rem; +// position:relative; + +// input[type="checkbox"] { +// position: absolute; +// opacity: 0; + +// + .checkbox-label { +// &:before { +// content: ""; +// background: transparent; +// border: 2px solid $checkbox-primary-color; +// display: inline-block; +// width: 1.25em; +// height: 1.25em; +// position: relative; +// top: .15rem; +// margin-right: .75em; +// vertical-align: top; +// cursor: pointer; +// text-align: center; +// z-index: 1; +// transition: all 250ms ease; +// } +// } +// &:checked { +// + .checkbox-label { +// &:before { +// background-color: $checkbox-primary-color; +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; + +// } +// } +// } +// &:focus { +// + .checkbox-label { +// &:before { +// outline: 1px solid $checkbox-primary-color; +// border-color: $checkbox-primary-color; +// } +// } +// } +// &:disabled { +// + .checkbox-label { +// color: darken($checkbox-secondary-color, 25%); +// pointer-events: none; +// &:before { +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; +// border-color: $checkbox-disabled-color; +// background: $checkbox-disabled-color; +// } +// } +// } +// + .checkbox-label { +// &:empty { +// &:before { +// margin-right: 0; +// } +// } +// } +// } +// } + +// .checkbox-label:after { +// content: ""; +// display: inline-block; +// width: 35px; +// height: 35px; +// border-radius: 50%; +// background-color: transparent; +// position: absolute; +// left: -8px; +// top: -6px; +// scale: .75; +// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); +// } + +// .checkbox-label:hover:after { +// background: var(--bg-core-primary-lighten); +// scale: 1; +// opacity: .5; +// } + + +// $radio-primary-color: var(--bg-core-primary-darken); +// $radio-secondary-color: #f4f4f4; +// $radio-disabled-color: darken($radio-secondary-color, 25%); + +// .radio-group { +// margin: 0.5rem; +// position:relative; + +// input[type="radio"] { +// position: absolute; +// opacity: 0; + +// + .radio-label { +// &:before { +// content: ""; +// background: transparent; +// border-radius: 50%; +// border: 2px solid $radio-primary-color; +// display: inline-block; +// width: 1.25em; +// height: 1.25em; +// position: relative; +// top: .15rem; +// margin-right: .75em; +// vertical-align: top; +// cursor: pointer; +// text-align: center; +// z-index: 1; +// transition: all 250ms ease; +// } +// } +// &:checked { +// + .radio-label { +// &:before { +// background-color: $radio-primary-color; +// box-shadow: inset 0 0 0 2px $radio-secondary-color; +// } +// } +// } +// &:focus { +// + .radio-label { +// &:before { +// outline: 1px solid $radio-primary-color; +// border-color: $radio-primary-color; +// } +// } +// } +// &:disabled { +// + .radio-label { +// color: darken($radio-secondary-color, 25%); +// pointer-events: none; +// &:before { +// box-shadow: inset 0 0 0 2px $radio-secondary-color; +// border-color: $radio-disabled-color; +// background: $radio-disabled-color; +// } +// } +// } +// + .radio-label { +// &:empty { +// &:before { +// margin-right: 0; +// } +// } +// } +// } +// } + +// .radio-label:after { +// content: ""; +// display: inline-block; +// width: 35px; +// height: 35px; +// border-radius: 50%; +// background-color: transparent; +// position: absolute; +// left: -8px; +// top: -6px; +// scale: .75; +// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); +// } + +// .radio-label:hover:after { +// background: var(--bg-core-primary-lighten); +// scale: 1; +// opacity: .5; +// } -.radio-label:hover:after { - background: var(--bg-core-primary-lighten); - scale: 1; - opacity: .5; -} \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_sidebar.scss b/src/Connected.Components/Styles/components/_sidebar.scss index 1cb1779..44d3d65 100644 --- a/src/Connected.Components/Styles/components/_sidebar.scss +++ b/src/Connected.Components/Styles/components/_sidebar.scss @@ -2,28 +2,35 @@ @use '../util/' as *; +$sidebar-width-open:300px; +$sidebar-width-closed:75px; +$sidebar-right-width-open:300px; +$sidebar-right-width-closed:0px; + .sidebar{ position: fixed; + padding-inline: 0.75rem; height: 100vh; width: 100%; color: $text-core; - background: var(--bg-core-primary); - //margin: -2rem 2rem -2rem -2rem; + background: var(--bg-core-primary-light); + border-right: 1px solid rgba(0,0,0,.025); + border-radius: $border-radius-lg 0 0 $border-radius-lg; z-index: 100; transition: all 0.3s ease; @include breakpoint(sm) { - height: calc(100% + 4rem); + height: 100%; position: relative; - width: 300px; + width: $sidebar-width-open; } } .sidebar.close{ width: 0; - transform: translateX(-75px); + transform: translateX($sidebar-width-closed); @include breakpoint(sm) { - width: 75px; + width: $sidebar-width-closed; transform: translateX(0); } } @@ -31,59 +38,80 @@ .main { width: calc(100% - 1.5rem) ; margin-inline:auto; + transition: all 0.3s ease; @include breakpoint (sm) { - width: calc(100% - 300px);; + width: calc(100% - $sidebar-width-open - $sidebar-right-width-open); padding: 2rem; } } .main.close{ @include breakpoint (sm) { - width: calc(100% - 75px); + width: calc(100% - $sidebar-width-closed - $sidebar-width-open); + } + } + + .main.close-r{ + @include breakpoint (sm) { + width: calc(100% - $sidebar-right-width-open); } } + .main.close.close-r{ + @include breakpoint (sm) { + width: calc(100% - $sidebar-right-width-closed - $sidebar-width-closed); + } + } + + //profile .sidebar .profile-details{ display: flex; justify-content: space-between; align-items: center; - color: #fff; - background-color: rgba(0,0,0,.6); - } + padding-top: 0; + //color: #fff; + //background-color: var(--bg-core-primary); + border-radius: $border-radius-lg 0 0 0; + transition: all 0.3s ease; + @include breakpoint (sm) { + padding-top: 12px; + } +} .sidebar .profile-details .avatar{ - min-width: calc(70px - 1rem); + min-width: 50px; text-align: center; - margin: 1rem 0 1rem 1rem; - - } + margin-right: 12px; +} .sidebar .profile-details img{ - height: 40px; - width: 40px; + height: 50px; + width: 50px; object-fit: cover; border-radius: 50%; - //transition: all 0.5s ease; - } + padding: 5px; +} - .sidebar .profile-details .name-job{ - margin-right: auto; - +.sidebar .profile-details .profile-description { + margin-right: auto; } .sidebar .profile-details .profile-name{ font-weight: 600; white-space: nowrap; + color:var(--text-core-hc) } + .sidebar .profile-details .profile-job{ font-size: 12px; font-weight: 500; + color:var(--text-core-lc) } .sidebar .profile-details i{ height: 50px; - min-width: 70px; + min-width: 50px; text-align: center; line-height: 50px; font-size: 20px; @@ -94,137 +122,359 @@ .sidebar.close .profile-details .profile-name, .sidebar.close .profile-details .profile-job{ display: none; - } +} - //links - .sidebar .nav-links{ - height: 100%; + /*NAV*/ + .sidebar nav{ + position: sticky; + top: 0; + +} + + + .sidebar .navbar{ + height: auto; + //padding: 12px; padding: 0; overflow: auto; + display: flex; + flex-direction: column; } - .sidebar.close .nav-links{ + + .sidebar.close .navbar{ overflow: visible; } - .sidebar .nav-links::-webkit-scrollbar{ + + .sidebar .navbar::-webkit-scrollbar{ display: none; } - .sidebar .nav-links li{ + + .sidebar .navbar .navbar-header{ + display: block; + padding: 0.5rem 0; + margin-bottom: 0; + font-size: $font-size-sm; + color: var(--text-core-lc); + white-space: nowrap; + } + + + .sidebar .navbar .navbar-item{ position: relative; list-style: none; transition: all 0.4s ease; + margin-bottom: 12px; + line-height: 50px; + border-radius: $border-radius-pill; } - .sidebar .nav-links li:hover{ + + .sidebar .navbar .navbar-item:hover, + .sidebar .navbar .navbar-item:active, + .sidebar .navbar .navbar-item.active{ background: var(--bg-core-primary-lighten); } - .sidebar .nav-links li .iocn-link{ - display: flex; - align-items: center; - justify-content: space-between; + + .sidebar.close .navbar .navbar-item{ + border-radius: 50%; + } + + .sidebar .navbar .navbar-item.fab{ + background-color:#ffdad9; + border-radius: $border-radius-lg; + margin-bottom: 36px; + transition: all 0.3s ease; } - .sidebar.close .nav-links li .iocn-link{ - display: block + + .sidebar .navbar .navbar-item.fab:hover, + .sidebar .navbar .navbar-item.fab:active, + .sidebar .navbar .navbar-item.fab.active{ + background-color: #fbc5c3; } - .sidebar .nav-links li i{ + + .sidebar .navbar .navbar-item i{ height: 50px; - min-width: 70px; + min-width: 50px; text-align: center; line-height: 50px; - color: var(--text-core-vc); - font-size: 20px; + color: var(--text-core-lc); + font-size: 22px; cursor: pointer; transition: all 0.3s ease; } - .sidebar .nav-links li.showMenu i.arrow{ - transform: rotate(-180deg); - } - .sidebar.close .nav-links i.arrow{ - display: none; - } - .sidebar .nav-links li a{ + + .sidebar .navbar .navbar-item a{ display: flex; align-items: center; text-decoration: none; } - .sidebar .nav-links li a .link_name{ + + .sidebar .navbar .navbar-item a .navbar-link{ flex: 1 0 auto; - font-weight: 400; + font-weight: $font-weight-400; color: var(--text-core); - //transition: all 0.4s ease; } - .sidebar.close .nav-links li a .link_name{ + + .sidebar .navbar .navbar-item a .navbar-link:first-child { + + padding-left: 1.5rem; +} + + .sidebar.close .navbar .navbar-item a .navbar-link{ opacity: 0; pointer-events: none; + display: none; + } + .sidebar .navbar .navbar-item a .navbar-link.navbar-link-detail{ + flex: 0 0 auto; + font-weight: $font-weight-600; + color: var(--text-core-hc); + text-align: right; + padding-right: 1rem; } - - - - .sidebar .nav-links li .sub-menu{ - padding: 6px 6px 14px 70px; - margin-top: -10px; - background:var(--bg-core-primary-lighten); - display: none; - } - .sidebar .nav-links li.showMenu .sub-menu{ - display: block; - } - .sidebar .nav-links li .sub-menu a{ - color: var(--text-core); - font-size: 15px; - padding: 5px 0; - white-space: nowrap; - - transition: all 0.3s ease; - } - .sidebar .nav-links li .sub-menu a:hover{ - color: var(--bg-core-primary-darken); - } - .sidebar.close .nav-links li .sub-menu{ +/*TOOLTIP*/ + .sidebar.close .navbar .navbar-item .navbar-tooltip{ position: absolute; - left: 100%; - top: -10px; + background: #fff; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); + width: max-content; + left: calc(100% + 12px); + top: 0; margin-top: 0; padding: 10px 20px; - border-radius: 0 6px 6px 0; + border-radius: $border-radius-lg; opacity: 0; display: block; pointer-events: none; transition: 0s; } - .sidebar.close .nav-links li:hover .sub-menu{ - top: 0; + + .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{ + left: calc(100% + 24px); opacity: 1; pointer-events: auto; transition: all 0.4s ease; } - .sidebar .nav-links li .sub-menu .link_name{ - display: none; - } - .sidebar.close .nav-links li .sub-menu .link_name{ -font-weight: 600; + + .sidebar.close .navbar .navbar-tooltip { opacity: 1; display: block; } - .sidebar .nav-links li .sub-menu.blank{ - opacity: 1; - pointer-events: auto; - padding: 3px 20px 6px 16px; - opacity: 0; - pointer-events: none; + + .sidebar .navbar .navbar-tooltip { + display: none; } - .sidebar .nav-links li:hover .sub-menu.blank{ - top: 50%; - transform: translateY(-50%); + + + + .sidebar-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid var(--border-core-lighten); } + .badge-label { + border-radius: $base-border-radius; + font-size: $font-size-sm; + color: var(--text-core-hc); + display: flex; + justify-content: center; + align-items: center; + min-width: 20px; + height: 20px; + letter-spacing: 0; + padding: 12px; + pointer-events: auto; + text-indent: 0; + white-space: nowrap; + background-color: transparent; + transition: .3s cubic-bezier(.25,.8,.5,1); +} + +/*BOOTOMBAR*/ +@include breakpoint-down(sm) { + .main { + margin-bottom: rem(75); + } - + .sidebar.bottombar, + .sidebar.close.bottombar { + position: fixed; + bottom: 0; + transform: translateX(0); + display: flex; + align-items: center; + height: rem(75); + width: 100%; + color: $text-core; + background: var(--bg-core-primary-light); + border-radius: 0; + z-index: 100; + + } + .sidebar.bottombar .profile-description, + .sidebar.close.bottombar .profile-description, + .sidebar.bottombar .profile-details i, + .sidebar.close.bottombar .profile-deteils i { + display: none; + } + + .sidebar.bottombar nav, + .sidebar.close.bottombar nav { + position: relative; + width: 100%; + + } + + .sidebar.bottombar .navbar, + .sidebar.close.bottombar .navbar { + padding: 0; + flex-direction: row; + justify-content: space-around; + } + + .sidebar.bottombar .navbar .navbar-item, + .sidebar.close.bottombar .navbar .navbar-item { + margin-bottom: 0; + } + + .sidebar.bottombar .navbar-link, + .sidebar.close.bottombar .navbar-link { + display: none; + } + + .sidebar.bottombar .navbar .navbar-item .navbar-tooltip, + .sidebar.close.bottombar .navbar .navbar-item .navbar-tooltip { + display: none; + } + + .sidebar.bottombar .navbar-item.fab, + .sidebar.close.bottombar .navbar-item.fab { + position: absolute; + right: 1rem; + top: -4rem; + } + + .sidebar.bottombar .sidebar-divider, + .sidebar.close.bottombar .sidebar-divider { + display: none; + } + + +} + +/*RIGHT SIDEBAR*/ + + +.sidebar.right{ + position: fixed; + top: 0; + right: 0; + height: 100vh; + width: 100%; + color: $text-core; + background: var(--bg-core-primary-lighten); + border-right: 1px solid rgba(0,0,0,.025); + border-radius: 0 $border-radius-lg $border-radius-lg 0; + z-index: 99; + transition: all 0.3s ease; + + @include breakpoint(sm) { + height: 100%; + position: relative; + width: $sidebar-right-width-open; + } +} + +.sidebar.right.close-r{ + width: 0; + transform: translateX($sidebar-right-width-closed); + padding: 0; + + @include breakpoint(sm) { + width: $sidebar-right-width-closed; + transform: translateX(0); + z-index: -1; + opacity: 0; + pointer-events: none; + } +} + +.sidebar.right .navbar .navbar-item:hover, +.sidebar.right .navbar .navbar-item:active, +.sidebar.right .navbar .navbar-item.active{ + background: var(--bg-core-primary); +} +// .scrollable { +// display: block; +// height: 100%; +// max-height: 100vh; +// min-height: 0; +// } + +// .scroll-wrapper { +// position: relative; +// width: 100%; +// height: 100%; +// background-color: turquoise; +// } + +// .scroll-container { +// position: relative; +// width: 100%; +// height: 100%; +// touch-action: pan-y; +// overflow-x: hidden; +// overflow-y: auto; +// } + +// .scroll-content { +// height: auto; +// transform: none; +// position: relative; +// min-height: 100%; +// } + +.scrollable { + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + max-height: calc(100vh - 50px); +} + +.scroll-wrapper { + + + + position: relative; + width: auto; + height: 100%; + pointer-events: none; +} + .scroll-container { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + max-height: 100%; + overflow: hidden; + pointer-events: auto; + background-clip: padding-box; + } + + .scroll-content { + position: relative; + overflow-y: auto; + flex: 1 1 auto; + } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_toggle.scss b/src/Connected.Components/Styles/components/_toggle.scss new file mode 100644 index 0000000..ce32d17 --- /dev/null +++ b/src/Connected.Components/Styles/components/_toggle.scss @@ -0,0 +1,107 @@ +@use "../globals/" as *; +@use "../util/" as *; + +$toggle-primary-color: var(--bg-core-primary-darken); +$toggle-secondary-color: #ddd; +$toggle-disabled-color: darken($toggle-secondary-color, 25%); + +.toggle-group { + --width: 42px; + --height: calc(var(--width) / 2); + --border-radius: calc(var(--height) / 2); + + margin: 0.75rem 0; + width: max-content; + cursor: pointer; + position:relative; + display: flex; + align-items: center; + gap:.75rem; + + &.reversed{ + justify-content: space-between; + width: 100%; + + & :nth-child(1) {order:2;} + & :nth-child(2) {order:1;} + } + + &.column{ + flex-direction: column; + gap:.25rem; + width: 100%; + } + + input[type="checkbox"] { + position: absolute; + opacity: 0; + } +} + + .toggle-fill { + position: relative; + width: var(--width); + height: var(--height); + border-radius: var(--border-radius); + background: $toggle-secondary-color; + //margin-right: .75rem; + transition: background 0.2s ease-in-out; + } + + .toggle-input:checked ~ .toggle-fill { + background: var(--bg-core-primary-darken); + } + + .toggle-input:focus-within ~ .toggle-fill { + outline: 1px solid $toggle-primary-color; +} + + .toggle-input:disabled ~ .toggle-fill { + background: $toggle-disabled-color; + pointer-events: none; + } + + .toggle-input:disabled ~ .toggle-label { + color: $toggle-disabled-color; + } + + .toggle-fill::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + height: calc(var(--height) - 4px); + width: calc(var(--height) - 4px); + background: #ffffff; + border-radius: var(--border-radius); + transition: transform 0.2s; + } + + .toggle-input:checked ~ .toggle-fill::after { + transform: translateX(var(--height)); + } + + .toggle-fill::before { + content: ""; + display: inline-block; + width: calc(var(--height) * 1.8); + height: calc(var(--height) * 1.8); + border-radius: 50%; + background-color: transparent; + position: absolute; + left: calc(30% - var(--height)); + top: calc(60% - var(--height)); + scale: .75; + transform-origin: center; + transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s; + } + + .toggle-fill:hover::before { + background: var(--bg-core-primary-lighten); + scale: 1; + opacity: .5; + } + + .toggle-input:checked ~ .toggle-fill::before { + transform: translateX(var(--height)); + } \ No newline at end of file diff --git a/src/Connected.Components/Styles/globals/_core.scss b/src/Connected.Components/Styles/globals/_core.scss index 09398c4..7f71698 100644 --- a/src/Connected.Components/Styles/globals/_core.scss +++ b/src/Connected.Components/Styles/globals/_core.scss @@ -8,15 +8,15 @@ body{ background: linear-gradient(to left, var(--bg-core-primary-lighten), var(--bg-core-end)); font-family: 'Open Sans', sans-serif; font-size: $base-font-size; - //font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9+0.1vw, $base-font-size); + //font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9 + 0.1vw, $base-font-size); color: var(--text-core); @include breakpoint(sm){ background: linear-gradient(to left, var(--bg-core-primary), var(--bg-core-end)); } } - + //hr classes hr { border-top: 1px solid var(--border-core); @@ -25,11 +25,11 @@ hr { background-color:var(--border-core); color: var(--border-core); } - + //section section, -.section{ -margin-bottom: 1rem; +.section{ +margin-bottom: 1rem; } @@ -39,4 +39,43 @@ margin-bottom: 1rem; } - \ No newline at end of file + /*ICONS*/ +.icon-default { + color: var(--bg-core-primary); +} + + +.disabled { + .icon-root, .svg-icon, .icon-default { + color: var(--bg-core-primary-light); + } +} + +.icon-root { + width: 1em; + height: 1em; + display: inline-block; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + flex-shrink: 0; + user-select: none; + + &:focus { + outline: none; + } + + &.svg-icon { + fill: currentColor; + } +} + +.icon-size-small { + font-size: 1.25rem; +} + +.icon-size-medium { + font-size: 1.5rem; +} + +.icon-size-large { + font-size: 2.25rem; +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/globals/_reset.scss b/src/Connected.Components/Styles/globals/_reset.scss index e3ad22f..ab7be73 100644 --- a/src/Connected.Components/Styles/globals/_reset.scss +++ b/src/Connected.Components/Styles/globals/_reset.scss @@ -1,7 +1,5 @@ /* Box sizing rules */ -*, -*::before, -*::after { +*, *::before, *::after { box-sizing: border-box; } @@ -48,7 +46,13 @@ a:not([class]) { text-decoration-skip-ink: auto; } -a, a:hover { +a { + text-decoration: none; + transition: color 0.15s ease-in-out; +} + + +a:hover { text-decoration: none; transition: color 0.15s ease-in-out; } diff --git a/src/Connected.Components/Styles/globals/_typography.scss b/src/Connected.Components/Styles/globals/_typography.scss index c58e688..68089d9 100644 --- a/src/Connected.Components/Styles/globals/_typography.scss +++ b/src/Connected.Components/Styles/globals/_typography.scss @@ -113,7 +113,7 @@ p, @each $property, $map in $fw { $prefix: map-get($map, "prefix"); - $values: map-get($map, "values"); + $values: map-get($map, "values"); @each $k, $v in $values { @if $breakName != "" { @@ -157,6 +157,27 @@ p, text-overflow: ellipsis; } +.text-hc { + color: var(--text-core-hc); +} + +.text-lc { + color: var(--text-core-lc); +} + +a.text-link{ + color: var(--bg-core-primary-dark); + border-bottom:1px dotted; + transition: all 0.15s ease-in-out; +} + +a.text-link:hover{ + color: var(--bg-core-primary-darken); + border-bottom:none; + + +} + // $fs: ( // "font-size": ( // "prefix": "fs", diff --git a/src/Connected.Components/Styles/globals/_variables.scss b/src/Connected.Components/Styles/globals/_variables.scss index 542fd2e..49b65e4 100644 --- a/src/Connected.Components/Styles/globals/_variables.scss +++ b/src/Connected.Components/Styles/globals/_variables.scss @@ -1,8 +1,8 @@ @use "sass:math"; //theme colors -$bg-core-primary: hsl(225, 68%, 85%); // body-background; -$bg-core-start: $bg-core-primary; +//$bg-core-primary: hsl(225, 68%, 85%); // body-background; +//$bg-core-start: $bg-core-primary; $bg-core-end: #fafafa; $text-core-hc: #212121; //title @@ -10,67 +10,112 @@ $text-core: #525252; //text $text-core-lc: #7d7d80; //metadata $text-core-vc: #969699; //ikona-text -$border-core: lighten($bg-core-primary, 7%); //border +//$border-core: lighten($bg-core-primary, 7%); //border $element-bg-core: rgba(255, 255, 255, 0.5); // elements-background $element-fg-core: rgba(255, 255, 255, 0.25); // elements-foreground + + + + + + :root { - --bg-core-primary: #{$bg-core-primary}; // body-background; - --bg-core-primary-lighten: hsl(225, 68%, 90%); // lighten - --bg-core-primary-darken: hsl(225, 68%, 75%); // darken; - --bg-core-start: #{$bg-core-primary}; - --bg-core-end: #{$bg-core-end}; +$blue-50: #f2f4fd; +$blue-100: #e5eafa; +$blue-200: #cbd6f5; +$blue-300: #b2c1f1; +$blue-400: #98adec; +$blue-500: #7e98e7; +$blue-600: #657ab9; +$blue-700: #4c5b8b; +$blue-800: #323d5c; +$blue-900: #191e2e; + + --bg-core-primary: #{$blue-300}; // body-background; + --bg-core-primary-light: #{$blue-50}; // light + --bg-core-primary-lighten: #{$blue-200}; // lighten + --bg-core-primary-darken: #{$blue-400}; // darken; + --bg-core-primary-dark: #{$blue-600}; // dark; + --bg-core-start: #{$blue-300}; // body-background + --bg-core-end: #{$bg-core-end}; // body-background --text-core-hc: #{$text-core-hc}; //title - --text-core: #{$text-core}; //text + --text-core: #{$blue-800}; //text --text-core-lc: #{$text-core-lc}; //metadata --text-core-vc: #{$text-core-vc}; //ikona-text - --bg-core-primary-lighter: hsl(225, 68%, 90%); //hover - --border-core: #{$border-core}; //border + --border-core-lighten:#{$blue-100}; //border-lighten + --border-core: #{$blue-200}; //border --element-bg-core: #{$element-bg-core}; // elements-background --element-fg-core: #{$element-fg-core}; // elements-foreground } -.pink, -:root:has(pink:checked) { - --bg-core-primary: hsl(310 50% 90%); - --bg-core-primary-lighten: hsl(310 50% 95%); //lighten - --bg-core-primary-darken: hsl(310 50% 85%); //darken - --element-bg-core: hsl(310 50% 100% / 50%); - --text-core: hsl(310 50% 15%); - --border-core: hsl(310 50% 90%); + +.pink { +$violet-50: #f0eef6; +$violet-100: #e1dced; +$violet-200: #c2b9db; +$violet-300: #a496c8; +$violet-400: #8573b6; +$violet-500: #6750a4; +$violet-600: #524083; +$violet-700: #3e3062; +$violet-800: #151021; +$violet-900: #212529; + + --bg-core-primary: #{$violet-300}; // body-background; + --bg-core-primary-light: #{$violet-50}; // light + --bg-core-primary-lighten: #{$violet-200}; // lighten + --bg-core-primary-darken: #{$violet-400}; // darken; + --bg-core-primary-dark: #{$violet-600}; // dark; + --bg-core-start: #{$violet-200}; // body-background + --bg-core-end: #{$bg-core-end}; // body-background + + --text-core-hc: #{$text-core-hc}; //title + --text-core: #{$violet-800}; //text + --text-core-lc: #{$text-core-lc}; //metadata + --text-core-vc: #{$text-core-vc}; //ikona-text + + --border-core-lighten:#{$violet-100}; //border-lighten + --border-core: #{$violet-200}; //border + --element-bg-core: #{$element-bg-core}; // elements-background + --element-fg-core: #{$element-fg-core}; // elements-foreground } -.dark, -:root:has(dark:checked) { + + +.dark { --bg-core-primary: hsl(0 0% 10% / 100%); // body-background; - --bg-core-primary-lighten: hsl(0 0% 15% / 100%); // lighten - --bg-core-primary-darken: hsl(0 0% 5% / 100%); // darken; - --bg-core-start: var(--bg-core-primary); - --bg-core-end: hsl(0 0% 15% / 100%); + --bg-core-primary-light: hsl(0 0% 15% / 100%); // light + --bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten + --bg-core-primary-darken: hsl(0 0% 7% / 100%); // darken; + --bg-core-primary-dark: hsl(0 0% 5% / 100%); // dark; + --bg-core-start: hsl(0 0% 10% / 100%); // body-background + --bg-core-end: hsl(0 0% 15% / 100%); // body-background --text-core-hc: hsl(0 0% 97% / 100%); //title --text-core: hsl(0 0% 73% / 100%); //text --text-core-lc: hsl(0 0% 53% / 100%); //metadata --text-core-vc: hsl(0 0% 60% / 100%); //ikona-text - --border-core: hsl(0 0% 27% / 100%); //border + --border-core-lighten:hsl(0 0% 17% / 100%); //border-lighten + --border-core: hsl(0 0% 20% / 100%); //border --element-bg-core: hsl(0 0% 13% / 100%); // elements-background - --element-fg-core: hsl(0 0% 20% / 100%); // elements-foreground + --element-fg-core: hsl(0 0% 15% / 100%); // elements-foreground } // colors -$blue: #0d6efd; -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #d63384; -$red: #dc3545; -$orange: #fd7e14; -$yellow: #ffc107; -$green: #00c851; //#198754; -$teal: #20c997; -$cyan: #0dcaf0; +// $blue: #0d6efd; +// $indigo: #6610f2; +// $purple: #6f42c1; +// $pink: #d63384; +// $red: #dc3545; +// $orange: #fd7e14; +// $yellow: #ffc107; +// $green: #00c851; //#198754; +// $teal: #20c997; +// $cyan: #0dcaf0; $white: #fff; $gray-100: #f8f9fa; @@ -84,13 +129,20 @@ $gray-800: #343a40; $gray-900: #212529; $black: #000; +$blue: #0dbcf0c4; +$red: #ff7f78; +$yellow: #ffb480; +$green: #8fcaa3; +$cyan: #729fe9; + + $primary: $blue; -$secondary: $gray-600; +$secondary: $gray-400; $success: $green; $info: $cyan; $warning: $yellow; $danger: $red; -$light: $gray-400; +$light: $gray-300; $dark: $gray-900; //color palette @@ -138,6 +190,7 @@ $font-weight-800: 800; // extra bold $base-border-radius: 0.3rem; $border-radius-sm: math.div($base-border-radius, 2); $border-radius-lg: $base-border-radius * 2; +$border-radius-pill: 100vw; // box-shadow $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default; diff --git a/src/Connected.Components/Styles/layout/_css_documentation.scss b/src/Connected.Components/Styles/layout/_css_documentation.scss index e5e9329..ec69af6 100644 --- a/src/Connected.Components/Styles/layout/_css_documentation.scss +++ b/src/Connected.Components/Styles/layout/_css_documentation.scss @@ -1,16 +1,21 @@ @use "../globals" as *; + +.color-picker-container { + margin-bottom: 1rem; +} + .color-picker > fieldset { border: 0; display: flex; - flex-direction: column; - gap: 2rem; + //flex-direction: column; + gap: 1.5rem; width: fit-content; //background: #fff; - padding: 1rem 3rem; - position: fixed; - top: 1rem; - right: 0; + padding: 0.5rem 1.5rem; + //position: fixed; + //top: 1rem; + //right: 0; border-radius: 0 0 1rem 1rem; } @@ -31,14 +36,15 @@ background-color: var(--radio-color); } -.color-picker input[type="radio"]light { +.color-picker input[type="radio"] { --radio-color: hsl(225, 68%, 85%); } -.color-picker input[type="radio"]pink { - --radio-color: pink; + +.color-picker input[type="radio"] { + --radio-color: rebeccapurple; } -.color-picker input[type="radio"]dark { +.color-picker input[type="radio"] { --radio-color: #232323; } @@ -58,8 +64,16 @@ background: var(--element-fg-core); border: 1px solid; border-color: var(--border-core); - color: inherit; + //color: inherit; border-radius: $border-radius-lg; } +.simple-grid-wraper{ + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + padding: calc($base-padding * 4); + line-height: 1.4; +} + diff --git a/src/Connected.Components/Styles/layout/_document.scss b/src/Connected.Components/Styles/layout/_document.scss index dc8e0a9..46f1dcc 100644 --- a/src/Connected.Components/Styles/layout/_document.scss +++ b/src/Connected.Components/Styles/layout/_document.scss @@ -20,6 +20,10 @@ //test-sidebar +.document-container { + background-color: var(--element-bg-core); +} + .document-container { //padding: rem(32); @@ -33,7 +37,8 @@ border-radius: $border-radius-lg; // padding: rem(32); box-shadow: $base-box-shadow; - overflow: hidden; + //overflow: hidden; + overflow-x: clip; } } \ No newline at end of file diff --git a/src/Connected.Components/Styles/util/_breakpoints.scss b/src/Connected.Components/Styles/util/_breakpoints.scss index a962b65..16e92e3 100644 --- a/src/Connected.Components/Styles/util/_breakpoints.scss +++ b/src/Connected.Components/Styles/util/_breakpoints.scss @@ -2,7 +2,8 @@ $breakpoints-up: ( - "": "", + "": "1", + //'xs': rem(1), 'sm': rem(576), 'md': rem(768), 'lg': rem(992), @@ -11,7 +12,8 @@ $breakpoints-up: ( // 639px, 1149px, 1399px $breakpoints-down: ( - "": "", + "": "0", + //'xs': rem(0), 'sm': rem(575), 'md': rem(767), 'lg': rem(991), diff --git a/src/Connected.Components/Styles/util/_colors.scss b/src/Connected.Components/Styles/util/_colors.scss index e973e63..40395f7 100644 --- a/src/Connected.Components/Styles/util/_colors.scss +++ b/src/Connected.Components/Styles/util/_colors.scss @@ -58,8 +58,7 @@ } //change --bg-core-primary for dark -.dark, -:root:has(dark:checked) { +.dark { $val: hsl(216 100% 70%); .text-core { diff --git a/src/Connected.Components/Styles/util/_functions.scss b/src/Connected.Components/Styles/util/_functions.scss index 047cb5b..063b94f 100644 --- a/src/Connected.Components/Styles/util/_functions.scss +++ b/src/Connected.Components/Styles/util/_functions.scss @@ -8,7 +8,7 @@ // change text color based on background color - set-color(color-value) @function set-color($color) { - @if (lightness($color) > 55) { + @if (lightness($color) > 74) { @return #333; } @else { diff --git a/src/Connected.Components/Styles/util/_utilities.scss b/src/Connected.Components/Styles/util/_utilities.scss index ae5f41f..aba34cb 100644 --- a/src/Connected.Components/Styles/util/_utilities.scss +++ b/src/Connected.Components/Styles/util/_utilities.scss @@ -160,6 +160,35 @@ } } + + //Position classes + $positionProps: ( + "absolute", + "fixed", + "inherit", + "initial", + "relative", + "revert", + "static", + "sticky", + "unset", + ); + + @each $pos in $positionProps { + @if $breakName != "" { + @media (min-width: $breakValue) { + .position-#{$breakName}-#{$pos} { + position: #{$pos} !important; + } + } + } @else { + .position-#{$pos} { + position: #{$pos} !important; + } + } + } + + //Display classes $displayProps: ( "block", From 9726016f2105569ea1ca515b70475fa43aa3a6c6 Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Fri, 17 Feb 2023 10:14:55 +0100 Subject: [PATCH 02/16] Add new components --- src/Connected.Components.Showcase.Runner/wwwroot/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Connected.Components.Showcase.Runner/wwwroot/index.html b/src/Connected.Components.Showcase.Runner/wwwroot/index.html index 1c123c0..3a6c8ca 100644 --- a/src/Connected.Components.Showcase.Runner/wwwroot/index.html +++ b/src/Connected.Components.Showcase.Runner/wwwroot/index.html @@ -3,6 +3,7 @@ + Connected.Components.Showcase.Runner @@ -27,4 +28,4 @@ - + \ No newline at end of file From 3a5d96fc5ef6738d2cf5297f7579c153c8586f44 Mon Sep 17 00:00:00 2001 From: markosteger Date: Fri, 17 Feb 2023 12:38:26 +0100 Subject: [PATCH 03/16] new ToggleInput, Fixed binding on Radio and CheckBox --- .../Components/CheckBox.razor | 16 ++++----- .../Components/CheckBox.razor.cs | 33 +++++++++++++++---- .../Components/CheckBoxGroup.razor | 16 +++++---- .../Components/CheckBoxGroup.razor.cs | 5 ++- .../Components/Radio.razor | 7 ++-- .../Components/Radio.razor.cs | 19 +++++++---- .../Components/RadioGroup.razor | 2 -- .../Components/RadioGroup.razor.cs | 5 ++- .../Components/ToggleInput.razor | 17 ++++++++++ .../Components/ToggleInput.razor.cs | 27 +++++++++++++++ 10 files changed, 113 insertions(+), 34 deletions(-) create mode 100644 src/Connected.Components/Components/ToggleInput.razor create mode 100644 src/Connected.Components/Components/ToggleInput.razor.cs diff --git a/src/Connected.Components/Components/CheckBox.razor b/src/Connected.Components/Components/CheckBox.razor index 899ccaf..5afe120 100644 --- a/src/Connected.Components/Components/CheckBox.razor +++ b/src/Connected.Components/Components/CheckBox.razor @@ -2,12 +2,10 @@ @inherits InputBase; -
    -@if (Checked) -{ - -} else { - -} - -
    \ No newline at end of file + + + diff --git a/src/Connected.Components/Components/CheckBox.razor.cs b/src/Connected.Components/Components/CheckBox.razor.cs index 12bd057..a9f51d3 100644 --- a/src/Connected.Components/Components/CheckBox.razor.cs +++ b/src/Connected.Components/Components/CheckBox.razor.cs @@ -2,20 +2,41 @@ using Microsoft.AspNetCore.Components; namespace Connected.Components; -public partial class CheckBox: InputBase +public partial class CheckBox : InputBase { + [CascadingParameter] + public CheckBoxGroup? ParentCheckBoxGroup { get; set; } + + private bool _checked { get; set; } + [Parameter] - public bool Checked { get; set; } = false; + public bool? Checked + { + get => _checked; + set => _checked = (bool)value; + } [Parameter, EditorRequired] public string Id { get; set; } [Parameter] - public EventCallback CheckedChange { get; set; } - public async Task OnChange(ChangeEventArgs args) + public EventCallback CheckedChanged { get; set; } + + public async Task OnChange() + { + Checked = !Checked; + CheckedChanged.InvokeAsync((bool)Checked); + } + + protected override async Task OnParametersSetAsync() { - Checked = (bool)args.Value; - CheckedChange.InvokeAsync(Checked); + await base.OnInitializedAsync(); + if (ParentCheckBoxGroup.Disabled) Disabled = true; + if (!InputAttributes.ContainsKey("disabled")) + InputAttributes.Add("disabled", Disabled); + if (!InputAttributes.ContainsKey("checked")) + InputAttributes.Add("checked", Checked); + StateHasChanged(); } } diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor b/src/Connected.Components/Components/CheckBoxGroup.razor index 68efc7c..79e7232 100644 --- a/src/Connected.Components/Components/CheckBoxGroup.razor +++ b/src/Connected.Components/Components/CheckBoxGroup.razor @@ -1,9 +1,13 @@ @using Connected.Models; -@inherits InputBase; - -
    -
    - @ChildContent + +
    + @if (!string.IsNullOrEmpty(Name)) + { +
    @Name
    + } +
    + @ChildContent +
    -
    \ No newline at end of file + \ No newline at end of file diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor.cs b/src/Connected.Components/Components/CheckBoxGroup.razor.cs index d1512cb..289ef29 100644 --- a/src/Connected.Components/Components/CheckBoxGroup.razor.cs +++ b/src/Connected.Components/Components/CheckBoxGroup.razor.cs @@ -4,7 +4,10 @@ namespace Connected.Components; public partial class CheckBoxGroup { [Parameter, EditorRequired] - public string Id { get; set; } + public string Name { get; set; } + + [Parameter] + public bool Disabled { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } diff --git a/src/Connected.Components/Components/Radio.razor b/src/Connected.Components/Components/Radio.razor index 18e385e..9c307c6 100644 --- a/src/Connected.Components/Components/Radio.razor +++ b/src/Connected.Components/Components/Radio.razor @@ -2,7 +2,8 @@ @inherits InputBase; -
    - +
    \ No newline at end of file + \ No newline at end of file diff --git a/src/Connected.Components/Components/Radio.razor.cs b/src/Connected.Components/Components/Radio.razor.cs index a86a940..0d5bfda 100644 --- a/src/Connected.Components/Components/Radio.razor.cs +++ b/src/Connected.Components/Components/Radio.razor.cs @@ -2,23 +2,30 @@ using Microsoft.AspNetCore.Components; namespace Connected.Components; -public partial class Radio: InputBase +public partial class Radio : InputBase { [CascadingParameter] public RadioGroup? ParentRadioGroup { get; set; } + private bool _checked { get; set; } + [Parameter] - public bool Checked { get; set; } = false; + public bool? Checked + { + get => _checked; + set => _checked = (bool)value; + } [Parameter, EditorRequired] public string Id { get; set; } [Parameter] - public EventCallback CheckedChange { get; set; } - public async Task OnChange(ChangeEventArgs args) + public EventCallback CheckedChanged { get; set; } + + public async Task OnChange() { - Checked = (bool)args.Value; - CheckedChange.InvokeAsync(Checked); + Checked = !Checked; + CheckedChanged.InvokeAsync((bool)Checked); } protected override async Task OnInitializedAsync() diff --git a/src/Connected.Components/Components/RadioGroup.razor b/src/Connected.Components/Components/RadioGroup.razor index b842c61..a2e30aa 100644 --- a/src/Connected.Components/Components/RadioGroup.razor +++ b/src/Connected.Components/Components/RadioGroup.razor @@ -1,7 +1,5 @@ @using Connected.Models; -@inherits InputBase; -
    @if (!string.IsNullOrEmpty(Name)) diff --git a/src/Connected.Components/Components/RadioGroup.razor.cs b/src/Connected.Components/Components/RadioGroup.razor.cs index 7b07360..2ec0b4c 100644 --- a/src/Connected.Components/Components/RadioGroup.razor.cs +++ b/src/Connected.Components/Components/RadioGroup.razor.cs @@ -6,7 +6,10 @@ public partial class RadioGroup [Parameter, EditorRequired] public string Name { get; set; } + [Parameter] + public bool Disabled { get; set; } + [Parameter] public RenderFragment ChildContent { get; set; } -} +} \ No newline at end of file diff --git a/src/Connected.Components/Components/ToggleInput.razor b/src/Connected.Components/Components/ToggleInput.razor new file mode 100644 index 0000000..9013f65 --- /dev/null +++ b/src/Connected.Components/Components/ToggleInput.razor @@ -0,0 +1,17 @@ +@using Connected.Models; + +@inherits InputBase; + + \ No newline at end of file diff --git a/src/Connected.Components/Components/ToggleInput.razor.cs b/src/Connected.Components/Components/ToggleInput.razor.cs new file mode 100644 index 0000000..6c4f60d --- /dev/null +++ b/src/Connected.Components/Components/ToggleInput.razor.cs @@ -0,0 +1,27 @@ +using Connected.Models; +using Microsoft.AspNetCore.Components; + +namespace Connected.Components; +public partial class ToggleInput: InputBase +{ + private bool _checked { get; set; } + + [Parameter] + public bool? Checked + { + get => _checked; + set => _checked= (bool)value; + } + + [Parameter, EditorRequired] + public string Id { get; set; } + + [Parameter] + public EventCallback CheckedChanged { get; set; } + + public async Task OnChange() + { + Checked = !Checked; + CheckedChanged.InvokeAsync((bool)Checked); + } +} From 8d39d47cbc372dd1ace5384330d49fa0d682ff5e Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Fri, 17 Feb 2023 12:49:00 +0100 Subject: [PATCH 04/16] Add watch to runner project --- .../Connected.Components.Showcase.Runner.csproj | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj index 1c7cf1d..015518e 100644 --- a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj +++ b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj @@ -15,4 +15,11 @@ + + + + + + + From 2d787968016cd1e640b1ba59d137d02697d574c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matija=20Ko=C5=BEelj?= Date: Fri, 17 Feb 2023 13:50:59 +0100 Subject: [PATCH 05/16] Quick review, must be completed by author --- .../Components/CheckBox.razor | 2 +- .../Components/CheckBox.razor.cs | 26 +--- .../Components/CheckBoxGroup.razor | 13 -- .../Components/CheckBoxGroup.razor.cs | 14 -- .../Components/Glyph.razor.cs | 47 +++---- .../Components/Link.razor.cs | 82 +++++------ .../Components/NumberInput.razor.cs | 132 +++++++++--------- .../Components/Radio.razor | 2 +- .../Components/Radio.razor.cs | 20 +-- .../Components/RadioGroup.razor | 19 +-- .../Components/RadioGroup.razor.cs | 4 +- .../Components/SimpleSelect.razor.cs | 19 +-- .../Components/TextInput.razor | 2 +- .../Components/TextInput.razor.cs | 65 ++++----- src/Connected.Components/Models/InputBase.cs | 28 ++-- 15 files changed, 198 insertions(+), 277 deletions(-) delete mode 100644 src/Connected.Components/Components/CheckBoxGroup.razor delete mode 100644 src/Connected.Components/Components/CheckBoxGroup.razor.cs diff --git a/src/Connected.Components/Components/CheckBox.razor b/src/Connected.Components/Components/CheckBox.razor index 5afe120..2e67d1a 100644 --- a/src/Connected.Components/Components/CheckBox.razor +++ b/src/Connected.Components/Components/CheckBox.razor @@ -3,7 +3,7 @@ @inherits InputBase; diff --git a/src/Connected.Components/Components/CheckBox.razor.cs b/src/Connected.Components/Components/CheckBox.razor.cs index a9f51d3..06ee16d 100644 --- a/src/Connected.Components/Components/CheckBox.razor.cs +++ b/src/Connected.Components/Components/CheckBox.razor.cs @@ -4,20 +4,11 @@ using Microsoft.AspNetCore.Components; namespace Connected.Components; public partial class CheckBox : InputBase { - [CascadingParameter] - public CheckBoxGroup? ParentCheckBoxGroup { get; set; } - - private bool _checked { get; set; } - [Parameter] - public bool? Checked - { - get => _checked; - set => _checked = (bool)value; - } + public bool Checked { get; set; } [Parameter, EditorRequired] - public string Id { get; set; } + public string? Id { get; set; } [Parameter] public EventCallback CheckedChanged { get; set; } @@ -25,18 +16,7 @@ public partial class CheckBox : InputBase public async Task OnChange() { Checked = !Checked; - CheckedChanged.InvokeAsync((bool)Checked); - } - protected override async Task OnParametersSetAsync() - { - await base.OnInitializedAsync(); - if (ParentCheckBoxGroup.Disabled) Disabled = true; - if (!InputAttributes.ContainsKey("disabled")) - InputAttributes.Add("disabled", Disabled); - if (!InputAttributes.ContainsKey("checked")) - InputAttributes.Add("checked", Checked); - StateHasChanged(); + await CheckedChanged.InvokeAsync(Checked); } - } diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor b/src/Connected.Components/Components/CheckBoxGroup.razor deleted file mode 100644 index 79e7232..0000000 --- a/src/Connected.Components/Components/CheckBoxGroup.razor +++ /dev/null @@ -1,13 +0,0 @@ -@using Connected.Models; - - -
    - @if (!string.IsNullOrEmpty(Name)) - { -
    @Name
    - } -
    - @ChildContent -
    -
    -     \ No newline at end of file diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor.cs b/src/Connected.Components/Components/CheckBoxGroup.razor.cs deleted file mode 100644 index 289ef29..0000000 --- a/src/Connected.Components/Components/CheckBoxGroup.razor.cs +++ /dev/null @@ -1,14 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Connected.Components; -public partial class CheckBoxGroup -{ - [Parameter, EditorRequired] - public string Name { get; set; } - - [Parameter] - public bool Disabled { get; set; } - - [Parameter] - public RenderFragment ChildContent { get; set; } -} diff --git a/src/Connected.Components/Components/Glyph.razor.cs b/src/Connected.Components/Components/Glyph.razor.cs index 62d88d3..3dfe54e 100644 --- a/src/Connected.Components/Components/Glyph.razor.cs +++ b/src/Connected.Components/Components/Glyph.razor.cs @@ -4,26 +4,26 @@ using Microsoft.AspNetCore.Components.Web; namespace Connected.Components { - public partial class Glyph - { - [Parameter] - public string SVG { get; set; } = string.Empty; + public partial class Glyph + { + [Parameter] + public string SVG { get; set; } = string.Empty; - [Parameter] - public string Color { get; set; } = "#000000"; + [Parameter] + public string Color { get; set; } = "#000000"; - [Parameter] - public int Width { get; set; } = 24; - [Parameter] - public int Height { get; set; } = 24; + [Parameter] + public int Width { get; set; } = 24; + [Parameter] + public int Height { get; set; } = 24; - private string WidthString + private string WidthString + { + get { - get - { - return Width.ToString() + "px"; - } + return Width.ToString() + "px"; } + } private string HeightString { @@ -34,17 +34,17 @@ namespace Connected.Components } [Parameter] - public string Class { get; set; } = string.Empty; + public string Class { get; set; } = string.Empty; - private string GlyphClassList + private string GlyphClassList + { + get { - get - { - return new CssBuilder() - .AddClass(Class) - .Build(); - } + return new CssBuilder() + .AddClass(Class) + .Build(); } + } [Parameter] /// @@ -54,7 +54,6 @@ namespace Connected.Components protected async Task OnClick(MouseEventArgs e) { await Click.InvokeAsync(e); - } } } \ No newline at end of file diff --git a/src/Connected.Components/Components/Link.razor.cs b/src/Connected.Components/Components/Link.razor.cs index d9562e1..7087d4f 100644 --- a/src/Connected.Components/Components/Link.razor.cs +++ b/src/Connected.Components/Components/Link.razor.cs @@ -4,46 +4,48 @@ using Microsoft.AspNetCore.Components; namespace Connected.Components; public partial class Link { - [Parameter, EditorRequired] - public string Url { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Text { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Target { get; set; } = "_self"; - - [Parameter] - public string Class { get; set; } = string.Empty; - - private string LinkClassList - { - get - { - return new CssBuilder() - .AddClass(Class) - .Build(); - } - } - - [Parameter] - public string Style { get; set; } = string.Empty; - - private string LinkStyleList - { - get - { - return new StyleBuilder() - .AddStyle(Style) - .Build(); - } - } - - protected override async Task OnParametersSetAsync() - { - if (string.IsNullOrEmpty(Text)) Text = Url; - await base.OnParametersSetAsync(); - } + [Parameter, EditorRequired] + public string Url { get; set; } = string.Empty; + + [Parameter, EditorRequired] + public string Text { get; set; } = string.Empty; + + [Parameter, EditorRequired] + public string Target { get; set; } = "_self"; + + [Parameter] + public string Class { get; set; } = string.Empty; + + private string LinkClassList + { + get + { + return new CssBuilder() + .AddClass(Class) + .Build(); + } + } + + [Parameter] + public string Style { get; set; } = string.Empty; + + private string LinkStyleList + { + get + { + return new StyleBuilder() + .AddStyle(Style) + .Build(); + } + } + + protected override async Task OnParametersSetAsync() + { + if (string.IsNullOrEmpty(Text)) + Text = Url; + + await base.OnParametersSetAsync(); + } } diff --git a/src/Connected.Components/Components/NumberInput.razor.cs b/src/Connected.Components/Components/NumberInput.razor.cs index 17f6a14..ddfecbc 100644 --- a/src/Connected.Components/Components/NumberInput.razor.cs +++ b/src/Connected.Components/Components/NumberInput.razor.cs @@ -5,45 +5,36 @@ using Microsoft.AspNetCore.Components.Web; using System.Numerics; namespace Connected.Components; -public partial class NumberInput:InputBase where NumberType : INumber +public partial class NumberInput : InputBase where NumberType : INumber { - - private double _step =1; [Parameter] - public double Step { - get - { - return _step; - } - set - { - _step=value; - } - } + public double Step { get; set; } = 1; [Parameter] - public bool DisableMouseWheel - { - get; - set; - } = false; + public bool DisableMouseWheel { get; set; } = false; private async Task StepUp() { try { - double num = (double)Convert.ChangeType(Value, typeof(double)); - num += _step; + var num = (double)Convert.ChangeType(Value, typeof(double)); + + num += Step; + if (DecimalPlaces > 0) num = Math.Round(num, DecimalPlaces); + Value = (NumberType)Convert.ChangeType(num, typeof(NumberType)); - if (IsError) ErrorText = string.Empty; + + if (IsError) + ErrorText = string.Empty; } catch { ErrorText = "Error with step up!"; - Value = default(NumberType); + Value = default; } + await ValueChanged.InvokeAsync(Value); } @@ -51,96 +42,101 @@ public partial class NumberInput:InputBase where NumberType : INumbe { try { - double num = (double)Convert.ChangeType(Value, typeof(double)); - - num -= _step; + var num = (double)Convert.ChangeType(Value, typeof(double)); + + num -= Step; + if (DecimalPlaces > 0) num = Math.Round(num, DecimalPlaces); + Value = (NumberType)Convert.ChangeType(num, typeof(NumberType)); - if (IsError) ErrorText = string.Empty; - } catch + + if (IsError) + ErrorText = string.Empty; + } + catch { ErrorText = "Error with step down!"; - Value = default(NumberType); + Value = default; } + await ValueChanged.InvokeAsync(Value); } protected async Task OnMouseWheel(WheelEventArgs args) { - if (DisableMouseWheel == false) + if (DisableMouseWheel) + return; + + if (args.ShiftKey || Disabled || Readonly) + return; + + if (args.DeltaY >= 0) { - if (args.ShiftKey || Disabled || Readonly) - return; - if (args.DeltaY >= 0) - { - await StepDown(); - } - else - { - await StepUp(); - } - } else + await StepDown(); + } + else { - return; + await StepUp(); } } - private string _value; + private string? _value; [Parameter] public NumberType? Value { get { - if (string.IsNullOrEmpty(_value)) return default(NumberType); + if (string.IsNullOrEmpty(_value)) + return default; + return (NumberType)Convert.ChangeType(_value, typeof(NumberType)); } set { - _value = value.ToString(); + _value = value?.ToString(); } } [Parameter] - public int DecimalPlaces { get; set; } =0; + public int DecimalPlaces { get; set; } = 0; [Parameter] - public EventCallback ValueChanged { get; set; } + public EventCallback ValueChanged { get; set; } public async Task GetValueAsync(ChangeEventArgs args) - { + { if (args.Value is not null) { - string newVal = args.Value.ToString(); + var newVal = args.Value.ToString()!; + if (!newVal.Equals("0")) { if (newVal.ToString().Contains("-")) newVal = "-" + newVal.ToString().Replace("-", ""); + if (newVal.ToString().ToLower().Contains("e")) newVal = "e" + newVal.ToString().Replace("e", ""); } + if (string.IsNullOrEmpty(newVal)) - { - await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType((NumberType)Convert.ChangeType(null, typeof(NumberType)), typeof(NumberType))); - } - else - { - if (!newVal.Equals(_value)) - await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType((NumberType)Convert.ChangeType(newVal, typeof(NumberType)), typeof(NumberType))); - } + await ValueChanged.InvokeAsync(default); + + if (!newVal.Equals(_value)) + await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(newVal, typeof(NumberType))); } } public async Task Change(ChangeEventArgs args) { if (args.Value is not null) - { Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(args.Value, typeof(NumberType))); - } - ValueChanged.InvokeAsync(Value); + + await ValueChanged.InvokeAsync(Value); } - [Parameter] public EventCallback OnKeyDown { get; set; } + [Parameter] + public EventCallback OnKeyDown { get; set; } private bool CheckKey(string key) { @@ -159,7 +155,7 @@ public partial class NumberInput:InputBase where NumberType : INumbe break; } default: - { + { result = false; break; } @@ -172,17 +168,19 @@ public partial class NumberInput:InputBase where NumberType : INumbe private bool _preventDefaultAction = true; public async Task ChangeValue(KeyboardEventArgs args) { - _preventDefaultAction= true; + _preventDefaultAction = true; if (args is not null) { var key = args.Key.ToString().ToLower(); + if (CheckKey(key)) { _preventDefaultAction = false; await OnKeyDown.InvokeAsync(args); } - } else + } + else { args.Key = null; } @@ -222,11 +220,13 @@ public partial class NumberInput:InputBase where NumberType : INumbe { if (typeof(NumberType).Name.ToLower().Contains("int")) { - if (Step - (int)Step > 0) Step = (int)Step; - if (Step < 1) Step = 1; + if (Step - (int)Step > 0) + Step = (int)Step; + if (Step < 1) + Step = 1; } await base.OnParametersSetAsync(); - } + } protected override async Task OnInitializedAsync() { diff --git a/src/Connected.Components/Components/Radio.razor b/src/Connected.Components/Components/Radio.razor index 9c307c6..526e965 100644 --- a/src/Connected.Components/Components/Radio.razor +++ b/src/Connected.Components/Components/Radio.razor @@ -3,7 +3,7 @@ @inherits InputBase; \ No newline at end of file diff --git a/src/Connected.Components/Components/Radio.razor.cs b/src/Connected.Components/Components/Radio.razor.cs index 0d5bfda..ca4dc90 100644 --- a/src/Connected.Components/Components/Radio.razor.cs +++ b/src/Connected.Components/Components/Radio.razor.cs @@ -7,17 +7,11 @@ public partial class Radio : InputBase [CascadingParameter] public RadioGroup? ParentRadioGroup { get; set; } - private bool _checked { get; set; } - [Parameter] - public bool? Checked - { - get => _checked; - set => _checked = (bool)value; - } + public bool Checked { get; set; } [Parameter, EditorRequired] - public string Id { get; set; } + public string? Id { get; set; } [Parameter] public EventCallback CheckedChanged { get; set; } @@ -25,14 +19,6 @@ public partial class Radio : InputBase public async Task OnChange() { Checked = !Checked; - CheckedChanged.InvokeAsync((bool)Checked); - } - - protected override async Task OnInitializedAsync() - { - await base.OnInitializedAsync(); - if (ParentRadioGroup.Disabled) Disabled = true; - if (!InputAttributes.ContainsKey("disabled")) - InputAttributes.Add("disabled", Disabled); + await CheckedChanged.InvokeAsync(Checked); } } diff --git a/src/Connected.Components/Components/RadioGroup.razor b/src/Connected.Components/Components/RadioGroup.razor index a2e30aa..2a159e3 100644 --- a/src/Connected.Components/Components/RadioGroup.razor +++ b/src/Connected.Components/Components/RadioGroup.razor @@ -1,13 +1,14 @@ @using Connected.Models; -
    - @if (!string.IsNullOrEmpty(Name)) - { -
    @Name
    - } -
    - @ChildContent -
    -
    +
    + @if (!string.IsNullOrEmpty(Name)) + { +
    @Name
    + } + +
    + @ChildContent +
    +
    \ No newline at end of file diff --git a/src/Connected.Components/Components/RadioGroup.razor.cs b/src/Connected.Components/Components/RadioGroup.razor.cs index 2ec0b4c..12b8005 100644 --- a/src/Connected.Components/Components/RadioGroup.razor.cs +++ b/src/Connected.Components/Components/RadioGroup.razor.cs @@ -4,12 +4,12 @@ namespace Connected.Components; public partial class RadioGroup { [Parameter, EditorRequired] - public string Name { get; set; } + public string? Name { get; set; } [Parameter] public bool Disabled { get; set; } [Parameter] - public RenderFragment ChildContent { get; set; } + public RenderFragment? ChildContent { get; set; } } \ No newline at end of file diff --git a/src/Connected.Components/Components/SimpleSelect.razor.cs b/src/Connected.Components/Components/SimpleSelect.razor.cs index 456a06b..97d4109 100644 --- a/src/Connected.Components/Components/SimpleSelect.razor.cs +++ b/src/Connected.Components/Components/SimpleSelect.razor.cs @@ -1,5 +1,6 @@ using Connected.Models; using Microsoft.AspNetCore.Components; +using System.Collections.ObjectModel; namespace Connected.Components; public partial class SimpleSelect : InputBase @@ -10,7 +11,7 @@ public partial class SimpleSelect : InputBase [Parameter] public IEnumerable Items { get; set; } - public IEnumerable OriginalItems { get; set; } + public ObservableCollection OriginalItems { get; set; } [Parameter] public bool EnableSearch { get; set; } = true; @@ -59,18 +60,20 @@ public partial class SimpleSelect : InputBase protected override async Task OnParametersSetAsync() { - - OriginalItems = Items; - if (_searchText.Length>0) FilterItems(); + + OriginalItems = new ObservableCollection(Items); + + if (_searchText.Length > 0) + FilterItems(); + await base.OnParametersSetAsync(); } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); - if (Required) - { - if (InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true); - } + + if (Required && InputAttributes.ContainsKey("required")) + InputAttributes.Add("required", true); } } \ No newline at end of file diff --git a/src/Connected.Components/Components/TextInput.razor b/src/Connected.Components/Components/TextInput.razor index cf84831..1750968 100644 --- a/src/Connected.Components/Components/TextInput.razor +++ b/src/Connected.Components/Components/TextInput.razor @@ -5,7 +5,7 @@
    @if (NumOfRows==1) { - IsPassword ? "password" : "text"; - [Parameter] - public EventCallback ValueChanged { get; set; } + [Parameter] + public EventCallback ValueChanged { get; set; } - private async Task ChangeValueAsync(ChangeEventArgs args) - { - await ValueChanged.InvokeAsync(args.Value.ToString()); - } + private async Task ChangeValueAsync(ChangeEventArgs args) + { + await ValueChanged.InvokeAsync(args?.Value?.ToString()); + } private async Task Clear() { await ValueChanged.InvokeAsync(string.Empty); - } protected override async Task OnInitializedAsync() - { + { await base.OnInitializedAsync(); - if (Required) - { - if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true); - } - } + if (Required && !InputAttributes.ContainsKey("required")) + InputAttributes.Add("required", true); + } } \ No newline at end of file diff --git a/src/Connected.Components/Models/InputBase.cs b/src/Connected.Components/Models/InputBase.cs index f6bda7a..abfd7b7 100644 --- a/src/Connected.Components/Models/InputBase.cs +++ b/src/Connected.Components/Models/InputBase.cs @@ -30,7 +30,7 @@ public class InputBase : ComponentBase [Parameter] public bool Required { get; set; } = false; - public Dictionary InputAttributes { get; set; } + public Dictionary InputAttributes { get; set; } = new(); /// /// Show clear button. @@ -50,18 +50,11 @@ public class InputBase : ComponentBase [Parameter] public bool ShowCharacterCounter { get; set; } - private string _errorText = string.Empty; + /// + /// + /// [Parameter] - public string ErrorText { - get - { - return _errorText; - } - set - { - _errorText = value; - } - } + public string ErrorText { get; set; } = string.Empty; public bool IsError { @@ -79,15 +72,16 @@ public class InputBase : ComponentBase protected virtual async Task SetTextAsync(string text) { - if (Text != text) - { - Text = text; - await TextChanged.InvokeAsync(text); - } + if (Text == text) + return; + + Text = text; + await TextChanged.InvokeAsync(text); } private string _helperText = string.Empty; + [Parameter] public string HelperText { From 60f1a90784e086355735180bb273d543c21058f9 Mon Sep 17 00:00:00 2001 From: markosteger Date: Tue, 21 Feb 2023 15:04:45 +0100 Subject: [PATCH 06/16] Code style fixes - added regions, summary, comments. --- .../Components/Button.razor | 20 +-- .../Components/Button.razor.cs | 23 +++- .../Components/CheckBox.razor | 18 ++- .../Components/CheckBox.razor.cs | 82 +++++++++++- .../Components/Glyph.razor | 4 +- .../Components/Glyph.razor.cs | 111 ++++++++++------ .../Components/Link.razor | 9 +- .../Components/Link.razor.cs | 47 ++++++- .../Components/MultilineInput.razor | 45 +++++++ .../Components/MultilineInput.razor.cs | 119 +++++++++++++++++ .../Components/NumberInput.razor | 11 +- .../Components/NumberInput.razor.cs | 118 ++++++++++++----- .../Components/Radio.razor | 18 ++- .../Components/Radio.razor.cs | 41 +++++- .../Components/RadioGroup.razor | 1 - .../Components/RadioGroup.razor.cs | 23 +++- .../Components/SimpleSelect.razor | 41 +++--- .../Components/SimpleSelect.razor.cs | 122 ++++++++++++++---- .../Components/TextInput.razor | 25 +--- .../Components/TextInput.razor.cs | 42 ++++-- .../Components/ToggleInput.razor.cs | 2 +- src/Connected.Components/Enums/Target.cs | 18 +++ src/Connected.Components/Models/InputBase.cs | 10 +- src/Connected.Components/Navigation.cs | 15 +-- src/Connected.Components/Utilities/Helper.cs | 16 ++- 25 files changed, 773 insertions(+), 208 deletions(-) create mode 100644 src/Connected.Components/Components/MultilineInput.razor create mode 100644 src/Connected.Components/Components/MultilineInput.razor.cs create mode 100644 src/Connected.Components/Enums/Target.cs diff --git a/src/Connected.Components/Components/Button.razor b/src/Connected.Components/Components/Button.razor index 0bbb79b..fe19baf 100644 --- a/src/Connected.Components/Components/Button.razor +++ b/src/Connected.Components/Components/Button.razor @@ -1,10 +1,9 @@ - + +
    + + + + + +
    + +

    Grid

    +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    +
    6
    +
    7
    +
    8
    +
    9
    +
    10
    +
    11
    +
    12
    +
    + + + + +
    +
    +

    Data Grid

    +

    Data grid DENSE + COLLAPSE + SELECT

    + + +
    +
    + +
    +
    +
    +
    Chip label text
    +
    +
    +
    + +
    +
    +
    +
    Chip label text
    +
    +
    +
    + + +
    +
    +
    +
    Chip label text
    +
    +
    +
    + + +
    +
    +
    +
    Chip label text
    +
    +
    +
    + +
    +
    +
    +
    + + + + +
    Header
    @@ -768,100 +883,179 @@
    -
    -
    - - -
    Some helping Text
    -
    At least 6 characters required
    - - - - - - - - - -
    - - -
    -
    - - +
    - - - - +
    -
    -

    Grid

    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    -
    6
    -
    7
    -
    8
    -
    9
    -
    10
    -
    11
    -
    12
    +
    + +
    + +
    + @* *@ + +
    +
    +
    +
    +
    Product 1
    + 0023 001445669 1 +
    Product serial code
    +
    +
    + +
    Material 29
    +
    +
    + +
    77,29
    +
    +
    + +
    +
    + +
    +
    +
    +
    +

    Form wizard

    +
    +
    +
    +
    Description for step 1
    + @*
    +
    +
    +
    +
    +
    +
    +
    *@ + +
    + + +
    Some helping Text
    +
    At least 6 characters required
    + + + + + + + + + + +
    -
      -
    • -
      -
      Product 1
      - 0023 001445669 1 -
      Product serial code
      -
      -
      -
      77,29
      -
      +
      + + +
      Some helping Text
      +
      At least 6 characters required
      + + + + + + + + + + +
      +
    +
    + -
    -
    - You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected +
    +
    2
    - -
  • -
    -
    Product 2
    - 0023 001445669 2 -
    You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
    -
    -
    -
    727,29
    + +
    + +
    + + +
    +
    -
    • - + +
    +
    +
    +
    +
    +
    + + +
    + + +
    - +
    + @code { private string sidebarClosed { get; set; } = "close"; @@ -987,11 +1182,11 @@ private string sidebarRightClosed { get; set; } = "close-r"; - private void ToggleSidebarRight() + private void ToggleSidebarRight() { sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; } - + private string NavClosed { get; set; } = ""; @@ -1001,4 +1196,23 @@ NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } -} \ No newline at end of file + + private string NextSlide { get; set; } = ""; + + private void ToggleNextSlide() + { + NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : ""; + } + + + private string PreviousSlide { get; set; } = ""; + + private void TogglePreviousSlide() + { + PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : ""; + } +} + + + + diff --git a/src/Connected.Components/Components/Link.razor b/src/Connected.Components/Components/Link.razor deleted file mode 100644 index deea63d..0000000 --- a/src/Connected.Components/Components/Link.razor +++ /dev/null @@ -1,7 +0,0 @@ - - @Text - diff --git a/src/Connected.Components/Components/Link.razor.cs b/src/Connected.Components/Components/Link.razor.cs deleted file mode 100644 index d9562e1..0000000 --- a/src/Connected.Components/Components/Link.razor.cs +++ /dev/null @@ -1,49 +0,0 @@ -using Connected.Utilities; -using Microsoft.AspNetCore.Components; - -namespace Connected.Components; -public partial class Link -{ - [Parameter, EditorRequired] - public string Url { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Text { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Target { get; set; } = "_self"; - - [Parameter] - public string Class { get; set; } = string.Empty; - - private string LinkClassList - { - get - { - return new CssBuilder() - .AddClass(Class) - .Build(); - } - } - - [Parameter] - public string Style { get; set; } = string.Empty; - - private string LinkStyleList - { - get - { - return new StyleBuilder() - .AddStyle(Style) - .Build(); - } - } - - protected override async Task OnParametersSetAsync() - { - if (string.IsNullOrEmpty(Text)) Text = Url; - await base.OnParametersSetAsync(); - } -} - - diff --git a/src/Connected.Components/Styles/components/_chip.scss b/src/Connected.Components/Styles/components/_chip.scss new file mode 100644 index 0000000..5e8bc05 --- /dev/null +++ b/src/Connected.Components/Styles/components/_chip.scss @@ -0,0 +1,218 @@ +@use "../util" as *; +@use "../globals" as *; + +/*CHIP*/ +/* scroll container */ +.horizontal-scroll-container { + display: flex; + position: relative; + flex-wrap: nowrap; + gap: .5rem; + overflow: auto; + scroll-snap-type: both mandatory; + } + + /* Hide scrollbar for Chrome, Safari and Opera */ + .horizontal-scroll-container::-webkit-scrollbar { + display: none; + } + /* Hide scrollbar for IE, Edge and Firefox */ + .horizontal-scroll-container { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + + + + .chip-icon { + --height: 2.5rem; + height: var(--height); + aspect-ratio: 1 / 1; + display: flex; + flex: 1 0 auto; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: var(--bg-core-primary-darken); + overflow: hidden; + cursor: pointer; + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .chip-icon:hover, + .chip-icon:active, + .chip-icon:active { + background-color: var(--bg-core-primary-dark); + + } + +.chip-icon.float-left { + float: left; + margin: .05rem .5rem .15rem 0; + margin-top: -.25rem; + clear: both; + } + + .chip-group { + --height: 1.5rem; + + border: 1px solid var(--bg-core-primary); + padding: .15rem; + min-width: max-content; + color: var(--text-core); + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary-light); + display: inline-block; + position:relative; + scroll-snap-align: start; + } + + .chip-group-content{ + height: var(--height); + display: flex; + align-items: center; + justify-content: center; + } + + .chip-leading-icon { + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary-light); + height: var(--height); + aspect-ratio: 1 / 1; + overflow: hidden; + } + + .chip-leading-icon img{ + object-fit: cover; + height: var(--height); + aspect-ratio: 1 / 1; + } + + .chip-cta-icon{ + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: transparent; + cursor: pointer; + height: var(--height); + aspect-ratio: 1 / 1; + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .chip-label{ + font-size: $font-size-sm; + margin:0 .85rem; + } + + .chip-cta-icon:hover{ + background-color: var(--bg-core-primary-lighten); + } + + + /*filter*/ + .chip-group.filter { + border: 1px solid var(--bg-core-primary); + background-color: var(--bg-core-primary-light); + cursor: pointer; + overflow: hidden; + &:hover{ + background-color: var(--bg-core-primary-lighten); + } + &:active, + &.active{ + border: 1px solid var(--bg-core-primary); + background-color: var(--bg-core-primary); + } + } + + .chip-group.filter .chip-leading-icon{ + //display: none; + max-width: 0; + transform: translateX(calc(var(--height) * -1.25)); + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .chip-group.filter.active .chip-leading-icon{ + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary-light); + height: var(--height); + aspect-ratio: 1 / 1; + transform: translateX(0); + max-width: var(--height); + } + + .chip-group.select .chip-cta-icon{ + display: none; + } + /*end select*/ + + /*drop-down*/ + /* The container must be positioned relative: */ + .custom-select { + position: relative; + font-family: Arial; + } + + .custom-select select { + display: none; /*hide original SELECT element: */ + } + + .select-selected { + background-color: DodgerBlue; + } + + /* Style the arrow inside the select element: */ + .select-selected:after { + position: absolute; + content: ""; + top: 14px; + right: 10px; + width: 0; + height: 0; + border: 6px solid transparent; + border-color: #fff transparent transparent transparent; + } + + /* Point the arrow upwards when the select box is open (active): */ + .select-selected.select-arrow-active:after { + border-color: transparent transparent #fff transparent; + top: 7px; + } + + /* style the items (options), including the selected item: */ + .select-items div,.select-selected { + color: #ffffff; + padding: 8px 16px; + border: 1px solid transparent; + border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; + cursor: pointer; + } + + /* Style items (options): */ + .select-items { + position: absolute; + background-color: DodgerBlue; + top: 100%; + left: 0; + right: 0; + z-index: 99; + } + + /* Hide the items when the select box is closed: */ + .select-hide { + display: none; + } + + .select-items div:hover, .same-as-selected { + background-color: rgba(0, 0, 0, 0.1); + } + /*end-down*/ + + /*END CHIP*/ \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_grid.scss b/src/Connected.Components/Styles/components/_grid.scss index 0bfe0d7..fcf8d49 100644 --- a/src/Connected.Components/Styles/components/_grid.scss +++ b/src/Connected.Components/Styles/components/_grid.scss @@ -105,7 +105,7 @@ $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"); } } -/*grid-css*/ +/*DATA GRID*/ $columns: 12; @mixin create-selectors($breakpoint: null) { @@ -128,11 +128,10 @@ $columns: 12; } } - - -.row { +.row{ display: grid; grid-template-columns: repeat($columns, 1fr); + position: relative; } @include create-selectors; @@ -143,20 +142,212 @@ $columns: 12; } } -.collapse{ + + +.data-grid-row-content{ + display: grid; + grid-template-columns: auto 1fr auto; +} + +.data-grid:not(.data-grid.dense) .data-grid-row-content { + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + padding: 1rem 1.25rem; + margin-bottom: 1rem; + position: relative; + overflow: hidden; + &:last-child{ + margin-bottom: 0; + } +} + +/*ACTIVE*/ +.data-grid:not(.data-grid.dense) .data-grid-row-content:before { + content: ""; + position: absolute; + width: 0; + inset:0; + background: var(--bg-core-primary-lighten); + transition: width 300ms ease-in-out; +} + +.data-grid:not(.data-grid.dense) .data-grid-row-content.active:before { + width: calc(100% + 1.25rem * 2); +} +/*END ACTIVE*/ + +.data-grid.dense { + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + padding: 1rem 1.25rem; + margin-bottom: 1rem; + overflow: hidden; + &:last-child{ + margin-bottom: 0; + } +} + +/*DENSE*/ +.data-grid.dense .data-grid-row-content { + border-bottom: 1px solid var(--border-core); + padding-bottom: .5rem; + margin-bottom: .5rem; + position: relative; + &:last-child{ + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0 + } +} +/*END DENSE*/ + +/*DENSE ACTIVE*/ +.data-grid.dense .data-grid-row-content:before { + content: ""; + position: absolute; + width: 0; + inset: -.55rem -1.25rem -1px; + background: var(--bg-core-primary-lighten); + transition: width 300ms ease-in-out; +} + +.data-grid.dense .data-grid-row-content.active:before { + width: calc(100% + 1.25rem * 2); +} + +.data-grid.dense .data-grid-row-content:first-child:before { + top: -1rem; + bottom: -1px; +} + +.data-grid.dense .data-grid-row-content:last-child:before { + top: -10px; + bottom: -1rem; +} + +.data-grid.dense .data-grid-row-content:only-child:before { + inset: -1rem -1.25rem ; +} +/*END DENSE ACTIVE*/ + +.data-grid.select .data-grid-select { + display: block; + margin-top: .5rem; + margin-right: .5rem; +} + +.data-grid .data-grid-select, +.data-grid .data-grid-collapse-cta{ + display: none; +} + +.data-grid label { + font-size: $font-size-sm; + color: $text-core-lc; +} + +/*COLLAPSE*/ +.data-grid.collapse .data-grid-collapse-cta { + display: block; + margin-top: .5rem; + margin-left: .5rem; + cursor: pointer; +} + +.collapsed{ max-height: 0; overflow: hidden; - padding-top: 0; - padding-bottom: 0; + padding-top: 0!important; + padding-bottom: 0!important; + border-top: 0px solid transparent; //opacity: 0; transition: all 0.5s ease-out; } -.collapse.show{ +.collapsed.show { max-height: 25vh; overflow: auto; padding-top: initial; padding-bottom: initial; + border-top: 1px solid var(--bg-core-primary-light); //opacity: 1; transition: all 0.5s ease-in; -} \ No newline at end of file +} + +.data-grid .data-grid-collapse-cta i { + transform: rotate(0); + transition: all 0.5s ease-in; +} +.data-grid.show .data-grid-collapse-cta i { + transform: rotate(180deg); +} + + +/*form-wizard*/ + +.form-wizard { + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: 0.6rem; + padding: 1rem 1.25rem; + position: relative; + +} + +.form-outer { +display: flex; +flex-wrap: nowrap; +overflow: hidden; +} + +.form-step { + width: 100%; + flex: 1 0 auto; + transition: all 0.5s ease-out; + transform: translateX(0); + } + + .form-step.next{ + transform: translateX(-100%); + } + + .form-step.previous{ + transform: translateX(100%); + } + + +.dots { + --width: .75rem; + --height: var(--width); + + position: absolute; + bottom: calc(var(--width) / -2); + left: 50%; + transform: translateX(-50%); + + + .dot { + width: var(--width); + height: var(--height); + border-radius: 50%; + background-color: var(--bg-core-primary-lighten); + display: inline-block; + outline: 1px solid #fff; + transition: all 300ms ease-in-out; + } + + .dot.active, + .dot.next { + background-color: var(--bg-core-primary); + outline: 2px solid var(--bg-core-primary); + outline-offset: 2px; + } + + .dot.completed { + background-color: $success; + } +} + +/*end form-wizard*/ \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_index.scss b/src/Connected.Components/Styles/components/_index.scss index fa4868c..4871f72 100644 --- a/src/Connected.Components/Styles/components/_index.scss +++ b/src/Connected.Components/Styles/components/_index.scss @@ -4,4 +4,6 @@ @forward "radio"; @forward "inputs"; @forward "checkbox"; -@forward "toggle"; \ No newline at end of file +@forward "toggle"; +@forward "chip"; +@forward "modal"; \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_modal.scss b/src/Connected.Components/Styles/components/_modal.scss new file mode 100644 index 0000000..9dc789c --- /dev/null +++ b/src/Connected.Components/Styles/components/_modal.scss @@ -0,0 +1,229 @@ +@use "../util" as *; +@use "../globals" as *; + +// stylelint-disable function-disallowed-list + +// .modal-open - body class for killing the scroll +.scroll-disabled{ + overflow: hidden; + padding-right: 0; + } +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and stuff + + +// Container that the modal scrolls within + + +.modal { + --modal-zindex: #{$modal-zindex}; + --modal-width: 60vw; + --modal-height: 50vh; + --modal-padding: 1.5rem; + --modal-margin: 1.5rem; + --modal-color: var(--text-core); + --modal-bg: var(--bg-core-primary-light); + --modal-border-color: var(--bg-core-primary-light); + --modal-border-width: 1px; + --modal-border-radius: 1rem; + --modal-box-shadow: 0 0.5rem 1rem rgba(var(--bg-core-primary), 0.15); + + --modal-header-padding-x: 1.5rem; //close button + --modal-header-padding-y: 1.5rem; //close button + --modal-header-bg: var(--modal-bg); + --modal-header-padding: 1.5rem; + --modal-header-border-color: var(--bg-core-primary-light); + --modal-header-border-width: 1px; + + --modal-footer-bg: var(--modal-bg); + --modal-footer-padding: 1.5rem; + --modal-footer-border-color: var(--bg-core-primary-light); + --modal-footer-border-width: 1px; + + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,.65); + z-index: var(--modal-zindex); + display: none; + opacity: 0; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + transition: opacity .15s linear; + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a + // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 + // See also https://github.com/twbs/bootstrap/issues/17695 + } + + + + // When fading in the modal, animate it to slide down + .modal.fade { + opacity: 1; + transition: opacity .15s linear; + } + .modal.show{ + display: block; + + } + + // When trying to close, animate focus to scale + .modal.modal-static { + transform:scale(1.1); + } + + + // Shell div to position the modal with bottom padding + .modal-dialog { + position: relative; + width: auto; + margin: var(--modal-margin); + // allow clicks to pass through for custom click handling to close modal + pointer-events: none; + } + + .modal-dialog-scrollable { + height: calc(100% - var(--modal-margin) * 2); + + + .modal-content { + max-height: 100%; + overflow: hidden; + } + + .modal-body { + overflow-y: auto; + } + } + + .modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - var(--modal-margin) * 2); + + } + + // Actual modal + .modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` + // counteract the pointer-events: none; in the .modal-dialog + color: var(--modal-color); + pointer-events: auto; + background-color: var(--modal-bg); + background-clip: padding-box; + border: var(--modal-border-width) solid var(--modal-border-color); + border-radius: var(--modal-border-radius); + box-shadow: var(--modal-box-shadow); + // Remove focus outline from opened modal + outline: 0; + } + + + + // Modal header + // Top section of the modal w/ title and dismiss + .modal-header { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends + padding: var(--modal-header-padding); + background-color: var(--modal-header-bg); + border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color); + + + .btn-close { + padding: calc(var(--modal-header-padding-y) * .5) calc(var(--modal-header-padding-x) * .5); + margin: calc(-.5 * var(--modal-header-padding-y)) calc(-.5 * var(--modal-header-padding-x)) calc(-.5 * var(--modal-header-padding-y)) auto; + } + } + + // Title text within header + .modal-title { + margin-bottom: 0; + + } + + // Modal body + // Where all modal content resides (sibling of .modal-header and .modal-footer) + .modal-body { + position: relative; + // Enable `flex-grow: 1` so that the body take up as much space as possible + // when there should be a fixed height on `.modal-dialog`. + flex: 1 1 auto; + padding: var(--modal-padding); + } + + // Footer (for actions) + .modal-footer { + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + align-items: center; // vertically center + justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items + padding: var(--modal-footer-padding); + background-color: var(--modal-footer-bg); + border-radius: var(--modal-border-radius); + gap: .5rem; + +} + // Automatically set modal's width for larger viewports + + + + .modal-dialog { + max-width: 100%; + max-height: 100%; + padding: 0; + + + @include breakpoint(sm) { + max-width: 75vw; + margin-right: auto; + margin-left: auto; + padding: var(--modal-padding); + + } + + @include breakpoint(lg) { + max-width: var(--modal-width); + margin-right: auto; + margin-left: auto; + } + } + + + // // Modal background + // .modal-backdrop { + // opacity: 0; + // display: none; + // position: fixed; + // top: 0; + // left: 0; + // z-index: #{$backdrop-zindex}; + // width: 100vw; + // height: 100vh; + // background-color: #000; + // transition: opacity .15s linear; + // } + + // .modal-backdrop.fade { + // opacity: .5; + // transition: opacity .15s linear; + // } + + // .modal-backdrop.show { + // display: block; + // } + diff --git a/src/Connected.Components/Styles/components/_sidebar.scss b/src/Connected.Components/Styles/components/_sidebar.scss index 44d3d65..26465e9 100644 --- a/src/Connected.Components/Styles/components/_sidebar.scss +++ b/src/Connected.Components/Styles/components/_sidebar.scss @@ -16,7 +16,7 @@ $sidebar-right-width-closed:0px; background: var(--bg-core-primary-light); border-right: 1px solid rgba(0,0,0,.025); border-radius: $border-radius-lg 0 0 $border-radius-lg; - z-index: 100; + z-index: $sidebar-zindex; transition: all 0.3s ease; @include breakpoint(sm) { @@ -315,7 +315,7 @@ $sidebar-right-width-closed:0px; color: $text-core; background: var(--bg-core-primary-light); border-radius: 0; - z-index: 100; + z-index: $sidebar-zindex; } .sidebar.bottombar .profile-description, @@ -382,7 +382,7 @@ $sidebar-right-width-closed:0px; background: var(--bg-core-primary-lighten); border-right: 1px solid rgba(0,0,0,.025); border-radius: 0 $border-radius-lg $border-radius-lg 0; - z-index: 99; + z-index: $sidebar-right-zindex; transition: all 0.3s ease; @include breakpoint(sm) { diff --git a/src/Connected.Components/Styles/globals/_variables.scss b/src/Connected.Components/Styles/globals/_variables.scss index 49b65e4..1069ef2 100644 --- a/src/Connected.Components/Styles/globals/_variables.scss +++ b/src/Connected.Components/Styles/globals/_variables.scss @@ -197,3 +197,9 @@ $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default; // transition $transition: all 0.15s ease-in-out; + +//z-index +$sidebar-zindex: 899; +$sidebar-right-zindex: 898; +$backdrop-zindex: 999; +$modal-zindex: 10000; diff --git a/src/Connected.Components/Styles/layout/_css_documentation.scss b/src/Connected.Components/Styles/layout/_css_documentation.scss index ec69af6..d915a29 100644 --- a/src/Connected.Components/Styles/layout/_css_documentation.scss +++ b/src/Connected.Components/Styles/layout/_css_documentation.scss @@ -69,11 +69,4 @@ } -.simple-grid-wraper{ - background-color: var(--element-bg-core); - border: 1px solid var(--border-core); - border-radius: $border-radius-lg; - padding: calc($base-padding * 4); - line-height: 1.4; -} diff --git a/src/Connected.Components/Styles/util/_functions.scss b/src/Connected.Components/Styles/util/_functions.scss index 063b94f..50c3ca7 100644 --- a/src/Connected.Components/Styles/util/_functions.scss +++ b/src/Connected.Components/Styles/util/_functions.scss @@ -12,6 +12,6 @@ @return #333; } @else { - @return #FFF; + @return #FFF; } -} \ No newline at end of file +} \ No newline at end of file From 858dd596880cb42afb7902793027e8e5f313d2f7 Mon Sep 17 00:00:00 2001 From: markosteger Date: Wed, 22 Feb 2023 12:11:51 +0100 Subject: [PATCH 09/16] Added ToggleGlyphButton --- .../Components/ToggleGlyphButton.razor | 21 +++ .../Components/ToggleGlyphButton.razor.cs | 120 ++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 src/Connected.Components/Components/ToggleGlyphButton.razor create mode 100644 src/Connected.Components/Components/ToggleGlyphButton.razor.cs diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor b/src/Connected.Components/Components/ToggleGlyphButton.razor new file mode 100644 index 0000000..6e6c789 --- /dev/null +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor @@ -0,0 +1,21 @@ +@inherits Button + + diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs new file mode 100644 index 0000000..e8349b0 --- /dev/null +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs @@ -0,0 +1,120 @@ +using Connected.Utilities; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; + +namespace Connected.Components; +public partial class ToggleGlyphButton: Button +{ + #region Parameters + + /// + /// Outline type of the button. + /// Options: true, false + /// Default: false + /// + [Parameter] + public bool Toggled { get; set; } = false; + + /// + /// Glyph (Icon) inside the button. + /// Options: SVG string --> Icons + /// Default: string.Empty + /// + [Parameter, EditorRequired] + public string Glyph { get; set; } = string.Empty; + + /// + /// Glyph (Icon) inside the button when tge . + /// Options: SVG string --> Icons + /// Default: string.Empty + /// + [Parameter, EditorRequired] + public string ToggledGlyph { get; set; } = string.Empty; + + /// + /// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored + /// Options: Position.[left,top,right,bottom] + /// Default: Position.left + /// + [Parameter] + public Position GlyphPosition { get; set; } = Position.Left; + + /// + /// Color for the glyph. If Glyph parameter is empty this parameter is ignored + /// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark] + /// Default: Color.Dark + /// + [Parameter] + public Color GlyphColor { get; set; } = Color.Dark; + + /// + /// Color for the glyph. If Glyph parameter is empty this parameter is ignored + /// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark] + /// Default: Color.Dark + /// + [Parameter] + public Color ToggledGlyphColor { get; set; } = Color.Dark; + + #endregion + + #region Events + + /// + /// Button click event. + /// Options: any MouseEventCallback event + /// Default: empty + [Parameter] + public EventCallback ToggledChanged { get; set; } + + protected async Task Clicked(MouseEventArgs e) + { + Toggled = !Toggled; + await ToggledChanged.InvokeAsync(Toggled); + } + #endregion + + #region Styling + + public string StyleList + { + get + { + return new StyleBuilder() + .AddStyle(base.Style) + .Build(); + } + } + + + /// + /// Generated class list for button based on user parameters + /// + public string ClassList + { + get + { + return new CssBuilder("btn") + .AddClass("btn-" + Helper.GetEnumDescription(base.Size)) + .AddClass("btn-" + Helper.GetEnumDescription(base.Color),!base.Outlined) + .AddClass("btn-outline-" + Helper.GetEnumDescription(base.Color), base.Outlined) + .AddClass(base.Class) + .Build(); + } + } + + /// + /// Generated class list for button based on user parameters + /// + public string ContentClassList + { + get + { + return new CssBuilder("") + .AddClass(base.ContentClass) + .Build(); + } + } + + #endregion + +} From 69413494c51603d20fde53ea26dea390bd44a8c4 Mon Sep 17 00:00:00 2001 From: markosteger Date: Fri, 24 Feb 2023 10:49:16 +0100 Subject: [PATCH 10/16] Modal - added EventCallback for confirm click (working) but will try to rewrite it --- .../Components/ModalDialog.razor | 19 +++++ .../Components/ModalDialog.razor.cs | 77 +++++++++++++++++++ .../Services/Modal/ModalDialogService.cs | 24 ++++++ .../Services/ServiceCollectionExtensions.cs | 10 +++ 4 files changed, 130 insertions(+) create mode 100644 src/Connected.Components/Components/ModalDialog.razor create mode 100644 src/Connected.Components/Components/ModalDialog.razor.cs create mode 100644 src/Connected.Components/Services/Modal/ModalDialogService.cs create mode 100644 src/Connected.Components/Services/ServiceCollectionExtensions.cs diff --git a/src/Connected.Components/Components/ModalDialog.razor b/src/Connected.Components/Components/ModalDialog.razor new file mode 100644 index 0000000..9bb97ab --- /dev/null +++ b/src/Connected.Components/Components/ModalDialog.razor @@ -0,0 +1,19 @@ +@if (IsVisible) +{ +
    +
    +
    +
    +

    @Title

    +
    +
    + @Content +
    +
    + + +
    +
    +
    +
    +} \ No newline at end of file diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs new file mode 100644 index 0000000..d9e8c88 --- /dev/null +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -0,0 +1,77 @@ +using Connected.Services.Modal; +using Microsoft.AspNetCore.Components; + +namespace Connected.Components; +public partial class ModalDialog: IDisposable +{ + [Inject] ModalDialogService? ModalService { get; set; } + + protected bool IsVisible { get; set; } + protected string? Title { get; set; } + protected RenderFragment? Content { get; set; } + + protected EventCallback OnConfirm { get; set; } + + protected override void OnInitialized() + { + ModalService.OnShow += ShowModal; + ModalService.OnClose += CloseModal; + } + + public void ShowModal(string title, RenderFragment content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK") + { + Title = title; + Content = content; + IsVisible = true; + + this.OKButtonText = OKButtonText; + this.CancelButtonText = CancelButtonText; + + OnConfirm = o; + + StateHasChanged(); + } + + public void ShowModal(string title, MarkupString content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK") + { + Title = title; + Content = new RenderFragment(x => x.AddContent(1, content)); + IsVisible = true; + + this.OKButtonText = OKButtonText; + this.CancelButtonText = CancelButtonText; + + OnConfirm = o; + + StateHasChanged(); + } + + public void CloseModal(bool OkClicked = false) + { + IsVisible = false; + Title = ""; + Content = null; + if (OkClicked) + OnConfirm.InvokeAsync(); + StateHasChanged(); + } + + public void Dispose() + { + if (ModalService is not null) + { + ModalService.OnShow -= ShowModal; + ModalService.OnClose -= CloseModal; + } + } + + [Parameter] + public EventCallback OnOkClick { get; set; } + + [Parameter] + public string OKButtonText { get; set; } ="OK"; + + [Parameter] + public string CancelButtonText { get; set; } = "Cancel"; + +} \ No newline at end of file diff --git a/src/Connected.Components/Services/Modal/ModalDialogService.cs b/src/Connected.Components/Services/Modal/ModalDialogService.cs new file mode 100644 index 0000000..1484a26 --- /dev/null +++ b/src/Connected.Components/Services/Modal/ModalDialogService.cs @@ -0,0 +1,24 @@ +using Microsoft.AspNetCore.Components; + +namespace Connected.Services.Modal; +public class ModalDialogService +{ + public event Action OnShow; + public event Action OnClose; + + public void ShowDialog(string title, RenderFragment content, EventCallback OnConfirm, string CancelButtonText="Cancel", string OKButtonText="OK") + { + OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText); + } + + public void ShowDialog(string title, MarkupString contentMarkup, EventCallback OnConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK") + { + var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); + OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText); + } + + public void Close(bool OkClicked) + { + OnClose?.Invoke(OkClicked); + } +} diff --git a/src/Connected.Components/Services/ServiceCollectionExtensions.cs b/src/Connected.Components/Services/ServiceCollectionExtensions.cs new file mode 100644 index 0000000..00dfc2a --- /dev/null +++ b/src/Connected.Components/Services/ServiceCollectionExtensions.cs @@ -0,0 +1,10 @@ +using Connected.Services.Modal; +using Microsoft.Extensions.DependencyInjection; + +namespace Connected.Services; + +public static class ServiceCollectionExtensions +{ + public static IServiceCollection AddModalDialogService(this IServiceCollection services) + => services.AddScoped(); +} \ No newline at end of file From 4f635b573c139c0afef500b42c6971232c435267 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 27 Feb 2023 08:45:13 +0100 Subject: [PATCH 11/16] ModalDialog --- .../Components/ModalDialog.razor | 10 ++-- .../Components/ModalDialog.razor.cs | 54 +++++++++++-------- .../Services/Modal/ModalDialogService.cs | 6 +-- .../Services/Modal/ModalEvent.cs | 12 +++++ 4 files changed, 51 insertions(+), 31 deletions(-) create mode 100644 src/Connected.Components/Services/Modal/ModalEvent.cs diff --git a/src/Connected.Components/Components/ModalDialog.razor b/src/Connected.Components/Components/ModalDialog.razor index 9bb97ab..52125cb 100644 --- a/src/Connected.Components/Components/ModalDialog.razor +++ b/src/Connected.Components/Components/ModalDialog.razor @@ -1,16 +1,16 @@ @if (IsVisible) { -
    -
    -
    -
    +
    +
    +
    +

    @Title

    @Content
    - +
    diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs index d9e8c88..5bc0c58 100644 --- a/src/Connected.Components/Components/ModalDialog.razor.cs +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -1,16 +1,19 @@ using Connected.Services.Modal; using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; namespace Connected.Components; public partial class ModalDialog: IDisposable { [Inject] ModalDialogService? ModalService { get; set; } + protected ElementReference root; protected bool IsVisible { get; set; } protected string? Title { get; set; } protected RenderFragment? Content { get; set; } - protected EventCallback OnConfirm { get; set; } + protected bool OverlayClickToClose { get; set; } = true; + protected Event OnConfirm { get; set; } protected override void OnInitialized() { @@ -18,30 +21,17 @@ public partial class ModalDialog: IDisposable ModalService.OnClose += CloseModal; } - public void ShowModal(string title, RenderFragment content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK") - { - Title = title; - Content = content; - IsVisible = true; - - this.OKButtonText = OKButtonText; - this.CancelButtonText = CancelButtonText; - OnConfirm = o; - - StateHasChanged(); - } - - public void ShowModal(string title, MarkupString content, EventCallback o, string CancelButtonText = "Cancel", string OKButtonText = "OK") + public void ShowModal(string title, RenderFragment content, Event onConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK") { Title = title; - Content = new RenderFragment(x => x.AddContent(1, content)); + Content = content; IsVisible = true; this.OKButtonText = OKButtonText; this.CancelButtonText = CancelButtonText; - OnConfirm = o; + OnConfirm = onConfirm; StateHasChanged(); } @@ -52,7 +42,7 @@ public partial class ModalDialog: IDisposable Title = ""; Content = null; if (OkClicked) - OnConfirm.InvokeAsync(); + OnConfirm.Delegate.DynamicInvoke(OnConfirm.args); StateHasChanged(); } @@ -65,13 +55,31 @@ public partial class ModalDialog: IDisposable } } - [Parameter] - public EventCallback OnOkClick { get; set; } - - [Parameter] public string OKButtonText { get; set; } ="OK"; - [Parameter] public string CancelButtonText { get; set; } = "Cancel"; + public void CheckEscape(KeyboardEventArgs args) + { + var key = args.Key.ToLower(); + if (key.Equals("escape")) + { + CloseModal(); + } + } + + public void CloseIfEnabled(MouseEventArgs args) + { + if (OverlayClickToClose) + { + CloseModal(); + } + OverlayClickToClose = true; + } + + public void PreventClose(MouseEventArgs args) + { + OverlayClickToClose = false; + } + } \ No newline at end of file diff --git a/src/Connected.Components/Services/Modal/ModalDialogService.cs b/src/Connected.Components/Services/Modal/ModalDialogService.cs index 1484a26..7bd145d 100644 --- a/src/Connected.Components/Services/Modal/ModalDialogService.cs +++ b/src/Connected.Components/Services/Modal/ModalDialogService.cs @@ -3,15 +3,15 @@ namespace Connected.Services.Modal; public class ModalDialogService { - public event Action OnShow; + public event Action OnShow; public event Action OnClose; - public void ShowDialog(string title, RenderFragment content, EventCallback OnConfirm, string CancelButtonText="Cancel", string OKButtonText="OK") + public void ShowDialog(string title, RenderFragment content, Event OnConfirm, string CancelButtonText="Cancel", string OKButtonText="OK") { OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText); } - public void ShowDialog(string title, MarkupString contentMarkup, EventCallback OnConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK") + public void ShowDialog(string title, MarkupString contentMarkup, Event OnConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK") { var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText); diff --git a/src/Connected.Components/Services/Modal/ModalEvent.cs b/src/Connected.Components/Services/Modal/ModalEvent.cs new file mode 100644 index 0000000..1876d01 --- /dev/null +++ b/src/Connected.Components/Services/Modal/ModalEvent.cs @@ -0,0 +1,12 @@ +namespace Connected.Services.Modal; +public class Event +{ + public Delegate Delegate; + public object[] args; + + public Event(Delegate Delegate, object[] Args) + { + this.Delegate = Delegate; + this.args = Args; + } +} From 422da4d079b11aa17336a2be6d0afd26632ff9f7 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 27 Feb 2023 08:54:01 +0100 Subject: [PATCH 12/16] ModalDialog - added ModalOptions --- .../Components/ModalDialog.razor | 7 ++++-- .../Components/ModalDialog.razor.cs | 24 +++++++++++++++---- .../Services/Modal/ModalDialogService.cs | 10 ++++---- .../Services/Modal/ModalOptions.cs | 9 +++++++ 4 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 src/Connected.Components/Services/Modal/ModalOptions.cs diff --git a/src/Connected.Components/Components/ModalDialog.razor b/src/Connected.Components/Components/ModalDialog.razor index 52125cb..8e84da8 100644 --- a/src/Connected.Components/Components/ModalDialog.razor +++ b/src/Connected.Components/Components/ModalDialog.razor @@ -3,9 +3,12 @@
    -
    -

    @Title

    + @if (!ModalOptions.NoHeader) + { +
    +

    @Title

    + }
    @Content
    diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs index 5bc0c58..e918da2 100644 --- a/src/Connected.Components/Components/ModalDialog.razor.cs +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -13,7 +13,11 @@ public partial class ModalDialog: IDisposable protected RenderFragment? Content { get; set; } protected bool OverlayClickToClose { get; set; } = true; - protected Event OnConfirm { get; set; } + protected Event? OnOk { get; set; } + + protected Event? OnClose { get; set; } + + protected ModalOptions? ModalOptions { get; set; } protected override void OnInitialized() { @@ -22,7 +26,7 @@ public partial class ModalDialog: IDisposable } - public void ShowModal(string title, RenderFragment content, Event onConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK") + public void ShowModal(string title, RenderFragment content, Event OnOk = null, Event OnClose = null, ModalOptions options = null, string CancelButtonText = "Cancel", string OKButtonText = "OK") { Title = title; Content = content; @@ -31,7 +35,10 @@ public partial class ModalDialog: IDisposable this.OKButtonText = OKButtonText; this.CancelButtonText = CancelButtonText; - OnConfirm = onConfirm; + ModalOptions = options; + + this.OnOk = OnOk; + this.OnClose = OnClose; StateHasChanged(); } @@ -42,7 +49,16 @@ public partial class ModalDialog: IDisposable Title = ""; Content = null; if (OkClicked) - OnConfirm.Delegate.DynamicInvoke(OnConfirm.args); + { + if (OnOk is not null) + OnOk.Delegate.DynamicInvoke(OnOk.args); + } + else + { + if (OnClose is not null) + OnClose.Delegate.DynamicInvoke(OnClose.args); + } + StateHasChanged(); } diff --git a/src/Connected.Components/Services/Modal/ModalDialogService.cs b/src/Connected.Components/Services/Modal/ModalDialogService.cs index 7bd145d..83bc365 100644 --- a/src/Connected.Components/Services/Modal/ModalDialogService.cs +++ b/src/Connected.Components/Services/Modal/ModalDialogService.cs @@ -3,18 +3,18 @@ namespace Connected.Services.Modal; public class ModalDialogService { - public event Action OnShow; + public event Action OnShow; public event Action OnClose; - public void ShowDialog(string title, RenderFragment content, Event OnConfirm, string CancelButtonText="Cancel", string OKButtonText="OK") + public void ShowDialog(string title, RenderFragment content, Event OnConfirm, Event OnCancel, ModalOptions options, string CancelButtonText="Cancel", string OKButtonText="OK") { - OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText); + OnShow?.Invoke(title, content, OnConfirm, OnCancel, options, OKButtonText, CancelButtonText); } - public void ShowDialog(string title, MarkupString contentMarkup, Event OnConfirm, string CancelButtonText = "Cancel", string OKButtonText = "OK") + public void ShowDialog(string title, MarkupString contentMarkup, Event OnConfirm, Event OnCancel, ModalOptions options, string CancelButtonText = "Cancel", string OKButtonText = "OK") { var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); - OnShow?.Invoke(title, content, OnConfirm, OKButtonText, CancelButtonText); + OnShow?.Invoke(title, content, OnConfirm, OnCancel, options, OKButtonText, CancelButtonText); } public void Close(bool OkClicked) diff --git a/src/Connected.Components/Services/Modal/ModalOptions.cs b/src/Connected.Components/Services/Modal/ModalOptions.cs new file mode 100644 index 0000000..7f44f94 --- /dev/null +++ b/src/Connected.Components/Services/Modal/ModalOptions.cs @@ -0,0 +1,9 @@ +namespace Connected.Services.Modal; +public class ModalOptions +{ + public bool CloseOnEscKey { get; set; } = true; + public bool DisableBackdropCLick { get; set; } = false; + public bool NoHeader { get; set; } = false; + + +} From ff3a36eb6434619f02002d4090cc9dfc69d2ae24 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 27 Feb 2023 12:11:37 +0100 Subject: [PATCH 13/16] ModalDialog - added ModalButton class, ModalButtonType enum, relocation of classes outside the Services folder to Models/Modal --- .../Components/ModalDialog.razor | 11 +-- .../Components/ModalDialog.razor.cs | 68 +++++++++---------- .../Enums/ModalButtonType.cs | 13 ++++ .../Models/Modal/ModalButton.cs | 37 ++++++++++ .../Models/Modal/ModalEvent.cs | 12 ++++ .../Models/Modal/ModalOptions.cs | 10 +++ .../Services/Modal/ModalDialogService.cs | 22 +++--- 7 files changed, 126 insertions(+), 47 deletions(-) create mode 100644 src/Connected.Components/Enums/ModalButtonType.cs create mode 100644 src/Connected.Components/Models/Modal/ModalButton.cs create mode 100644 src/Connected.Components/Models/Modal/ModalEvent.cs create mode 100644 src/Connected.Components/Models/Modal/ModalOptions.cs diff --git a/src/Connected.Components/Components/ModalDialog.razor b/src/Connected.Components/Components/ModalDialog.razor index 8e84da8..7215aed 100644 --- a/src/Connected.Components/Components/ModalDialog.razor +++ b/src/Connected.Components/Components/ModalDialog.razor @@ -1,7 +1,8 @@ -@if (IsVisible) +@using Connected.Models.Modal; +@if (IsVisible) {
    -
    +
    @if (!ModalOptions.NoHeader) { @@ -13,8 +14,10 @@ @Content
    - - + @foreach(ModalButton button in buttons) + { + + }
    diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs index e918da2..70548f9 100644 --- a/src/Connected.Components/Components/ModalDialog.razor.cs +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -1,9 +1,10 @@ -using Connected.Services.Modal; +using Connected.Models.Modal; +using Connected.Services.Modal; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; namespace Connected.Components; -public partial class ModalDialog: IDisposable +public partial class ModalDialog : IDisposable { [Inject] ModalDialogService? ModalService { get; set; } @@ -11,54 +12,51 @@ public partial class ModalDialog: IDisposable protected bool IsVisible { get; set; } protected string? Title { get; set; } protected RenderFragment? Content { get; set; } - protected bool OverlayClickToClose { get; set; } = true; - protected Event? OnOk { get; set; } - protected Event? OnClose { get; set; } + protected List buttons { get; set; } = new(); protected ModalOptions? ModalOptions { get; set; } + + protected override void OnInitialized() { ModalService.OnShow += ShowModal; ModalService.OnClose += CloseModal; } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (IsVisible) + await root.FocusAsync(); + } + - public void ShowModal(string title, RenderFragment content, Event OnOk = null, Event OnClose = null, ModalOptions options = null, string CancelButtonText = "Cancel", string OKButtonText = "OK") + public void ShowModal(string title, RenderFragment content, List buttons, ModalOptions options) { Title = title; Content = content; IsVisible = true; - this.OKButtonText = OKButtonText; - this.CancelButtonText = CancelButtonText; - ModalOptions = options; - - this.OnOk = OnOk; - this.OnClose = OnClose; + this.buttons = buttons; StateHasChanged(); } - public void CloseModal(bool OkClicked = false) + public void CloseModal(ModalButton? button) { - IsVisible = false; - Title = ""; - Content = null; - if (OkClicked) - { - if (OnOk is not null) - OnOk.Delegate.DynamicInvoke(OnOk.args); - } - else + if (button is not null) { - if (OnClose is not null) - OnClose.Delegate.DynamicInvoke(OnClose.args); + if (button.CloseDialogOnClick) + { + IsVisible = false; + Title = ""; + Content = null; + } + button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args); } - StateHasChanged(); } @@ -71,24 +69,26 @@ public partial class ModalDialog: IDisposable } } - public string OKButtonText { get; set; } ="OK"; - - public string CancelButtonText { get; set; } = "Cancel"; - public void CheckEscape(KeyboardEventArgs args) { - var key = args.Key.ToLower(); - if (key.Equals("escape")) + if (ModalOptions.CloseOnEscKey) { - CloseModal(); + var key = args.Key.ToLower(); + if (key.Equals("escape")) + { + CloseModal(null); + } } } public void CloseIfEnabled(MouseEventArgs args) { - if (OverlayClickToClose) + if (!ModalOptions.DisableBackdropClick) { - CloseModal(); + if (OverlayClickToClose) + { + CloseModal(null); + } } OverlayClickToClose = true; } diff --git a/src/Connected.Components/Enums/ModalButtonType.cs b/src/Connected.Components/Enums/ModalButtonType.cs new file mode 100644 index 0000000..87739fb --- /dev/null +++ b/src/Connected.Components/Enums/ModalButtonType.cs @@ -0,0 +1,13 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace Connected.Enums; +public enum ModalButtonType +{ + OkButton, + CancelButton, + RegularButton +} diff --git a/src/Connected.Components/Models/Modal/ModalButton.cs b/src/Connected.Components/Models/Modal/ModalButton.cs new file mode 100644 index 0000000..e81f476 --- /dev/null +++ b/src/Connected.Components/Models/Modal/ModalButton.cs @@ -0,0 +1,37 @@ +using Connected.Enums; +using Connected.Services.Modal; + +namespace Connected.Models.Modal; +public class ModalButton +{ + ModalDialogService _dialogService; + public Event OnClickEvent { get; set; } + public ModalButtonType ModalButtonType { get; set; } = ModalButtonType.RegularButton; + public string ButtonText { get; set; } + + public bool CloseDialogOnClick { get; set; } = true; + + public ModalButton(Event OnClickEvent, string ButtonText, ModalButtonType ModalButtonType = ModalButtonType.RegularButton, bool CloseDialogOnClick = true) + { + this.OnClickEvent = OnClickEvent; + this.ButtonText = ButtonText; + this.ModalButtonType= ModalButtonType; + this.CloseDialogOnClick = CloseDialogOnClick; + } + + public string GetButtonClass + { + get + { + switch (this.ModalButtonType) + { + case ModalButtonType.CancelButton: + return "btn-sm btn-core"; + case ModalButtonType.OkButton: + return "btn-sm btn-info"; + default: + return "btn-sm btn-secondary"; + } + } + } +} diff --git a/src/Connected.Components/Models/Modal/ModalEvent.cs b/src/Connected.Components/Models/Modal/ModalEvent.cs new file mode 100644 index 0000000..d0af9b1 --- /dev/null +++ b/src/Connected.Components/Models/Modal/ModalEvent.cs @@ -0,0 +1,12 @@ +namespace Connected.Models.Modal; +public class Event +{ + public Delegate Delegate; + public object[] args; + + public Event(Delegate Delegate, object[] Args) + { + this.Delegate = Delegate; + args = Args; + } +} diff --git a/src/Connected.Components/Models/Modal/ModalOptions.cs b/src/Connected.Components/Models/Modal/ModalOptions.cs new file mode 100644 index 0000000..fa5bea0 --- /dev/null +++ b/src/Connected.Components/Models/Modal/ModalOptions.cs @@ -0,0 +1,10 @@ +namespace Connected.Models.Modal; +public class ModalOptions +{ + public bool CloseOnEscKey { get; set; } = true; + public bool DisableBackdropClick { get; set; } = false; + public bool NoHeader { get; set; } = false; + + + +} diff --git a/src/Connected.Components/Services/Modal/ModalDialogService.cs b/src/Connected.Components/Services/Modal/ModalDialogService.cs index 83bc365..12c94c0 100644 --- a/src/Connected.Components/Services/Modal/ModalDialogService.cs +++ b/src/Connected.Components/Services/Modal/ModalDialogService.cs @@ -1,24 +1,28 @@ -using Microsoft.AspNetCore.Components; +using Connected.Components; +using Connected.Models.Modal; +using Microsoft.AspNetCore.Components; namespace Connected.Services.Modal; public class ModalDialogService { - public event Action OnShow; - public event Action OnClose; + public event Action, ModalOptions> OnShow; + public event Action OnClose; - public void ShowDialog(string title, RenderFragment content, Event OnConfirm, Event OnCancel, ModalOptions options, string CancelButtonText="Cancel", string OKButtonText="OK") + public void ShowDialog(string title, RenderFragment content, List buttons, ModalOptions options) { - OnShow?.Invoke(title, content, OnConfirm, OnCancel, options, OKButtonText, CancelButtonText); + OnShow?.Invoke(title, content, buttons, options); } - public void ShowDialog(string title, MarkupString contentMarkup, Event OnConfirm, Event OnCancel, ModalOptions options, string CancelButtonText = "Cancel", string OKButtonText = "OK") + public void ShowDialog(string title, MarkupString contentMarkup, List buttons, ModalOptions options) { var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); - OnShow?.Invoke(title, content, OnConfirm, OnCancel, options, OKButtonText, CancelButtonText); + OnShow?.Invoke(title, content, buttons, options); } - public void Close(bool OkClicked) + public void Close(ModalButton? button) { - OnClose?.Invoke(OkClicked); + OnClose?.Invoke(button); } + + } From a1e5043db841760774e757d4a1c531a4b6113d39 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 27 Feb 2023 12:18:05 +0100 Subject: [PATCH 14/16] ModalDialog - usage in Program.cs and MainLayout.razor --- src/Connected.Components.Showcase.Runner/MainLayout.razor | 2 ++ src/Connected.Components.Showcase.Runner/Program.cs | 3 +++ 2 files changed, 5 insertions(+) diff --git a/src/Connected.Components.Showcase.Runner/MainLayout.razor b/src/Connected.Components.Showcase.Runner/MainLayout.razor index de2be6c..8dd7695 100644 --- a/src/Connected.Components.Showcase.Runner/MainLayout.razor +++ b/src/Connected.Components.Showcase.Runner/MainLayout.razor @@ -1,5 +1,7 @@ @inherits LayoutComponentBase + +
    @Body
    diff --git a/src/Connected.Components.Showcase.Runner/Program.cs b/src/Connected.Components.Showcase.Runner/Program.cs index 568153e..370ca59 100644 --- a/src/Connected.Components.Showcase.Runner/Program.cs +++ b/src/Connected.Components.Showcase.Runner/Program.cs @@ -1,6 +1,7 @@ using Connected.Components.Showcase.Runner; using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Connected.Services; internal class Program { @@ -12,6 +13,8 @@ internal class Program builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + builder.Services.AddModalDialogService(); + await builder.Build().RunAsync(); } } \ No newline at end of file From 2a8aac91df2e98c30f97ab08932776f1f79ebcf9 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 27 Feb 2023 13:12:06 +0100 Subject: [PATCH 15/16] ModalDialog - fixed ESC key press event --- .../Components/ModalDialog.razor | 32 +++++++++---------- .../Components/ModalDialog.razor.cs | 23 ++++++++----- .../Models/Modal/ModalButton.cs | 3 +- .../Models/Modal/ModalOptions.cs | 2 +- .../Services/ModalDialogService.cs | 28 ++++++++++++++++ .../Services/ServiceCollectionExtensions.cs | 3 +- 6 files changed, 62 insertions(+), 29 deletions(-) create mode 100644 src/Connected.Components/Services/ModalDialogService.cs diff --git a/src/Connected.Components/Components/ModalDialog.razor b/src/Connected.Components/Components/ModalDialog.razor index 7215aed..74bf5df 100644 --- a/src/Connected.Components/Components/ModalDialog.razor +++ b/src/Connected.Components/Components/ModalDialog.razor @@ -1,25 +1,25 @@ @using Connected.Models.Modal; @if (IsVisible) { -
    -
    -
    - @if (!ModalOptions.NoHeader) - { -
    -

    @Title

    -
    - } -
    - @Content -
    -
    - @foreach(ModalButton button in buttons) +
    +
    +
    + @if (!ModalOptions.NoHeader) { - +
    +

    @Title

    +
    } +
    + @Content +
    +
    + @foreach (ModalButton button in buttons) + { + + } +
    -
    } \ No newline at end of file diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs index 70548f9..9c41215 100644 --- a/src/Connected.Components/Components/ModalDialog.razor.cs +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -1,5 +1,5 @@ using Connected.Models.Modal; -using Connected.Services.Modal; +using Connected.Services; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -19,7 +19,6 @@ public partial class ModalDialog : IDisposable protected ModalOptions? ModalOptions { get; set; } - protected override void OnInitialized() { ModalService.OnShow += ShowModal; @@ -51,15 +50,23 @@ public partial class ModalDialog : IDisposable { if (button.CloseDialogOnClick) { - IsVisible = false; - Title = ""; - Content = null; + CloseModal(); } button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args); } StateHasChanged(); } + public void CloseModal() + { + IsVisible = false; + Title = ""; + Content = null; + StateHasChanged(); + } + + + public void Dispose() { if (ModalService is not null) @@ -71,12 +78,12 @@ public partial class ModalDialog : IDisposable public void CheckEscape(KeyboardEventArgs args) { - if (ModalOptions.CloseOnEscKey) + if (!ModalOptions.DisableEscKey) { var key = args.Key.ToLower(); if (key.Equals("escape")) { - CloseModal(null); + CloseModal(); } } } @@ -87,7 +94,7 @@ public partial class ModalDialog : IDisposable { if (OverlayClickToClose) { - CloseModal(null); + CloseModal(); } } OverlayClickToClose = true; diff --git a/src/Connected.Components/Models/Modal/ModalButton.cs b/src/Connected.Components/Models/Modal/ModalButton.cs index e81f476..476513e 100644 --- a/src/Connected.Components/Models/Modal/ModalButton.cs +++ b/src/Connected.Components/Models/Modal/ModalButton.cs @@ -1,10 +1,9 @@ using Connected.Enums; -using Connected.Services.Modal; +using Connected.Services; namespace Connected.Models.Modal; public class ModalButton { - ModalDialogService _dialogService; public Event OnClickEvent { get; set; } public ModalButtonType ModalButtonType { get; set; } = ModalButtonType.RegularButton; public string ButtonText { get; set; } diff --git a/src/Connected.Components/Models/Modal/ModalOptions.cs b/src/Connected.Components/Models/Modal/ModalOptions.cs index fa5bea0..4f2443f 100644 --- a/src/Connected.Components/Models/Modal/ModalOptions.cs +++ b/src/Connected.Components/Models/Modal/ModalOptions.cs @@ -1,7 +1,7 @@ namespace Connected.Models.Modal; public class ModalOptions { - public bool CloseOnEscKey { get; set; } = true; + public bool DisableEscKey { get; set; } = false; public bool DisableBackdropClick { get; set; } = false; public bool NoHeader { get; set; } = false; diff --git a/src/Connected.Components/Services/ModalDialogService.cs b/src/Connected.Components/Services/ModalDialogService.cs new file mode 100644 index 0000000..5b988ef --- /dev/null +++ b/src/Connected.Components/Services/ModalDialogService.cs @@ -0,0 +1,28 @@ +using Connected.Components; +using Connected.Models.Modal; +using Microsoft.AspNetCore.Components; + +namespace Connected.Services; +public class ModalDialogService +{ + public event Action, ModalOptions> OnShow; + public event Action OnClose; + + public void ShowDialog(string title, RenderFragment content, List buttons, ModalOptions options) + { + OnShow?.Invoke(title, content, buttons, options); + } + + public void ShowDialog(string title, MarkupString contentMarkup, List buttons, ModalOptions options) + { + var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); + OnShow?.Invoke(title, content, buttons, options); + } + + public void Close() + { + OnClose?.Invoke(); + } + + +} diff --git a/src/Connected.Components/Services/ServiceCollectionExtensions.cs b/src/Connected.Components/Services/ServiceCollectionExtensions.cs index 00dfc2a..2f58959 100644 --- a/src/Connected.Components/Services/ServiceCollectionExtensions.cs +++ b/src/Connected.Components/Services/ServiceCollectionExtensions.cs @@ -1,5 +1,4 @@ -using Connected.Services.Modal; -using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.DependencyInjection; namespace Connected.Services; From a4d1f798f44ec7a72dca64ab15d235f790de7fad Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 27 Feb 2023 13:17:31 +0100 Subject: [PATCH 16/16] ModalDialog - ModalDialogService.cs, ModalEvents.cs, ModalOptions.cs file location change --- .../Services/Modal/ModalDialogService.cs | 28 ------------------- .../Services/Modal/ModalEvent.cs | 12 -------- .../Services/Modal/ModalOptions.cs | 9 ------ 3 files changed, 49 deletions(-) delete mode 100644 src/Connected.Components/Services/Modal/ModalDialogService.cs delete mode 100644 src/Connected.Components/Services/Modal/ModalEvent.cs delete mode 100644 src/Connected.Components/Services/Modal/ModalOptions.cs diff --git a/src/Connected.Components/Services/Modal/ModalDialogService.cs b/src/Connected.Components/Services/Modal/ModalDialogService.cs deleted file mode 100644 index 12c94c0..0000000 --- a/src/Connected.Components/Services/Modal/ModalDialogService.cs +++ /dev/null @@ -1,28 +0,0 @@ -using Connected.Components; -using Connected.Models.Modal; -using Microsoft.AspNetCore.Components; - -namespace Connected.Services.Modal; -public class ModalDialogService -{ - public event Action, ModalOptions> OnShow; - public event Action OnClose; - - public void ShowDialog(string title, RenderFragment content, List buttons, ModalOptions options) - { - OnShow?.Invoke(title, content, buttons, options); - } - - public void ShowDialog(string title, MarkupString contentMarkup, List buttons, ModalOptions options) - { - var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); - OnShow?.Invoke(title, content, buttons, options); - } - - public void Close(ModalButton? button) - { - OnClose?.Invoke(button); - } - - -} diff --git a/src/Connected.Components/Services/Modal/ModalEvent.cs b/src/Connected.Components/Services/Modal/ModalEvent.cs deleted file mode 100644 index 1876d01..0000000 --- a/src/Connected.Components/Services/Modal/ModalEvent.cs +++ /dev/null @@ -1,12 +0,0 @@ -namespace Connected.Services.Modal; -public class Event -{ - public Delegate Delegate; - public object[] args; - - public Event(Delegate Delegate, object[] Args) - { - this.Delegate = Delegate; - this.args = Args; - } -} diff --git a/src/Connected.Components/Services/Modal/ModalOptions.cs b/src/Connected.Components/Services/Modal/ModalOptions.cs deleted file mode 100644 index 7f44f94..0000000 --- a/src/Connected.Components/Services/Modal/ModalOptions.cs +++ /dev/null @@ -1,9 +0,0 @@ -namespace Connected.Services.Modal; -public class ModalOptions -{ - public bool CloseOnEscKey { get; set; } = true; - public bool DisableBackdropCLick { get; set; } = false; - public bool NoHeader { get; set; } = false; - - -}