datafolder 1.0.0

package/static/w2ui/src/less/src/fields.less

@@ -0,0 +1,302 @@
+.w2field {
+    padding: 3px;
+    border-radius: 3px;
+    border: 1px solid silver;
+}
+
+.w2ui-field-helper {
+    position: absolute;
+    display: inline-block;
+    line-height: 100%;
+    pointer-events: none;
+    .user-select(none);
+
+    .w2ui-field-up {
+        position: absolute;
+        top: 0px;
+        padding: 2px 3px;
+        cursor: pointer;
+        pointer-events: all;
+    }
+
+    .w2ui-field-down {
+        position: absolute;
+        bottom: 0px;
+        padding: 2px 3px;
+        cursor: pointer;
+        pointer-events: all;
+    }
+
+    .arrow-up:hover {
+        border-bottom-color: #81C6FF;
+    }
+
+    .arrow-down:hover {
+        border-top-color: #81C6FF;
+    }
+
+    .w2ui-icon-search {
+        position: absolute;
+        margin: 8px 0px 0px -2px;
+        display: none;
+        color: #777777;
+        width: 21px !important;
+        font-size: 13px;
+
+        &.show-search {
+            display: block;
+        }
+    }
+
+    // enum list
+    &.w2ui-list {
+        color: @list-color;
+        position: absolute;
+        padding: 0px;
+        margin: 0px;
+        min-height: 28px;
+        overflow: auto;
+        border: @list-border;
+        border-radius: 3px;
+        font-size: 6px;    // need to be small for list
+        line-height: 100%;
+        box-sizing: border-box;
+        pointer-events: all;
+        background-color: #f7fafa;
+
+        &.has-focus,
+        &:focus-within {
+            outline: auto @input-focus-outline-color;
+            background-color: white;
+        }
+
+        input[type=text] {
+            .box-shadow;
+        }
+
+        .w2ui-multi-items {
+            position: absolute;
+            display: inline-block;
+            margin: 0px;
+            padding: 0px;
+            pointer-events: none;
+
+            .li-item {
+                pointer-events: all;
+                float: left;
+                margin: 3px 0px 0px 5px;
+                border-radius: 15px;
+                width: auto;
+                padding: 3px 24px 1px 12px;
+                border: @list-item-border;
+                background-color: @list-item-background-color;
+                white-space: nowrap;
+                cursor: default;
+                font-family: @list-item-font;
+                font-size: @list-item-font-size;
+                line-height: 100%;
+                height: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                box-sizing: border-box;
+
+                &:hover {
+                    background-color: darken(@list-item-background-color, 10%);
+                }
+
+                &:last-child {
+                    border-radius: 0px;
+                    border: 1px solid transparent;
+                    background-color: transparent;
+                    input {
+                        padding: 1px;
+                        padding-top: 0px;
+                        margin: 0px;
+                        border: 0px;
+                        outline: none;
+                        height: auto;
+                        line-height: 100%;
+                        font-size: inherit;
+                        font-family: inherit;
+                        background-color: transparent;
+                    }
+                }
+
+                .w2ui-icon {
+                    float: left;
+                    color: #828aa7;
+                    margin: 1px 2px 0 -6px;
+                }
+
+                .w2ui-list-remove {
+                    float: right;
+                    width: 16px;
+                    height: 16px;
+                    margin: -2px -20px 0px 0px;
+                    border-radius: 2px;
+                    font-size: 12px;
+                    border: 1px solid transparent;
+                    &:hover {
+                        background-color: #f6e5e5;
+                        border: 1px solid #fac2c2;
+                        color: red;
+                        opacity: 1;
+                    }
+                    &:before {
+                        position: relative;
+                        display: inline-block;
+                        left: 4px;
+                        opacity: 0.7;
+                        content: 'x';
+                        line-height: 1;
+                    }
+                }
+
+                > span.file-size {
+                    pointer-events: none;
+                    color: #777;
+                }
+            }
+            .li-search {
+                float: left;
+                margin: 0;
+                padding: 0;
+                input[type=text] {
+                    pointer-events: all;
+                    width: 0;
+                    height: 20px;
+                    padding: 3px 0 3px 0;
+                    margin: 3px 0 0 5px;
+                    border: 0;
+                    background-color: transparent;
+                    &:focus {
+                        outline: none;
+                        border: 0;
+                    }
+                }
+            }
+        }
+
+        .w2ui-multi-file {
+            position: absolute;
+            left: 0px;
+            right: 0px;
+            top: 0px;
+            bottom: 0px;
+        }
+
+        &.w2ui-readonly .w2ui-multi-items > .li-item:hover {
+            background-color: @list-item-background-color;
+        }
+
+        &.w2ui-file-dragover {
+            background-color: #E4FFDA;
+            border: 1px solid #93E07D;
+        }
+
+        // This a DROP ZONE, will be remove when first file dropped
+        .w2ui-enum-placeholder {
+            display: inline;
+            position: absolute;
+            pointer-events: none;
+            color: #999;
+            box-sizing: border-box;
+        }
+    }
+}
+
+// tooltip for file items
+.w2ui-overlay {
+    .w2ui-file-preview {
+        padding: 1px;
+        background-color: white;
+    }
+
+    .w2ui-file-info {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        color: white;
+        padding: 6px 0;
+
+        .file-caption {
+            text-align: right;
+            color: silver;
+            padding-right: 10px;
+        }
+
+        .file-value {
+            color: white;
+        }
+
+        .file-type {
+            max-width: 200px;
+            display: block-inline;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+.arrow-up {
+    background: none;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;  /* left arrow slant */
+    border-right: 4px solid transparent; /* right arrow slant */
+    border-bottom: 5px solid #777; /* bottom, add background color here */
+    font-size: 0;
+    line-height: 0;
+}
+
+.arrow-down {
+    background: none;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid #777;
+    font-size: 0;
+    line-height: 0;
+}
+
+.arrow-left {
+    background: none;
+    width: 0;
+    height: 0;
+    border-bottom: 4px solid transparent;  /* left arrow slant */
+    border-top: 4px solid transparent; /* right arrow slant */
+    border-right: 5px solid #777; /* bottom, add background color here */
+    font-size: 0;
+    line-height: 0;
+}
+
+.arrow-right {
+    background: none;
+    width: 0;
+    height: 0;
+    border-bottom: 4px solid transparent;  /* left arrow slant */
+    border-top: 4px solid transparent; /* right arrow slant */
+    border-left: 5px solid #777; /* bottom, add background color here */
+    font-size: 0;
+    line-height: 0;
+}
+
+.w2ui-select {
+    cursor: default;
+    color: black !important;
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAALCAQAAACnzwd+AAAAcklEQVR4AcXMsQFBQQDG4P9tAgC0gJYRQJZgKQMwCqCku6vVAAAA+NJHP4KHOk0aV2pRw61n4BBmyOxKQ8I4ehZeuhd3HTx6DQEGZ7sBfr2OOOOj3Yi43kMKs9sZknofOexqZ8npMygwWZTX51CipP+YA1OiZJbYYg9lAAAAAElFTkSuQmCC');
+    background-size: 17px 6px;
+    background-position: right center;
+    background-repeat: no-repeat;
+    &.has-focus {
+        outline: auto @input-focus-outline-color;
+        background-color: white !important;
+    }
+
+    &[readonly], &[disabled] {
+        background-image: none;
+        background-color: #f1f1f1 !important;
+        color: #777 !important;
+    }
+}

package/static/w2ui/src/less/src/form.less

@@ -0,0 +1,319 @@
+/*************************************************
+* ---- Forms ----
+*/
+
+@form-step-label: 20px;
+@form-step-field: 8;
+
+.w2ui-form {
+    position: relative;
+    color: @form-color;
+    background-color: @form-background-color;
+    border: @form-border;
+    border-radius: @form-border-radius;
+    padding: 0px;
+    overflow: hidden;
+
+    > .w2ui-form-box {
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .w2ui-form-header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 36px;
+        padding: 10px;
+        overflow: hidden;
+        font-size: 16px;
+        color: @form-header-color;
+        .linear-gradient-vertical(@form-header-linear-gradient-start, @form-header-linear-gradient-end);
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+        border-bottom: @form-header-border-bottom;
+    }
+
+    .w2ui-form-toolbar {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 2px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        border-bottom: @form-buttons-border-top;
+    }
+
+    .w2ui-form-tabs {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        height: 32px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        padding-top: 4px;
+        background-color: @form-tabs-background-color;
+        .w2ui-tab.active {
+            background-color: @form-background-color;
+        }
+    }
+
+    .w2ui-page {
+        position: absolute;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        padding: 10px 5px 0 5px;
+        border-left: @form-page-border;
+        border-right: @form-page-border;
+        background-color: @form-page-background-color;
+        border-radius: 3px;
+    }
+    .w2ui-column-container {
+        display: flex;
+        padding: 0;
+        .w2ui-column {
+            width: 100%;
+            &.col-0,
+            &.col-1,
+            &.col-2,
+            &.col-3,
+            &.col-4,
+            &.col-5,
+            &.col-6,
+            &.col-7,
+            &.col-8,
+            &.col-9,
+            &.col-10 {
+                padding: 0;
+                padding-left: 10px
+            }
+            &.col-0 {
+                padding-left: 0px;
+            }
+        }
+    }
+
+    .w2ui-field-columns {
+        display: flex;
+        flex-flow: row;
+    }
+
+    .w2ui-buttons {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        text-align: center;
+        border-top: @form-buttons-border-top;
+        border-bottom: @form-buttons-border-bottom;
+        background-color: @form-buttons-background-color;
+        padding: 15px 0px;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+
+        input[type="button"], button {
+            min-width: 80px;
+            margin-right: 5px;
+        }
+    }
+
+    input[type=checkbox]:not(.w2ui-toggle),
+    input[type=radio] {
+        margin-top: 4px;
+        margin-bottom: 4px;
+        width: 14px;
+        height: 14px;
+    }
+}
+
+// ==================================================
+// --- It is outside of the form on purpose
+
+.w2ui-group-title {
+    padding: 5px 2px 0px 5px;
+    color: #656164cc;
+    text-shadow: 1px 1px 2px rgb(253, 253, 253);
+    font-size: 120%;
+}
+
+.w2ui-group-fields {
+    background-color: @form-group-background-color;
+    margin: 5px 0px 14px 0px;
+    padding: 10px 5px;
+    border-top: @form-group-border;
+    border-bottom: @form-group-border;
+}
+
+.w2ui-field {
+    > label {
+        display: block;
+        float: left;
+        margin-top: 10px;
+        margin-bottom: 0px;
+        width: 120px;
+        padding: 0px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: right;
+        min-height: 20px;
+        color: #666;
+    }
+    > div {
+        /* do not include width */
+        margin-bottom: 3px;
+        margin-left: 128px;
+        padding: 4px;
+        min-height: 28px;
+        float: none;
+    }
+    .w2ui-form-switch {
+        display: inline-block;
+        position: relative;
+        max-width: 100%;
+        height: 34px;
+        margin-top: -5px;
+        padding: 0px;
+        border-radius: 2px;
+        background-color: transparent;
+
+        &.w2ui-tb-focus {
+            outline: 1px dashed gray;
+        }
+    }
+    &.w2ui-required > div {
+        position: relative;
+    }
+    &.w2ui-required:not(.w2ui-field-inline) > div::before {
+        content: '*';
+        position: absolute;
+        margin-top: 7px;
+        margin-left: -8px;
+        color: @form-required-color;
+    }
+    &.w2ui-required.w2ui-field-inline > div .w2ui-inline-label::after {
+        content: '*';
+        color: @form-required-color;
+    }
+    &.w2ui-disabled {
+        background-color: transparent !important;
+        // this is needed so that anchored fields will nto get disabled
+        > label,
+        &.w2ui-field-inline span.w2ui-inline-label {
+            opacity: 0.45;
+        }
+        > div {
+            & > input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
+            & > select,
+            & > textarea {
+                opacity: 0.45;
+                color: #777;
+                border: 1px solid #bdc0c3 !important;
+                background-color: #f3f3f3 !important;
+            }
+        }
+    }
+    > div > .w2ui-inline-label {
+        display: inline-block;
+        overflow: hidden;
+        text-align: right;
+    }
+    &.w2ui-span-none {
+        > label {
+            margin: 0;
+            padding: 5px 12px 0 4px;
+            display: block;
+            width: 98%;
+            text-align: left;
+        }
+        > div { margin-left: 0; }
+    }
+    .w2ui-anchor-span-none {
+        color: gray;
+        position: relative;
+        top: -15px;
+        left: 3px;
+    }
+    &.w2ui-span0 {
+        > label, > div > .w2ui-inline-label { display: none; }
+        > div { margin-left: 0; }
+    }
+    &.w2ui-span1 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 1); }
+        > div { margin-left: ((@form-step-label * 1) + @form-step-field); }
+    }
+    &.w2ui-span2 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 2); }
+        > div { margin-left: ((@form-step-label * 2) + @form-step-field); }
+    }
+    &.w2ui-span3 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 3); }
+        > div { margin-left: ((@form-step-label * 3) + @form-step-field); }
+    }
+    &.w2ui-span4 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 4); }
+        > div { margin-left: ((@form-step-label * 4) + @form-step-field); }
+    }
+    &.w2ui-span5 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 5); }
+        > div { margin-left: ((@form-step-label * 5) + @form-step-field); }
+    }
+    &.w2ui-span6 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 6); }
+        > div { margin-left: ((@form-step-label * 6) + @form-step-field); }
+    }
+    &.w2ui-span7 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 7); }
+        > div { margin-left: ((@form-step-label * 7) + @form-step-field); }
+    }
+    &.w2ui-span8 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 8); }
+        > div { margin-left: ((@form-step-label * 8) + @form-step-field); }
+    }
+    &.w2ui-span9 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 9); }
+        > div { margin-left: ((@form-step-label * 9) + @form-step-field); }
+    }
+    &.w2ui-span10 {
+        > label, > div > .w2ui-inline-label { width: (@form-step-label * 10); }
+        > div { margin-left: ((@form-step-label * 10) + @form-step-field); }
+    }
+    &.w2ui-field-inline {
+        display: inline;
+
+        > div {
+            display: inline;
+            margin: 0;
+            padding: 0;
+        }
+    }
+    .w2ui-box-label {
+        user-select: none;
+        vertical-align: middle;
+        & span, & input {
+            display: inline-block;
+            vertical-align: middle;
+        }
+        & span {
+            padding-left: 3px;
+        }
+        & input {
+            margin: 4px 0px 3px 0;
+        }
+    }
+}
+
+input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]).w2ui-error,
+textarea.w2ui-error {
+    border: @form-error-border;
+    background-color: @form-error-background-color;
+}