jobdone-shared-files 1.1.19 → 1.1.20-beta.1

package/styleNew/scss/Layout/LayoutInnerColumn.scss

@@ -0,0 +1,265 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/Mixins" as *;
+
+.main-content {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    .sidebar-content, .detail-content {
+        border-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .sidebar-content {
+        flex-basis: 250px;
+        margin-right: 0.75rem;
+        height: 100%;
+        
+    }
+    .detail-content {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 500px;
+        .title-nav {
+            display: flex;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: $zindex-sticky + 2;
+            height: 2.75rem;
+        }
+    }
+}
+
+.form-filter-input{
+    min-width: 18rem !important;
+}
+
+#col-main{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    .main-content{
+        height: auto;
+        overflow: hidden;
+    }
+}
+
+.sidebar-content{
+    .thead-sidebar{
+        top: calc( -0.5rem - #{$border-width} );
+    }
+    .table {
+        tbody {
+            .th-num {
+                @include tableTdNum();
+            }
+            tr {
+                cursor: pointer;
+                &.is-edit{
+                    cursor: auto;
+                }
+                &.disabled, &:disabled{
+                    cursor: not-allowed;
+                }
+                &.disabled, &:disabled, &.is-edit{
+                    th, td{
+                        color: $gray-500;
+                    }
+                    &.clicked th, &.clicked td{
+                        background-color: $gray-200;
+                        color: $gray-600;
+                    }
+
+                    &.clicked td:nth-last-child(1){
+                        &:nth-last-child(1):after{
+                            background-color: $gray-600;
+                        }
+                    }
+                }
+            }
+            .clicked {
+                th,
+                td {
+                    background-color: rgba($primary, 0.1);
+                    color: $primary;
+                }
+                td:nth-last-child(1) {
+                    position: relative;
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        height: 100%;
+                        width: 0.25rem;
+                        right: 0;
+                        top: 0;
+                        z-index: 1;
+                        background-color: $primary;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.fs-7 {
+    font-size: 0.85rem;
+}
+
+
+$w-shadow: 10px;
+
+.th-shadow-end, .th-shadow-start{
+    position: relative;
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: $w-shadow;
+        pointer-events: none;
+    }
+
+}
+.th-shadow-end{
+    &:after {
+        right: -$w-shadow;
+        background: linear-gradient(90deg, rgba($primary, 0.1) 0%, rgba($primary, 0) 100%);
+    }
+}
+.th-shadow-start{
+    &:after{
+        left: -$w-shadow;
+        background: linear-gradient(90deg, rgba($primary, 0) 0%, rgba($primary, 0.1) 100%);
+    }
+}
+
+
+.th-num, .th-code, .th-name, .th-end {
+    position: sticky;
+    z-index: $zindex-dropdown + 1;
+}
+
+.th-num {
+    left: 0;
+}
+
+.th-code {
+    left: 39px;
+}
+
+.th-name{
+    left: 166px;
+    > div{
+        display: flex;
+    }
+}
+
+.th-end{
+    right: 0;
+}
+
+.title-nav, .nav-paginate{
+    position: sticky;
+    top: 0;
+    left: 0;
+}
+
+.btn-more{
+    transition: .5s;
+}
+
+.text-title:not(.text-line-clamp-1){
+    + .btn-more{
+        transform: rotate(-180deg);
+    }
+}
+
+
+// TODO: 統一 UI
+$check-full-width: 23rem;
+.check-btn{
+    position: relative;
+    display: inline-block;
+    margin: 1rem;
+    .check-btn-label{
+        width: $check-full-width;
+        padding: 1rem 1rem;
+        color: var(--gray-500);
+        border: $border-width solid $border-color;
+        border-radius: $border-radius;
+        text-align: center;
+        cursor: pointer;
+        transition: $transition-base;
+        &:hover{
+            color: $info;
+            border-color: $info;
+            background-color: $table-hover-bg;
+        }
+        &.check-btn-label-lg{
+            padding: 2rem 1rem;
+            width: 10.5rem;
+        }
+    }
+    .material-icons{
+        font-size: 4rem;
+    }
+    input[type="checkbox"], input[type="radio"]{
+        position: absolute;
+        pointer-events: none;
+        @include size(0);
+        opacity: 0;
+        &:checked ~ .check-btn-label{
+            color: $primary;
+            border-color: $primary;
+            background-color: $table-hover-bg;
+
+        }
+    }
+}
+
+.list-group-flush{
+    --bs-list-group-bg: transparent;
+}
+
+
+
+
+.modal-belong-options{
+    .content-options, .content-items{
+        padding: .5rem;
+        background-color: $gray-600;
+    }
+    .content-options{
+        padding-bottom: 0;
+    }
+    .content-items{
+        $line-h: 1.5rem;
+        position: relative;
+        padding-left: 2.25rem;
+        .overflow-y-auto{
+            height: 62vh;
+        }
+        &:before, &:after{
+            content: "";
+            position: absolute;
+        }
+        &:before{
+            left: 1.5rem;
+            top: 0;
+            height: $line-h;
+            border-left: 4px solid $gray-500;
+        }
+        &:after{
+            left: 1.5rem;
+            top: $line-h;
+            width: .7rem;
+            border-top: 4px solid $gray-500;
+        }
+    }
+}

package/styleNew/scss/Layout/LayoutProject.scss

@@ -0,0 +1,126 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/Mixins" as *;
+
+html, body, #app{
+    height: 100%;
+}
+
+#app{
+    display: flex;
+    flex-direction: column;
+}
+
+body{
+    background-color: var(--gray-300);
+}
+
+
+
+// 兩欄開合 UI
+
+#col-aside:has(label[for="toggle-aside"]:hover){
+    will-change: margin-left;
+    ~ #col-main{
+        will-change: width;
+    }
+}
+
+
+.content-2-column{
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    z-index: 1;
+}
+
+#col-aside, #col-main{
+    height: 100%;
+    overflow-y: auto;
+    @include scrollbar();
+}
+
+
+$aside-w: 16.25rem;
+$aside-close-w: 2.5rem;
+$aside-transition: .5s;
+#col-aside{
+    @include solid-size($aside-w, auto);
+    background-color: var(--gray-100);
+    transition: $aside-transition;
+}
+
+#col-main{
+    flex-grow: 1;
+    transition: $aside-transition;
+}
+
+.toggler-open{
+    padding: 0.5rem;
+    background-color: var(--gray-200);
+    > label[for="toggle-aside"]{
+        cursor: pointer;
+    }
+    > label[for="toggle-aside"]:hover{
+        .material-icons{
+            color: var(--bs-primary);
+        }
+        .toggler-open-text{
+            color: rgba(var(--bs-link-color-rgb), 0.5);
+        }
+    }
+
+    .toggler-open-text, .material-icons{
+        transition: $transition-base;
+    }
+    .material-icons{
+        color: var(--gray-600);
+        margin-right: 0.2rem;
+        margin-left: 0.5rem;
+    }
+}
+
+.toggler-text{
+    color: var(--gray-500);
+}
+
+.content-menu{
+    position: relative;
+}
+
+.toggler-close{
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $aside-close-w;
+    text-align: center;
+    padding: .5rem;
+    line-height: 1.25;
+    cursor: pointer;
+    transition: $aside-transition;
+    .toggler-close-text:hover{
+        color: rgba(var(--bs-link-color-rgb), 0.5);
+    }
+}
+
+#toggle-aside:checked{
+    ~ #col-aside{
+        margin-left: -$aside-w + $aside-close-w;
+        .toggler-open-text, nav{
+            display: none;
+        }
+        .toggler-close{
+            display: block;
+        }
+    }
+}
+
+.thead-sticky{
+    position: sticky;
+    top: 2.7rem;
+    z-index: $zindex-dropdown + 2;
+}

package/styleNew/scss/Layout/LayoutSinglePage.scss

@@ -0,0 +1,19 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/Mixins" as *;
+
+html{
+    background:
+        linear-gradient(138deg, rgba(100, 148, 241, 0.05) 26.2%, rgba(165, 185, 255, 0.29) 88.06%),
+        var(--gray-000);
+    background-repeat: no-repeat;
+    min-height: 100%;
+}
+
+body{
+    @include flex-center();
+    background: transparent;
+    min-height: 100%;
+}

package/styleNew/scss/Layout/LayoutTwoColumn.scss

@@ -0,0 +1,61 @@
+@use "../../../../bootstrap/scss/functions" as *;
+@use "../Settings/bs-variables" as *;
+@use "../../../../bootstrap/scss/mixins" as *;
+@use "../Settings/custom-variables" as *;
+@use "../Settings/Mixins" as *;
+
+html, body, #app.layout-two-column,
+#col-aside, #col-main{
+    height: 100%;
+}
+
+body, #app.layout-two-column{
+    overflow: hidden;
+}
+
+#app.layout-two-column{
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+#col-aside, #col-main{
+    overflow: hidden;
+    transition: all .5s ease-in-out;
+}
+
+
+$aside-w: 18rem;
+#col-aside{
+    display: flex;
+    flex-direction: column;
+    @include solid-size($aside-w, auto);
+    background-color: var(--gray-200);
+    border-right: $border-width solid var(--bs-border-color);
+}
+
+#col-main{
+    flex-grow: 1;
+    background-color: var(--gray-400);
+    @include scrollbar();
+}
+
+
+// navbar 開關 ------------------------------------------
+#col-main:has(label[for="toggle-aside"]:hover){
+    will-change: width;
+    ~ #col-aside{
+        will-change: margin-left;
+    }
+}
+
+#toggle-aside:checked{
+    ~ #col-aside{
+        margin-left: -$aside-w;
+    }
+    ~ #col-main{
+        label[for="toggle-aside"] .material-icons{
+            transform: rotate(180deg);
+        }
+    }
+}
+// navbar 開關 ------------------------------------------

package/styleNew/scss/Settings/_Mixins.scss

@@ -0,0 +1,232 @@
+// ====================================
+// Custom Mixins 清單 (依順序排序)
+// ====================================
+
+// Layout 各種置中方法
+// scrollbar樣式
+
+// 尺寸設定: rwd-square / size / solid-size
+// Text: 文字溢排
+// List Style: 數字標號
+
+// Image 背景 2x 3x 設定
+
+// ====================================
+// Layout 各種置中方法
+// ====================================
+
+// 使用 flex 上下左右置中
+@mixin flex-center() {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// 使用 position 上下左右置中
+@mixin position-center() {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+// 使用inline-block:before垂直至中
+@mixin vertical-middle() {
+    // 加在父層
+    &:before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        width: 0;
+        height: 100%;
+    }
+}
+
+@mixin vertical-middle-item() {
+    // 加在要置中的項目
+    display: inline-block;
+    vertical-align: middle;
+}
+
+
+// ====================================
+// scrollbar樣式
+// ====================================
+
+// 自訂變數 (--scrollbar-width) 在 "LayoutBase" 中設定
+@mixin scrollbar(
+    $background: var(--gray-200),
+    $default-color: var(--gray-500),
+    $hover-color: var(--bs-primary),
+    $width: var(--scrollbar-width),
+    $height: var(--scrollbar-width),
+    $border-radius: var(--scrollbar-width),
+    $y: auto,
+    $x: hidden
+) {
+    overflow-y: $y;
+    overflow-x: $x;
+
+    // Chrome 121 / Edge 121 / FireFox
+    @supports (scrollbar-width: auto) {
+        scrollbar-width: auto;
+        scrollbar-color: $default-color $background;
+        &:hover{
+            scrollbar-color: $hover-color $background;
+        }
+    }
+
+    @supports selector(::-webkit-scrollbar) {
+        &::-webkit-scrollbar-thumb {
+            background-color: $default-color;
+            border-radius: $border-radius;
+        }
+        &::-webkit-scrollbar,
+        &::-webkit-scrollbar-track {
+            background-color: $background;
+        }
+        &::-webkit-scrollbar {
+            width: $width;
+            height: $height;
+        }
+        &:hover {
+            &::-webkit-scrollbar,
+            &::-webkit-scrollbar-thumb {
+                background-color: $hover-color;
+            }
+        }
+    }
+
+}
+
+// ====================================
+// 尺寸設定: rwd-square / size / solid-width
+// ====================================
+
+@mixin rwd-square($size) {
+    width: $size;
+    height: auto;
+    &:before {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+    }
+}
+
+@mixin size($w, $h: $w) {
+    width: $w;
+    height: $h;
+}
+
+@mixin solid-size($w, $h: $w) {
+    width: $w;
+    max-width: $w;
+    min-width: $w;
+    height: $h;
+}
+
+// ====================================
+// Text: 文字溢排
+// ====================================
+
+// 單行
+@mixin text-overflow() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 多行
+@mixin text-line-clamp($line-clamp) {
+    display: -webkit-box;
+    -webkit-line-clamp: $line-clamp;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+// ====================================
+// List Style: 數字標號
+// ====================================
+
+// 數字標號
+@mixin list-counter() {
+    list-style-type: none;
+    padding: 0;
+    margin: auto;
+    li {
+        counter-increment: step-counter;
+        &:before {
+            content: counter(step-counter);
+            display: inline-block;
+            vertical-align: top;
+            font-size: 16px;
+            text-align: center;
+        }
+    }
+}
+
+// ====================================
+// Image 背景 2x 3x 設定
+// ====================================
+@mixin background-image-retina($file, $type) {
+    background-image: url($file + "." + $type);
+    @media screen and (-webkit-min-device-pixel-ratio: 2),
+        (-moz-min-device-pixel-ratio: 2),
+        screen and (min--moz-device-pixel-ratio: 2) {
+        background-image: url($file + "@2x." + $type);
+    }
+    @media screen and (-webkit-min-device-pixel-ratio: 3),
+        (-moz-min-device-pixel-ratio: 3),
+        screen and (min--moz-device-pixel-ratio: 3) {
+        background-image: url($file + "@3x." + $type);
+    }
+}
+
+@mixin background-image-retina-amp($file, $type) {
+    background-image: url($file + "." + $type);
+    @media screen and (-webkit-min-device-pixel-ratio: 2),
+        (-moz-min-device-pixel-ratio: 2),
+        screen and (min-resolution: 2dppx) {
+        background-image: url($file + "@2x." + $type);
+    }
+    @media screen and (-webkit-min-device-pixel-ratio: 3),
+        (-moz-min-device-pixel-ratio: 3),
+        screen and (min-resolution: 3dppx) {
+        background-image: url($file + "@3x." + $type);
+    }
+}
+
+// ====================================
+// Construction Mixins
+// ====================================
+
+@mixin tableHeadTH() {
+    border-radius: 0;
+    background-color: $gray-200;
+    font-size: 0.85rem;
+    font-weight: normal;
+    letter-spacing: 0.5px;
+    color: $gray-600;
+    padding-left: 0.75rem;
+}
+
+@mixin tableTdNum() {
+    color: $gray-500;
+    font-size: 0.85rem;
+    vertical-align: middle !important;
+}
+
+// TODO: 待刪除，已改成 LayoutBase 的 .btn-link-light-bg
+@mixin linkBtn() {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    margin-right: 0.5rem;
+    &:hover {
+        color: $primary;
+        background-color: rgba($primary, 0.1);
+    }
+}

package/styleNew/scss/Settings/_MobileVariables.scss

@@ -0,0 +1,12 @@
+$safe-area-inset-top: env(safe-area-inset-top);
+$safe-area-inset-bottom: env(safe-area-inset-bottom);
+
+$gradient-bg: linear-gradient(138deg, rgba(100, 148, 241, 0.05) 26.2%, rgba(165, 185, 255, 0.29) 88.06%), var(--gray-000);
+
+$gradient-main: linear-gradient(270deg, #647AF1 33.33%, #0084E4 100%);
+$gradient-main-translucent: linear-gradient(270deg, rgba(63, 90, 233, 0.8) 33.33%, rgba(0, 130, 220, 0.8) 100%);
+
+$gradient-glow: linear-gradient(131deg, rgba(17, 198, 245, 0.55) 0%, rgba(24, 196, 255, 0.00) 100%);
+$gradient-glow-2end: linear-gradient(131deg, rgba(17, 198, 245, 0.20) 0%, rgba(24, 196, 255, 0.00) 45.31%, rgba(17, 198, 245, 0.20) 100%);
+
+$backdrop-blur-base: blur(5px);