ol-wfst 4.4.0 → 5.1.0

package/lib/style/scss/ol-wfst.scss

@@ -2,254 +2,769 @@
 @import 'variables';
 @import '~bootstrap/scss/mixins';
 
-.ol-wfst--input-field-container {
-    display: inline-block;
-    width: 49%;
-    padding: 5px;
-    margin-bottom: 10px;
-}
-.ol-wfst--input-field-label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 4px;
-}
-.ol-wfst--input-field-input {
-    width: 100%;
-    padding: 5px;
-    border: 1px solid black;
-    border-radius: 3px;
-}
-.ol-wfst--edit-button-cnt {
-    display: inline-block;
-    margin: 0 5px;
-}
-.ol-wfst--edit-button {
-    outline: 0;
-    padding: 8px;
-    height: 38px;
-    width: 38px;
-    font-size: 12px;
-    background: $btnBack;
-    border: 1px solid #b3b3b3;
-    border-radius: 50%;
-    box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
-    cursor: pointer;
-
-    &:hover {
-        background: $btnHover;
-    }
-    &:active {
-        background: $btnBackActive;
-        transform: translateY(1px);
-    }
-
-    img {
-        fill: #333;
-        width: 20px;
-        height: 20px;
+// clase general aplicada al mapa
+.ol-wfst--map {
+    --ol-subtle-background-color: transparent;
+
+    .ol-control {
+        button {
+            cursor: pointer;
+        }
+
+        &.ol-zoom {
+            top: inherit;
+            left: inherit;
+            bottom: 5em;
+            right: 0.5em;
+        }
+
+        &.ol-wfst--fullscreen {
+            top: auto;
+            left: auto;
+            right: 0.5em;
+            bottom: 18px;
+
+            button {
+                background: #fff;
+                border-radius: $borderRadius;
+                outline: 0;
+                width: 32px;
+                height: 32px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+
+                svg {
+                    width: 20px;
+                    height: 20px;
+                    pointer-events: none;
+                }
+
+                &:hover,
+                &:active {
+                    opacity: 0.95;
+                }
+                &:active {
+                    transform: translateY(1px);
+                }
+            }
+        }
     }
-}
 
-.ol-wfst--changes-control {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    right: 0;
-    transform: translateX(-50%);
-    max-width: 290px;
-    width: 90%;
-    background: $changesBackground;
-    border: 1px solid #969696;
-    border-top: 0;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.529);
-    border-radius: 0 0 $borderRadius $borderRadius;
-    padding: 10px;
-}
+    .ol-box.ol-wfst--dragbox {
+        border: 2px dashed #ffc800;
+        background-color: rgba(255, 200, 0, 0.1);
+        border-radius: 0;
+    }
 
-.ol-wfst--changes-control-el {
-    text-align: center;
-    button {
+    .ol-wfst--edit-button-cnt {
+        display: inline-block;
         margin: 0 5px;
     }
-}
 
-.ol-wfst--changes-control-id {
-    margin-bottom: 10px;
-    font-size: 12px;
-    color: #fff;
-}
-.ol-wfst--tools-control {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    background-color: #fff;
-    box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
-    border: 1px solid #a9a9a9bb;
-    border-radius: $borderRadius;
-}
+    .ol-wfst--edit-button {
+        outline: 0;
+        padding: 8px;
+        height: 38px;
+        width: 38px;
+        font-size: 12px;
+        background: $btnBack;
+        border: 1px solid #b3b3b3;
+        border-radius: 50%;
+        box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
+        cursor: pointer;
 
-.btn.btn-third {
-    float: left;
-    color: $btnDelete;
-}
+        &:hover {
+            background: $btnHover;
+        }
+        &:active {
+            background: $btnBackActive;
+            transform: translateY(1px);
+        }
 
-.ol-wfst--layer-not-visible {
-    opacity: 0.5 !important;
-    font-style: italic;
-}
+        svg {
+            fill: #333;
+            width: 20px;
+            height: 20px;
+        }
+    }
 
-.wfst--layer-control {
-    position: relative;
-    padding: 5px 10px;
+    .ol-wfst--extend-button-cnt {
+        display: inline-block;
 
-    &.ol-wfst--selected-on {
-        background-color: $layerSelected !important;
-    }
-    &:hover,
-    &:active {
-        background-color: $layerHover;
+        .ol-wfst--extend-button {
+            outline: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            width: 24px;
+            height: 24px;
+            background: $btnBack;
+            border: 1px solid #b3b3b3;
+            border-radius: 50%;
+            box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
+            cursor: pointer;
+
+            &:hover {
+                background: $btnHover;
+            }
+            &:active {
+                background: $btnBackActive;
+                transform: translateY(1px);
+            }
+
+            svg {
+                fill: #333;
+                width: 16px;
+                height: 16px;
+            }
+        }
     }
 
-    input[type='radio'] {
-        display: none;
+    .ol-wfst--changes-control {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        z-index: 10;
+        max-width: 320px;
+        width: 90%;
+        background: $changesBackground;
+        color: $changesText;
+        border: 1px solid rgb(0 0 0 / 18%);
+        border-top: 0;
+        box-shadow:
+            0 2px 6px rgb(0 0 0 / 20%),
+            0 8px 24px rgb(0 0 0 / 35%);
+        border-radius: 0 0 $borderRadius $borderRadius;
+        padding: 12px 14px 14px;
+        animation: ol-wfst--slide-down 0.28s ease-out;
+
+        @keyframes ol-wfst--slide-down {
+            from {
+                opacity: 0;
+                transform: translate(-50%, -10px);
+            }
+            to {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+        }
+
+        .ol-wfst--changes-control-el {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+
+            .ol-wfst--changes-control-id {
+                flex-basis: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+                margin-bottom: 8px;
+                padding-bottom: 10px;
+                border-bottom: 1px solid rgb(255 255 255 / 25%);
+                font-size: 12px;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.4px;
+                color: $changesText;
+
+                b {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 6px;
+
+                    &::before {
+                        content: '';
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        background: currentColor;
+                        animation: ol-wfst--pulse 1.6s infinite;
+                    }
+                }
+
+                @keyframes ol-wfst--pulse {
+                    0% {
+                        box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
+                    }
+                    70% {
+                        box-shadow: 0 0 0 6px rgb(255 255 255 / 0%);
+                    }
+                    100% {
+                        box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
+                    }
+                }
+
+                i {
+                    font-style: normal;
+                    font-family:
+                        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+                    font-size: 11px;
+                    font-weight: 500;
+                    text-transform: none;
+                    letter-spacing: 0;
+                    background: rgb(255 255 255 / 22%);
+                    border-radius: 999px;
+                    padding: 2px 10px;
+                    max-width: 180px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+
+            button {
+                margin: 0;
+                transition:
+                    transform 0.12s ease,
+                    box-shadow 0.12s ease,
+                    filter 0.12s ease;
+
+                &:hover {
+                    box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
+                    filter: brightness(1.05);
+                }
+
+                &:active {
+                    transform: translateY(-1px);
+                    box-shadow: none;
+                    filter: brightness(0.97);
+                }
+
+                &:first-of-type {
+                    margin-right: auto;
+                }
+            }
+
+            .btn-danger-outline {
+                color: rgb(255 255 255 / 90%);
+                border: 1px solid rgb(255 255 255 / 55%);
+                background: transparent;
+
+                &:hover {
+                    background: rgb(255 255 255 / 15%);
+                    box-shadow: none;
+                }
+                &:active {
+                    background: rgb(255 255 255 / 25%);
+                }
+            }
+        }
     }
-}
 
-.wfst--tools-control--select-layers {
-    .wfst--layer-control:not(.ol-wfst--selected-on) label {
-        cursor: pointer;
+    .ol-wfst--tools-control {
+        position: absolute;
+        top: 0.5em;
+        left: 0.5em;
+
+        &.ol-wfst--controls--hidden {
+            display: none;
+        }
+
+        .ol-wfst--tools-control-btn {
+            border-radius: $borderRadius;
+            outline: 0;
+            width: 40px;
+            height: 32px;
+            display: inline-block;
+            text-align: center;
+            vertical-align: middle;
+            cursor: pointer;
+            border: 1px solid #c0c0c0;
+            background-color: #fff;
+
+            &.wfst--active {
+                background-color: $btnActive !important;
+                opacity: 1;
+            }
+            &:hover,
+            &:active {
+                background-color: $btnHover;
+                opacity: 0.95;
+            }
+            &:active {
+                transform: translateY(1px);
+            }
+
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .wfst--tools-control--head {
+            position: absolute;
+            background: #dddddd;
+            padding: 10px;
+            border: 1px solid #a9a9a9bb;
+            border-radius: $borderRadius;
+            box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
+            display: flex;
+            pointer-events: auto;
+            gap: 6px;
+
+            label {
+                cursor: pointer;
+            }
+
+            > * {
+                display: flex;
+            }
+        }
+
+        .ol-wfst--tools-control-select-cnt {
+            font-size: 0;
+
+            &:not(:first-child) {
+                margin-left: 6px;
+            }
+        }
+
+        .ol-wfst--tools-control-btn-select,
+        .ol-wfst--tools-control-btn-select-box,
+        .ol-wfst--tools-control-btn-select-freehand {
+            width: 34px;
+            padding: 0;
+            border-radius: 0;
+        }
+
+        .ol-wfst--tools-control-btn-select {
+            border-radius: $borderRadius 0 0 $borderRadius;
+
+            svg {
+                width: 11px;
+                height: auto;
+            }
+        }
+
+        .ol-wfst--tools-control-btn-select-box {
+            border-left: 0;
+        }
+
+        .ol-wfst--tools-control-btn-select-freehand {
+            border-left: 0;
+            border-radius: 0 $borderRadius $borderRadius 0;
+        }
+
+        .ol-wfst--tools-control-query-cnt {
+            .ol-wfst--tools-control-btn-query {
+                border-radius: $borderRadius;
+            }
+
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .ol-wfst--tools-control-btn-upload {
+            padding: 3px;
+        }
+        .wfst--tools-control--select-draw {
+            outline: 0;
+            border: 1px solid #c0c0c0;
+            border-radius: $borderRadius;
+            padding: 0 3px;
+            height: 32px;
+            background: #f7f7f7;
+            cursor: pointer;
+            pointer-events: none;
+            opacity: 0.5;
+            vertical-align: middle;
+            font-size: 0.9em;
+            border-left: 0;
+            border-radius: 0 $borderRadius $borderRadius 0;
+        }
+        .ol-wfst--tools-control-btn-draw {
+            border-radius: $borderRadius 0 0 $borderRadius;
+            opacity: 0.7;
+        }
+
+        #ol-wfst--upload {
+            display: none;
+            visibility: hidden;
+        }
     }
-    label {
+
+    .ol-wfst--layers-control {
+        font-size: 13px;
         position: absolute;
-        left: 30px;
-        right: 0;
+        left: 10px;
+        bottom: 10px;
+        pointer-events: auto;
+
+        .ol-wfst--layer-not-visible {
+            opacity: 0.5 !important;
+            font-style: italic;
+        }
+
+        .ol-wfst--layer-control-visible {
+            display: inline-block;
+            position: relative;
+            z-index: 999;
+
+            svg {
+                width: 14px;
+                height: 14px;
+            }
+            .ol-wfst--layer-control-visible -btn {
+                opacity: 0.6;
+                cursor: pointer;
+            }
+            .ol-wfst--layer-control-visible -btn:hover {
+                opacity: 0.9;
+            }
+        }
+
+        .wfst--tools-control--select-layers {
+            border-radius: $borderRadius;
+            border: 1px solid #a9a9a9bb;
+            box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
+            background-color: #fff;
+            overflow: hidden;
+
+            .wfst--tools-control--select-layers-title {
+                padding: 5px 10px;
+                font-weight: bold;
+                border-bottom: 1px solid #a9a9a9bb;
+                background-color: #dddddd;
+            }
+
+            .wfst--tools-control--select-layers-list {
+                max-height: 150px;
+                overflow-y: auto;
+            }
+
+            .wfst--layer-control:not(.ol-wfst--selected-on) label {
+                cursor: pointer;
+            }
+        }
+
+        .wfst--layer-control {
+            position: relative;
+            min-width: 200px;
+            opacity: 0.7;
+            display: flex;
+
+            label {
+                width: 100%;
+                padding: 5px 10px;
+                display: flex;
+                gap: 6px;
+            }
+
+            &.ol-wfst--visible-on {
+                opacity: 1;
+            }
+
+            &.ol-wfst--selected-on {
+                background-color: $layerSelected !important;
+            }
+
+            &:hover,
+            &:active {
+                background-color: $layerHover;
+            }
+
+            input[type='radio'] {
+                display: none;
+            }
+        }
+
+        .ol-wfst--visible-btn-on {
+            display: none;
+        }
+
+        .ol-wfst--visible-on {
+            .ol-wfst--visible-btn-on {
+                display: block;
+            }
+            .ol-wfst--visible-btn-off {
+                display: none;
+            }
+        }
+
+        .ol-wfst--visible-btn-off {
+            display: block;
+        }
     }
-}
 
-.ol-wfst--tools-control-btn {
-    background: #ffffff;
-    border-radius: $borderRadius;
-    outline: 0;
-    width: 40px;
-    height: 32px;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    border: 1px solid #c0c0c0;
-
-    &.wfst--active {
-        background-color: $btnActive !important;
+    .draw-mode .wfst--tools-control--select-draw {
+        pointer-events: inherit;
         opacity: 1;
+        background: #fffab5;
     }
-    &:hover,
-    &:active {
-        background-color: $btnHover;
-        opacity: 0.95;
-    }
-    &:active {
-        transform: translateY(1px);
+
+    .ol-wfst--tools-control--loading {
+        display: none;
+        position: absolute;
+        top: -10px;
+        width: 100%;
+        height: 4px;
+        overflow: hidden;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        box-shadow: 0 0 4px rgb(0 0 0 / 15%);
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 35%;
+            height: 100%;
+            background: $primaryColor;
+            border-radius: inherit;
+            animation: ol-wfst-loading-sweep 1.1s ease-in-out infinite;
+        }
     }
 
-    img {
-        width: 20px;
-        height: 20px;
+    @keyframes ol-wfst-loading-sweep {
+        0% {
+            transform: translateX(-100%);
+        }
+        100% {
+            transform: translateX(300%);
+        }
+    }
+    .ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
+        display: block;
     }
-}
 
-.wfst--tools-control--head {
-    background: #dddddd;
-    padding: 10px;
-    border-bottom: 1px solid #a9a9a9bb;
-    border-radius: $borderRadius $borderRadius 0 0;
+    .ol-wfst--query-popup {
+        position: relative;
+        width: 260px;
+        max-width: 280px;
+        background: $btnBack;
+        border: 1px solid #a9a9a9;
+        border-radius: $borderRadius;
+        box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
+        font-size: 12px;
+        color: #333;
+        overflow: hidden;
 
-    > * {
-        display: inline-block;
+        .ol-wfst--query-popup-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 6px 8px;
+            background: #f2f2f2;
+            border-bottom: 1px solid #d9d9d9;
+        }
+
+        .ol-wfst--query-popup-title {
+            font-weight: 600;
+            font-size: 12px;
+        }
+
+        .ol-wfst--query-popup-close {
+            outline: 0;
+            border: 0;
+            background: transparent;
+            cursor: pointer;
+            font-size: 18px;
+            line-height: 1;
+            color: #555;
+            padding: 0 2px;
+
+            &:hover {
+                color: #000;
+            }
+        }
+
+        .ol-wfst--query-popup-subtitle {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+            padding: 6px 10px;
+            border-bottom: 1px solid #efefef;
+
+            b {
+                font-weight: 600;
+            }
+
+            i {
+                font-style: normal;
+                font-family:
+                    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+                font-size: 11px;
+                color: #777;
+                max-width: 150px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .ol-wfst--query-popup-body {
+            max-height: 220px;
+            overflow-y: auto;
+            padding: 4px 0;
+        }
+
+        .ol-wfst--query-popup-row {
+            display: flex;
+            gap: 8px;
+            padding: 3px 10px;
+            word-break: break-word;
+
+            &:nth-child(odd) {
+                background: #fafafa;
+            }
+        }
+
+        .ol-wfst--query-popup-key {
+            flex: 0 0 35%;
+            font-weight: 600;
+            color: #555;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .ol-wfst--query-popup-value {
+            flex: 1;
+            color: #222;
+        }
     }
 }
 
-.ol-wfst--tools-control-draw-cnt:not(:first-child) {
-    margin-left: 6px;
-}
+// ventana modal que esta fuera del mapa
+.modal {
+    .ol-wfst--edit-modal-notice {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 12px;
+        margin-bottom: 12px;
+        border: 1px solid #ffc107;
+        border-radius: $borderRadius;
+        background: #fff8e1;
+        color: #6b5300;
+        font-size: 13px;
+        font-weight: 500;
+    }
+    .ol-wfst--edit-modal-notice-txt {
+        flex: 1;
+    }
+    .ol-wfst--edit-modal-toolbar-btn {
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        padding: 0;
+        width: 26px;
+        height: 26px;
+        background: $btnBack;
+        border: 1px solid #b3b3b3;
+        border-radius: $borderRadius;
+        cursor: pointer;
 
-.ol-wfst--tools-control-btn-upload {
-    padding: 3px;
-}
-.wfst--tools-control--select-draw {
-    outline: 0;
-    border: 1px solid #c0c0c0;
-    border-radius: $borderRadius;
-    padding: 0 3px;
-    height: 32px;
-    background: #f7f7f7;
-    cursor: pointer;
-    pointer-events: none;
-    opacity: 0.5;
-    vertical-align: middle;
-    font-size: 0.9em;
-    border-left: 0;
-    border-radius: 0 $borderRadius $borderRadius 0;
-}
-.ol-wfst--tools-control-btn-draw {
-    border-radius: $borderRadius 0 0 $borderRadius;
-    opacity: 0.7;
-}
-.draw-mode .wfst--tools-control--select-draw {
-    pointer-events: inherit;
-    opacity: 1;
-    background: #fffab5;
-}
-.wfst--tools-control--head label {
-    cursor: pointer;
-}
+        &:hover {
+            background: $btnHover;
+        }
+        &:active {
+            background: $btnBackActive;
+            transform: translateY(1px);
+        }
 
-#ol-wfst--upload {
-    display: none;
-    visibility: hidden;
-}
-.ol-wfst--tools-control--loading {
-    display: none;
-    position: absolute;
-    top: -25px;
-}
-.ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
-    display: block;
-}
-.ol-wfst--tools-control-visible {
-    display: inline-block;
-}
-.ol-wfst--tools-control-visible img {
-    width: 14px;
-    height: 14px;
-}
-.ol-wfst--tools-control-visible-btn {
-    opacity: 0.6;
-    cursor: pointer;
-}
-.ol-wfst--tools-control-visible-btn:hover {
-    opacity: 0.9;
-}
-.wfst--layer-control {
-    opacity: 0.7;
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+    .modal-dialog {
+        &.ol-wfst--edit-table-modal {
+            --bs-modal-width: min(90vw, 1400px);
+            width: min(90vw, 1400px);
+            max-width: min(90vw, 1400px);
+        }
 
-    &.ol-wfst--visible-on {
-        opacity: 1;
+        .btn-danger:first-child {
+            margin-right: auto;
+        }
     }
-}
 
-.ol-wfst--visible-btn-on {
-    display: none;
-}
+    .ol-wfst--edit-table-wrap {
+        overflow-x: auto;
+        overflow-y: auto;
+        max-height: 60vh;
+        border: 1px solid #dddddd;
+        border-radius: $borderRadius;
+    }
+
+    .ol-wfst--edit-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
 
-.ol-wfst--visible-on {
-    .ol-wfst--visible-btn-on {
+        th,
+        td {
+            border: 1px solid #dddddd;
+            padding: 4px 6px;
+            text-align: left;
+            vertical-align: middle;
+            white-space: nowrap;
+        }
+
+        th {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            background: #f2f2f2;
+            font-weight: 600;
+        }
+
+        .ol-wfst--input-field-input {
+            min-width: 120px;
+            padding: 2px 4px;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+
+            &:focus {
+                outline: 1px solid #86b7fe;
+                background: #f8fbff;
+            }
+        }
+    }
+    .ol-wfst--edit-table-fid,
+    .ol-wfst--edit-table-geom {
+        font-weight: 600;
+        color: #555;
+    }
+    .ol-wfst--edit-table-geom {
+        font-style: italic;
+        font-size: 12px;
+        color: #777;
+    }
+    .ol-wfst--input-field-container {
+        display: inline-block;
+        width: 49%;
+        padding: 5px;
+        margin-bottom: 10px;
+    }
+    .ol-wfst--input-field-label {
         display: block;
+        font-weight: 500;
+        margin-bottom: 4px;
     }
-    .ol-wfst--visible-btn-off {
-        display: none;
+    .ol-wfst--input-field-input {
+        width: 100%;
+        padding: 5px;
+        border: 1px solid black;
+        border-radius: 3px;
+    }
+    .ol-wfst--input-field-input.ol-wfst--input-multiple::placeholder {
+        font-style: italic;
+        color: #888;
     }
-}
-
-.ol-wfst--visible-btn-off {
-    display: block;
 }