jobdone-shared-files 0.0.1-beta.8 → 0.0.1-beta.81

package/lightboxWithOverview.vue

@@ -0,0 +1,132 @@
+<template>
+    <vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
+                        @hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
+    <div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
+        <div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
+            <div class="d-inline-block">
+                <div class="d-inline-block thumbnail-content rounded hover-border"
+                    :class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
+                    @click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { ref, computed } from 'vue';
+    import VueEasyLightbox from 'vue-easy-lightbox';
+
+    export default {
+        props: {
+            previewCount: {
+                type: Number,
+                required: false,
+                default: 5
+            },
+            picturesData: {
+                type: Array,
+                required: true
+            },
+            displayIndex: {
+                type: Number,
+                required: false,
+                default: 0
+            },
+        },
+        components: {
+            VueEasyLightbox
+        },
+        setup(props) {
+            const previewPictures = computed(() => {
+                return props.picturesData.slice(0, props.previewCount)
+            });
+            const otherPictureCount = computed(() => {
+                var count = props.picturesData.length - props.previewCount;
+                return count < 0 ? 0 : count;
+            });
+            const lightboxVisibleRef = ref(false);
+            const picturesIndexRef = ref(props.displayIndex);
+
+            const changePictureIndex = (index) => {
+                picturesIndexRef.value = index;
+            };
+
+            const showLightbox = (index) => {
+                changePictureIndex(index);
+                lightboxVisibleRef.value = true;
+            };
+
+            const hideLightbox = () => {
+                lightboxVisibleRef.value = false;
+            }
+
+            return {
+                lightboxVisibleRef,
+                picturesIndexRef, changePictureIndex,
+                showLightbox, hideLightbox,
+                previewCount: props.previewCount,
+                previewPictures,
+                otherPictureCount
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "./style/scss/Settings/basic-import";
+    .hover-border{
+        transition: $transition-base;
+        &:hover{
+            box-shadow: $focus-ring-box-shadow;
+        }
+    }
+
+    .vel-modal{
+        backdrop-filter: var(--backdrop-blur);
+    }
+
+    .lightbox-thumbnail-toolbar .thumbnail-content{
+        cursor: pointer;
+    }
+
+    .lightbox-thumbnail-toolbar{
+        $padding-x: 10vw;
+        position: fixed;
+        top: 0;
+        left: $padding-x;
+        right: $padding-x;
+        margin: auto;
+        z-index: 10000;
+        animation: fadeIn .5s;
+        pointer-events: none;
+        .overflow-x-auto{
+            display: inline-block;
+            max-width: 100%;
+            pointer-events: auto;
+        }
+        .thumbnail-content{
+            --bs-border-color: rgba(0,0,0, 0.12);
+            @include solid-size(40px);
+            filter: brightness(0.5);
+            transition: $transition-base;
+            &:not(:last-child){
+                margin-right: 1rem;
+            }
+            &:hover{
+                filter: brightness(.8);
+            }
+            &.active{
+                filter: brightness(1);
+            }
+            &:hover, &.active{
+                --bs-border-color: rgba(255,255,255, 0.3);
+            }
+        }
+        .hover-border:hover{
+            box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
+        }
+        .overflow-x-auto{
+            --bs-emphasis-color-rgb: 255, 255, 255;
+        }
+    }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.81",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,8 @@
     "axios": "^1.2.2",
     "vue": "^3.2.45",
     "vue-loading-overlay": "^6.0.3",
-    "bootstrap": "^5.3.0-alpha1",
-    "dayjs": "^1.11.7"
+    "bootstrap": "^5.3.0",
+    "dayjs": "^1.11.7",
+    "vue-easy-lightbox": "^1.16.0"
   }
 }

package/style/scss/Common/Animation.scss

@@ -0,0 +1,6 @@
+@import "../Settings/basic-import";
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

package/style/scss/Common/SelectableTable.scss

@@ -0,0 +1,31 @@
+@import "../Settings/basic-import";
+
+th.bg-secondary{
+    position: relative;
+    &:after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -$border-width;
+        height: $border-width;
+        width: 100%;
+        background-color: $secondary;
+    }
+}
+
+.table{
+    background-color: $white;
+}
+
+tr:has(input[type="checkbox"]:checked) > td:not([scope="col"]){
+    --bs-table-accent-bg: transparent;
+    --bs-table-bg: rgba(var(--bs-primary-rgb), .1);
+    color: var(--bs-table-hover-color);
+}
+
+.td-check, .td-avatar-sm{
+    width: 2rem;
+}
+.td-avatar-md{
+    width: 3rem;
+}

package/style/scss/Common/filepond.scss

@@ -0,0 +1,28 @@
+@import "../Settings/basic-import";
+
+.can-click{
+    cursor: pointer;
+}
+
+.filepond--root.filepond--hopper {
+    border: 1px dashed var(--bs-gray-400);
+    border-radius: 0.5em;
+    overflow: hidden;
+}
+
+.filepond--drop-label {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.filepond-label-box-cus {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.filepond--panel-root {
+    background-color: $blue-100 !important;
+}

package/style/scss/Common/thumbnail-group.scss

@@ -0,0 +1,14 @@
+
+.thumbnail-group{
+    $offset: .5rem;
+    position: relative;
+    display: inline-flex;
+    margin-right: $offset;
+    margin-bottom: $offset;
+    .thumbnail-pin{
+        position: absolute;
+        right: -$offset;
+        bottom: -$offset;
+        box-shadow: $box-shadow;
+    }
+}

package/style/scss/Layout/LayoutBase.scss

@@ -3,9 +3,9 @@
 // ====================================
 
 // Custom Bootstrap
-@import "../Bootstrap/functions";
+@import "../../../../bootstrap/scss/functions";
 @import "../Settings/bs-variables";
-@import "../Bootstrap/bootstrap.scss";
+@import "../../../../bootstrap/scss/bootstrap.scss";
 
 
 // ====================================
@@ -109,6 +109,14 @@ a{
     }
 }
 
+.text-pre-wrap{
+    white-space: pre-wrap;
+}
+
+.fs-min{
+    font-size: 12px;
+}
+
 .text-overflow{
     @include text-overflow();
 }
@@ -128,6 +136,18 @@ a{
 // text / link ------------------------------------------
 
 
+// border ------------------------------------------
+.hover-border{
+    transition: $transition-base;
+    &:hover{
+        box-shadow: $focus-ring-box-shadow;
+    }
+}
+.active-border{
+    box-shadow: $focus-ring-box-shadow;
+}
+// border ------------------------------------------
+
 
 // badge outline ------------------------------------------
 
@@ -142,6 +162,12 @@ a{
 // badge outline ------------------------------------------
 
 
+// input ------------------------------------------
+.form-control{
+    caret-color: $primary;
+}
+// input ------------------------------------------
+
 
 // checkbox / radio ------------------------------------------
 
@@ -395,6 +421,7 @@ th, td{
         --bs-table-bg: transparent;
         background-color: $table-danger-bg;
         color: var(--bs-danger);
+        box-shadow: none;
     }
 }
 
@@ -452,10 +479,10 @@ th, td{
 }
 
 .btn-link-light-bg {
+    text-decoration: none;
     &:hover {
-        color: var(--bs-btn-color)
+        color: var(--bs-btn-color);
         background-color: rgba(var(--bs-link-color-rgb), .1);
-        text-decoration: none;
     }
 }
 
@@ -570,16 +597,27 @@ th, td{
 
 // modal ------------------------------------------
 .modal{
-    backdrop-filter: blur(2px);
+    backdrop-filter: var(--backdrop-blur);
 }
 
 .modal-md{
     min-width: 650px;
 }
+
+.modal-long-content .overflow-y-auto{
+    height: 75vh;
+}
 // modal ------------------------------------------
 
 
 // offcanvas ------------------------------------------
+.offcanvas-backdrop{
+    background-color: rgba($offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+    &.show{
+        backdrop-filter: var(--backdrop-blur);
+        opacity: 1;
+    }
+}
 .offcanvas{
     &-md-size{
         --bs-offcanvas-width: 550px;
@@ -856,8 +894,9 @@ a.navbar-line-item{
 
 
 .navbar[data-bs-theme="dark"]{
+    --dark-theme-primary: #bec9ff;
     .navbar-line-item.dropdown:not(.active) .dropdown-link{
-        color: lighten($primary, 15%);
+        color: var(--dark-theme-primary);
     }
     .navbar-nav .show > .nav-link, .navbar-nav .nav-link.active{
         &, a{
@@ -865,7 +904,7 @@ a.navbar-line-item{
         }
     }
     .navbar-line-item:before{
-        border-bottom-color: lighten($primary, 15%);
+        border-bottom-color: var(--dark-theme-primary);
     }
     .navbar-line-item.dropdown:not(.active) .dropdown-link,
     .navbar-line-item:before{
@@ -883,7 +922,7 @@ a.navbar-line-item{
 .w-66{
     width: 66.66%;
 }
-@for $i from 1 through 10 {
+@for $i from 1 through 25 {
     .w-#{$i}rem {
         width: #{$i}rem;
     }
@@ -900,7 +939,8 @@ a.navbar-line-item{
         opacity: .7;
     }
     .content-img > .material-icons{
-        font-size: 7rem;
+        font-size: 6rem;
+        margin-bottom: 0.5rem;
         opacity: .5;
     }
     p{
@@ -915,7 +955,7 @@ a.navbar-line-item{
 .mobile-forbidden{
     display: none;
 }
-@media (max-width: 992px) {
+@media only screen and (max-width: 992px) {
     body{
         overflow: hidden;
     }
@@ -939,4 +979,37 @@ a.navbar-line-item{
         }
     }
 }
-// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+
+
+
+// sweet alert ------------------------------------------
+.swal2-container{
+    &.swal2-backdrop-show, &.swal2-noanimation{
+        backdrop-filter: var(--backdrop-blur);
+    }
+}
+
+div:where(.swal2-container){
+    .swal2-html-container{
+        font-size: 1rem !important;
+        color: var(--bs-body-color) !important;
+    }
+    h2:where(.swal2-title){
+        font-size: 1.5rem !important;
+        color: var(--bs-emphasis-color) !important;
+    }
+    .swal2-actions{
+        flex-direction: row-reverse;
+        width: 100%;
+    }
+    button:where(.swal2-styled){
+        margin-left: .5rem !important;
+        margin-right: .5rem !important;
+    }
+    
+    button:where(.swal2-styled).swal2-cancel{
+        background-color: $secondary !important;
+    }
+}
+// sweet alert ------------------------------------------

package/style/scss/Layout/LayoutMobile.scss

@@ -0,0 +1,203 @@
+@import "../Settings/basic-import";
+@import "../Common/Animation.scss";
+@import "../Settings/MobileVariables";
+
+@media only screen and (max-width: 768px) {
+    // default layout ---------------------------------------------
+    
+    html, body, #app{
+        min-height: 100%;
+    }
+    
+    html{
+        position: relative;
+        &:before{
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: -1;
+            background: $gradient-bg;
+            background-repeat: no-repeat;
+            pointer-events: none;
+        }
+    }
+    
+    body{
+        background: transparent;
+        scroll-behavior: smooth;
+    }
+    
+    #app{
+        width: 100%;
+        max-width: 767px;
+        transition: 1s;
+    }
+    
+    // background ---------------------------------------------
+    
+    .bg-gradient-main, .bg-gradient-main-translucent{
+        color: rgba( $white, .7 );
+        .text-emphasis{
+            color: $white;
+        }
+    }
+    
+    .bg-gradient-main{
+        background: $gradient-main;
+    }
+    
+    .bg-gradient-main-translucent{
+        background: $gradient-main-translucent;
+        backdrop-filter: $backdrop-blur-base;
+    }
+    
+    .bg-dark-translucent{
+        background-color: rgba( 0, 22, 44, .8 );
+        backdrop-filter: $backdrop-blur-base;
+    }
+    
+    .bg-light-translucent{
+        background-color: rgba( $white, .5 );
+        backdrop-filter: $backdrop-blur-base;
+    }
+    
+    .bg-extend{
+        position: relative;
+        &:before{
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: -1;
+            height: 3rem;
+        }
+    }
+    
+    .bg-extend-gradient-main-translucent{
+        &:before{
+            background: $gradient-main-translucent;
+        }
+    }
+    
+    // navbar ---------------------------------------------
+    
+    .navbar-main{
+        color: $gray-500;
+    }
+    
+    // width ---------------------------------------------
+    
+    .w-85{
+        width: 85% !important;
+    }
+    
+    .w-min-3rem{
+        min-width: 3rem;
+    }
+    
+    // font size ---------------------------------------------
+    
+    .fs-min{
+        font-size: 12px;
+    }
+    
+    // button ---------------------------------------------
+    
+    .btn-glow{
+        background-image: $gradient-glow;
+    }
+    
+    .btn-glow-2end{
+        --bs-btn-color: #fff;
+        --bs-btn-hover-color: #fff;
+        --bs-btn-border-color: rgba(255, 255, 255, 0.5);
+        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
+        background: $gradient-glow-2end;
+    }
+    
+    // input ---------------------------------------------
+    
+    
+    // input-group-icon
+    .input-group-icon{
+        $padding-left: 2rem;
+    
+        position: relative;
+        .material-icons, .input-group-placeholder{
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 6;
+        }
+        .material-icons{
+            left: 0.6rem;
+        }
+        .input-group-placeholder{
+            left: $padding-left;
+        }
+        .form-control{
+            &:-webkit-date-and-time-value{
+                text-align: left;
+            }
+            &:nth-child(1){
+                padding-left: $padding-left;
+            }
+        }
+    }
+    
+    
+    // animation ---------------------------------------------
+    
+    .fadeIn{
+        animation-name: fadeIn;
+        animation-duration: 1s;
+    }
+    
+    // image ---------------------------------------------
+    
+    .thumbnail-circle{
+        border: 3px solid rgba($white, .3);
+        border-radius: 50%;
+        &-sm{
+            border-width: 2px;
+        }
+    }
+    
+    
+    // scroll ---------------------------------------------
+    
+    .overflow-y-auto{
+        overscroll-behavior: contain;
+    }
+    
+    .body-opened-modal{
+        // position: fixed;
+        overflow: hidden;
+        .bg-gradient-main-translucent, .bg-dark-translucent, .bg-light-translucent{
+            backdrop-filter: unset;
+        }
+    }
+    
+    .backdrop-filter-none{
+        backdrop-filter: unset;
+    }
+    
+    // list-group-item ---------------------------------------------
+    
+    .list-group-item{
+        outline: none !important;
+    }
+    
+    
+    // reset ---------------------------------------------
+    
+    @media only screen and (max-width: 992px) {
+        body{
+            overflow: visible;
+        }
+    }
+}

package/style/scss/Layout/LayoutProject.scss

@@ -118,9 +118,5 @@ $aside-transition: .5s;
 .thead-sticky{
     position: sticky;
     top: 2.7rem;
-    z-index: 10;
+    z-index: $zindex-dropdown + 2;
 }
-
-.modal-long-content .overflow-y-auto{
-    height: 75vh;
-}

package/style/scss/Layout/LayoutTwoColumn.scss

@@ -1,14 +1,14 @@
 @import "../Settings/basic-import";
-html, body, #app,
+html, body, #app.layout-two-column,
 #col-aside, #col-main{
     height: 100%;
 }
 
-body, #app{
+body, #app.layout-two-column{
     overflow: hidden;
 }
 
-#app{
+#app.layout-two-column{
     display: flex;
     flex-direction: row-reverse;
 }

package/style/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);

package/style/scss/Settings/_basic-import.scss

@@ -1,5 +1,6 @@
-@import "../Bootstrap/functions";
-@import "../Bootstrap/mixins";
+@import "../../../../bootstrap/scss/functions";
+@import "../../../../bootstrap/scss/mixins";
 @import "./bs-variables";
 @import "./custom-variables";
+@import "./color-mode";
 @import "./Mixins";