datafolder 1.0.0

package/static/w2ui/src/less/src/sidebar.less

@@ -0,0 +1,343 @@
+/*************************************************
+* ---- Sidebar ----
+*/
+
+.w2ui-sidebar {
+    position: relative;
+    cursor: default;
+    overflow: hidden;
+    background-color: #fbfbfb;
+    .box-sizing(border-box);
+
+    * {
+        .box-sizing;
+    }
+
+    > div {
+        position: absolute;
+        overflow: hidden;
+    }
+
+    .w2ui-sidebar-top {
+        position: absolute;
+        z-index: 2;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+
+        .w2ui-flat-left, .w2ui-flat-right {
+            position: absolute;
+            right: 2px;
+            top: 2px;
+            height: 24px;
+            padding: 5px;
+            border-radius: 2px;
+            background-size: 16px 12px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-color: #fbfbfb;
+            &:hover {
+                background-color: #f1f1f1;
+            }
+        }
+        .w2ui-flat-left {
+            left: auto;
+            width: 25px;
+            background-image: @image-less;
+        }
+        .w2ui-flat-right {
+            left: 2px;
+            width: auto;
+            background-image: @image-more;
+        }
+    }
+
+    .w2ui-sidebar-bottom {
+        position: absolute;
+        z-index: 2;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+    }
+
+    .w2ui-sidebar-body {
+        position: absolute;
+        z-index: 1;
+        overflow: auto;
+        top: 0px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        padding: 2px 0px;
+        .user-select;
+        .w2ui-node {
+            position: relative;
+            border-radius: 4px;
+            margin: 0px 3px;
+            padding: 1px 0px;
+            border: 1px solid transparent;
+            .w2ui-node-text{
+                color: black;
+                text-shadow: 0px 0px 0px #fff;
+                pointer-events: none;
+                &:hover {
+                    color: inherit;
+                }
+            }
+            .w2ui-node-image > span {
+                color: #737485;
+            }
+
+            .w2ui-node-handle {
+                display: inline-block;
+                padding: 0px;
+                margin: 0px;
+                height: 100%;
+                position: absolute;
+            }
+
+            &:hover {
+                background-color: #f1f1f1;
+            }
+
+            // font icon default
+            .w2ui-node-image {
+                width: 22px;
+                text-align: center;
+                pointer-events: none;
+                > span {
+                    color: #888;
+                }
+            }
+
+            &.w2ui-disabled,
+            &.w2ui-disabled:hover {
+                background: transparent;
+
+                .w2ui-node-text,
+                .w2ui-node-image,
+                .w2ui-node-image > span {
+                    .opacity(0.4);
+                    color: black;
+                    text-shadow: 0px 0px 0px #fff;
+                }
+            }
+
+            // hide badges when editing nodes
+            &.w2ui-editing .w2ui-node-badge {
+                display: none;
+            }
+
+            &.w2ui-reorder-empty {
+                border: 1px dashed silver;
+                background-color: #fbfcfe;
+            }
+            &.w2ui-ghost {
+                position: absolute;
+                z-index: 999999;
+                pointer-events: none;
+                width: calc(100% - 4px);
+                opacity: 0.8;
+                background-color: #f3f3f3;
+                border-top: 1px dotted silver;
+                border-bottom: 1px dotted silver;
+                > * {
+                    pointer-events: none;
+                }
+            }
+
+            // enable pointer events for all inputs inside node
+            input, button {
+                pointer-events: auto;
+            }
+        }
+
+        .w2ui-ghost-line {
+            position: absolute;
+            z-index: 999999;
+            pointer-events: none;
+            width: calc(100% - 4px);
+            background-color: #82a6ff;
+            height: 2px;
+        }
+
+        .w2ui-selected,
+        .w2ui-selected:hover {
+            background-color: #f3f5ff;
+            position: relative;
+            border: 1px solid #dee1ff;
+
+            .w2ui-node-text,
+            .w2ui-node-image,
+            .w2ui-node-image > span {
+                color: inherit;
+                text-shadow: 0px 0px 0px #fff;
+            }
+        }
+
+        .w2ui-selected:before {
+            content: "";
+            border: 1px dashed transparent;
+            border-radius: 4px;
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            right: -1px;
+            pointer-events: none;
+        }
+
+        .w2ui-node-text {
+            white-space: nowrap;
+            padding: 5px 0px 5px 3px;
+            margin: 1px 0px 1px 22px;
+            position: relative;
+            z-index: 1;
+            font-size: 12px;
+            &.no-icon {
+                margin-left: 0px;
+            }
+        }
+
+        .w2ui-node-group {
+            white-space: nowrap;
+            overflow: hidden;
+            padding: 10px 0px 10px 10px;
+            margin: 0px;
+            cursor: default;
+            color: #6a5e88;
+            background-color: transparent;
+
+            :nth-child(1) {
+                /* show / hide link */
+                margin-right: 10px;
+                float: right;
+                color: transparent;
+            }
+
+            :nth-child(2) {
+                /* title text */
+                font-weight: normal;
+                text-transform: uppercase;
+            }
+        }
+
+        .w2ui-node-sub {
+            overflow: hidden;
+            .w2ui-reorder-empty-sub {
+                border: 1px dashed silver;
+                background-color: #fbfcfe;
+                height: calc(100% - 4px);
+                margin: 2px 4px;
+            }
+        }
+
+        .w2ui-node-data {
+            padding: 2px;
+
+            .w2ui-node-image {
+                padding: 4px 0px 0px 0px;
+                float: left;
+                // for font-awesome icons
+                & > span {
+                    font-size: 16px;
+                    color: #737485;
+                    text-shadow: 0px 0px 0px #fff;
+                }
+                &.w2ui-icon {
+                    margin-top: 3px;
+                }
+            }
+
+            .w2ui-node-badge {
+                display: flex;
+                flex-direction: row;
+                float: right;
+                width: auto;
+                padding: 2px;
+                margin: 3px 4px -2px 0;
+                color: #666;
+                text-shadow: 1px 1px 0px #FFF;
+                position: relative;
+                z-index: 2;
+                &.w2ui-node-count {
+                    padding: 2px 7px;
+                    border: 1px solid #F6FCF4;
+                    border-radius: 20px;
+                    box-shadow: 0px 0px 2px #474545;
+                    background-color: #F2F8F0;
+                    margin-right: 0px !important;
+                }
+            }
+
+            .w2ui-collapsed,
+            .w2ui-expanded {
+                float: right;
+                width: 15px;
+                height: 25px;
+                position: relative;
+                z-index: 2;
+                padding-left: 5px;
+                border-radius: 4px;
+                &:hover {
+                    background-color: #e1e1e1
+                }
+                &.w2ui-left-toggle {
+                    float: left;
+                    margin-left: -14px;
+                }
+                span {
+                    border-color: transparent;
+                    background-color: transparent;
+                    box-shadow: none;
+                    padding: 2px 5px;
+                    border-radius: 0px;
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        border-left: 5px solid #808080;
+                        border-top: 5px solid transparent;
+                        border-bottom: 5px solid transparent;
+                        transform: rotateZ(-90deg);
+                        pointer-events: none;
+                        margin-left: -4px;
+                        margin-top: 7px;
+                    }
+                    &:hover {
+                        border-color: transparent;
+                        background-color: transparent;
+                    }
+                }
+            }
+
+            .w2ui-collapsed span:after {
+                transform: rotateZ(90deg);
+            }
+         }
+
+        // for flat sidebar
+        .w2ui-node-flat {
+            min-height: 32px;
+            margin-bottom: 4px;
+            .w2ui-node-data {
+                display: block;
+                padding: 4px 2px;
+                text-align: center;
+            }
+            .w2ui-node-image {
+                float: none;
+                text-align: center;
+                width: auto;
+                padding: 1px 0px;
+                & > span {
+                    font-size: 16px;
+                    color: #737485;
+                    text-shadow: 0px 0px 0px #fff;
+                }
+                &.w2ui-icon {
+                    width: 21px;
+                }
+            }
+        }
+     }
+}

package/static/w2ui/src/less/src/tabs.less

@@ -0,0 +1,145 @@
+/*************************************************
+* ---- Tabs ----
+*/
+
+.w2ui-tabs {
+    cursor: default;
+    overflow: hidden;
+    position: relative;
+    background-color: #fff;
+    min-height: 28px;
+    padding: 0px;
+    margin: 0px;
+
+    .w2ui-tabs-line {
+        position: absolute;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        z-index: 1;
+        border: 0;
+        height: 1px;
+        background-color: #e2e2e2;
+    }
+
+    .w2ui-scroll-left,
+    .w2ui-scroll-right {
+        z-index: 30;
+        display: flex;
+    }
+
+    .w2ui-scroll-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+        padding: 0 2px;
+        // position: relative;
+        // height: 32px;
+        .w2ui-tab {
+            height: 28px;
+            position: relative;
+            z-index: 20;
+            padding: 7px 20px 4px 20px;
+            text-align: center;
+            color: black;
+            background-color: transparent;
+            border: 2px solid transparent;
+            white-space: nowrap;
+            margin: 0px 1px;
+            border-radius: 0;
+            cursor: default;
+            user-select: none;
+            &.active {
+                color: #0175ff;
+                background-color: transparent;
+                border: 2px solid transparent;
+                border-bottom: 2px solid #0175ff;
+                margin-bottom: 0px;
+                .w2ui-tab-icon {
+                    color: #0175ff;
+                }
+            }
+            &:hover {
+                background-color: #dfe1e630;
+            }
+            &.moving {
+                color: inherit;
+                background-color: #eee;
+                border: 2px solid transparent;
+                border-radius: 0px;
+                margin-bottom: 0px;
+            }
+            &.closable {
+                padding: 6px 28px 6px 20px;
+            }
+            .w2ui-tab-icon {
+                color: #888889;
+                margin-right: 8px;
+                display: inline-block;
+                font-size: 13px;
+                margin-top: -1px;
+            }
+            .w2ui-tab-close {
+                position: absolute;
+                right: 3px;
+                top: 5px;
+                color: #555;
+                float: right;
+                margin-top: -3px;
+                padding: 2px 4px;
+                width: 20px;
+                height: 20px;
+                opacity: 0.6;
+                border: 0px;
+                border-top: 3px solid transparent;
+                border-radius: 3px;
+                &:hover {
+                    background-color: #f9e7e7;
+                    color: red;
+                    opacity: 1;
+                    font-weight: bold;
+                }
+                &:active {
+                    background-color: #ffd1d1;
+                }
+                &:before {
+                    position: relative;
+                    top: -2px;
+                    left: 0px;
+                    color: inherit;
+                    text-shadow: inherit;
+                    content: 'x';
+                }
+            }
+        }
+
+        .w2ui-tabs-right {
+            padding: 8px 2px;
+            width: 100%;
+            text-align: right;
+            white-space: nowrap;
+        }
+    }
+
+    // upwards tabs
+    &.w2ui-tabs-up {
+        .w2ui-tabs-line {
+            top: 0px;
+            bottom: auto;
+        }
+        .w2ui-scroll-wrapper {
+            .w2ui-tab {
+                border: 2px solid transparent;
+                border-top: 2px solid transparent;
+                border-radius: 0 0 4px 4px;
+                &.active {
+                    border: 2px solid transparent;
+                    border-top: 2px solid #0175ff;
+                    margin-top: 0px;
+                }
+            }
+        }
+   }
+}

package/static/w2ui/src/less/src/toolbar.less

@@ -0,0 +1,219 @@
+/*************************************************
+* ---- Toolbar ----
+*/
+
+.w2ui-toolbar {
+    background-color: #f5f5f5;
+    user-select: none;
+    padding: 2px;
+
+    .w2ui-tb-line {
+        overflow: hidden;
+        position: relative;
+        min-height: 28px;
+        padding: 0;
+        margin: 0;
+    }
+
+    .disabled {
+        .opacity(0.3)
+    }
+
+    .w2ui-scroll-left,
+    .w2ui-scroll-right {
+        z-index: 30;
+        display: flex;
+    }
+
+    .w2ui-tb-line:nth-child(2),
+    .w2ui-tb-line:nth-child(3),
+    .w2ui-tb-line:nth-child(4) {
+        border-top: 1px solid #e7e7e7;
+        margin: 0;
+    }
+
+    .w2ui-scroll-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+        padding: 2px;
+
+        .w2ui-tb-button {
+            position: relative;
+            z-index: 20;
+            height: 30px;
+            min-width: 30px;
+            padding: 2px;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            color: black;
+            background-color: transparent;
+            white-space: nowrap;
+            margin: 0 1px;
+            cursor: default;
+            user-select: none;
+            flex-shrink: 0;
+            // border: 1px solid silver;
+
+            .w2ui-tb-icon {
+                float: left;
+                width: 22px;
+                margin: 4px 0 0 1px;
+                text-align: center;
+                > span {
+                    font-size: 15px;
+                    color: #8D99A7;
+                }
+            }
+            .w2ui-tb-text {
+                margin-left: 20px;
+                padding: 6px 5px 0 5px;
+
+                .w2ui-tb-color-box {
+                    display: inline-block;
+                    height: 13px;
+                    width: 13px;
+                    margin: 0 2px -2px 0;
+                    border-radius: 1px;
+                    border: 1px solid #fff;
+                    box-shadow: 0 0 1px #555;
+                }
+
+                .w2ui-tb-count {
+                    padding: 0 0 0 4px;
+                    > span {
+                        border: @menu-node-count-border;
+                        border-radius: 11px;
+                        width: auto;
+                        height: 18px;
+                        padding: 0 6px 1px 6px;
+                        background-color: @menu-node-count-background-color;
+                        color: @menu-node-count-color;
+                        box-shadow: @menu-node-count-shadow;
+                        text-shadow: @menu-node-count-text-shadow;
+                    }
+                }
+
+                .w2ui-tb-down {
+                    width: 10px;
+                    float: right;
+                    > span {
+                        display: inline-block;
+                        position: relative;
+                        top: 3px;
+                        left: 3px;
+                        border: 4px solid transparent;
+                        border-top: 5px solid #aeb6c0;
+                    }
+                }
+            }
+
+            &.over {
+                border: 1px solid transparent;
+                background-color: #eaeaed;
+                & .w2ui-tb-text {
+                    color: black;
+                }
+            }
+
+            &.checked {
+                border: 1px solid #d2d2d2;
+                background-color: white;
+                & .w2ui-tb-text {
+                    color: black;
+                }
+            }
+
+            &.down {
+                border: 1px solid #ccc;
+                background-color: #eaeaed;
+                & .w2ui-tb-text {
+                    color: #666;
+                }
+            }
+
+            &.no-icon .w2ui-tb-text {
+                margin-left: 0;
+            }
+        }
+
+        .w2ui-tb-right {
+            width: 100%;
+            text-align: right;
+            white-space: nowrap;
+        }
+
+        .w2ui-tb-break {
+            .linear-gradient-dark-center(#999);
+            width: 1px;
+            height: 24px;
+            padding: 0;
+            margin: 3px 6px;
+       }
+
+        .w2ui-tb-html {
+            white-space: nowrap;
+        }
+
+        .w2ui-tb-input {
+            padding: 1px;
+            .w2ui-input-label {
+                color: #474a51;
+            }
+            // such long selector is needed so that it would take priority over what's in .w2ui-reset and wouldn't require !important
+            input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]) {
+                width: 100px;
+                height: 26px;
+                padding: 5px;
+                &:focus {
+                    outline-color: #549eff;
+                }
+                &.w2ui-has-spinner {
+                    width: 95px;
+                    padding: 5px 30px;
+                }
+            }
+            input[type=range] {
+                position: relative;
+                top: 5px;
+            }
+            .w2ui-spinner-dec,
+            .w2ui-spinner-inc {
+                position: absolute;
+                padding-top: 2px;
+                margin: 2px;
+                background-color: #f9fafa;
+                width: 22px;
+                height: 22px;
+                font-size: 16px;
+                text-align: center;
+                color: #888;
+                &:hover {
+                    background-color: #e4e4e4;
+                    color: #222;
+                }
+                &:active {
+                    background-color: #d4d4d4;
+                    color: #000;
+                }
+            }
+            .w2ui-spinner-dec {
+                border-right: 1px solid #e0e0e0;
+                border-top-left-radius: 3px;
+                border-bottom-left-radius: 3px;
+            }
+            .w2ui-spinner-inc {
+                margin-left: -24px;
+                border-left: 1px solid #e0e0e0;
+                border-top-right-radius: 3px;
+                border-bottom-right-radius: 3px;
+            }
+        }
+
+       .w2ui-tb-spacer {
+            width: 100%;
+       }
+    }
+}