fwtoolkit 0.1.0-alpha.3 → 0.1.0-alpha.6

package/css/common.css

@@ -0,0 +1,183 @@
+body {
+    width: 100%;
+    height: 100%;
+    background-color: var(--main-background-color);
+    color: var(--main-text-color);
+    min-width: calc(380px - 100vw + 100%); /* to substract scrollbar width. */
+    overflow-y: hidden;
+}
+
+body.scrollable {
+    overflow-y: auto;
+}
+
+.fw-header {
+    width: 100%;
+    height: auto;
+    background-color: var(--cs-5-background);
+    z-index: 2;
+}
+
+.fw-container {
+    position: relative;
+    height: auto;
+    margin: 0 auto;
+    padding: 0 34px;
+    overflow: hidden;
+}
+
+.fw-contents {
+    position: relative;
+    width: auto;
+    height: auto;
+    min-width: 985px;
+    margin: 0 213px;
+    padding: 40px 8px 20px;
+}
+
+@media (width <= 1429px) {
+    .fw-contents {
+        min-width: unset;
+        margin: 0 auto;
+        max-width: 1004px;
+    }
+}
+
+.fw-contents h1 {
+    font-size: 2em;
+    font-weight: bold;
+    margin-bottom: 0.2em;
+}
+
+.fw-contents .errorlist {
+    border: 2px solid var(--error-border-color);
+    background-color: var(--error-background-color);
+    color: var(--error-text-color);
+    margin: 10px 0;
+    display: inline-block;
+    font-size: 1.4em;
+}
+
+.fw-contents .errorlist:empty {
+    display: none;
+}
+
+.fw-contents label[for="id-password1"],
+.fw-contents label[for="id-password2"] {
+    display: none;
+}
+
+.fw-contents input#id-password1,
+.fw-contents input#id-password2 {
+    margin: 10px 0;
+}
+
+table {
+    width: 100%;
+    text-align: left;
+}
+
+table .fw-inline {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    padding: 5px 0;
+}
+
+.fw-avatar {
+    border: solid 1px var(--cs-light-border);
+}
+
+.fw-string-avatar {
+    display: inline-block;
+    line-height: 1;
+    text-align: center;
+    text-transform: uppercase;
+    border-radius: 50%;
+    background-color: grey;
+    color: white;
+}
+
+.fw-string-avatar > span {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.fw-string-avatar::before,
+.fw-string-avatar::after {
+    display: inline-block;
+    width: 0;
+    padding-top: 100%;
+    vertical-align: middle;
+    content: "";
+}
+
+.fw-avatar-card {
+    display: block;
+}
+
+.fw-avatar-card .fw-avatar-card-avatar .fw-avatar,
+.fw-avatar-card .fw-avatar-card-avatar .fw-string-avatar {
+    width: 56px;
+    height: 56px;
+    font-size: 23px;
+}
+
+.fw-avatar-card-avatar {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.fw-avatar-card-name {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 8px;
+    font-size: 17px;
+}
+
+.fw-avatar-card-email {
+    font-size: 13px;
+    display: block;
+    padding-top: 6px;
+    color: var(--cs-white-text-secondary);
+}
+
+.ProseMirror span.placeholder::before {
+    color: var(--cs-white-placeholder-text);
+    content: attr(data-placeholder);
+    cursor: text;
+}
+
+.ProseMirror-focused span.placeholder.selected {
+    display: none;
+}
+
+.ProseMirror-focused
+    .ProseMirror:not(.ProseMirror-focused)
+    span.placeholder.selected {
+    display: inline;
+}
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+div.input {
+    box-sizing: border-box;
+    font-size: 14px;
+    line-height: 1.33em;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 11px 10px 0;
+    min-height: 38px;
+    color: var(--cs-light-text);
+    background-color: var(--cs-light-background);
+}
+
+.access-key {
+    text-decoration: underline;
+    text-underline-offset: 2px; /* Adjust for better visibility */
+    pointer-events: none;
+}

package/css/content_menu.css

@@ -0,0 +1,105 @@
+.ui-content-menu {
+    position: absolute;
+    color: var(--cs-white-text);
+    background-color: var(--cs-white-background);
+    box-shadow: 0 0 20px rgb(var(--dropup-box-shadow-color));
+    font-size: 14px;
+    z-index: 101;
+    padding: 0;
+    border: 0 none;
+    border-image: initial;
+    overflow: hidden;
+    border-radius: 6px;
+    outline: 0;
+}
+
+.ui-content-menu-content.ui-scrollable {
+    overflow-y: scroll;
+}
+
+.ui-content-menu-content {
+    position: relative;
+    margin-top: 8px;
+    overflow: hidden;
+}
+
+.ui-widget-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(var(--overlay-color));
+    z-index: 100;
+    backdrop-filter: blur(2px);
+}
+
+.ui-widget-overlay.no-blur {
+    backdrop-filter: none;
+}
+
+.content-menu-list {
+    list-style: none;
+    padding: 0 0 5px;
+    cursor: pointer;
+}
+
+.content-menu-item {
+    padding: 18px 31px 15px;
+    color: var(--cs-white-text);
+    font-family: Lato, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1em;
+}
+
+.content-menu-item.disabled {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.content-menu-item.selected {
+    color: var(--cs-white-selected);
+    background-color: var(--cs-white-background-selected);
+}
+
+.content-menu-item:hover {
+    color: var(--cs-white-hover);
+    background-color: var(--cs-white-background-hover);
+}
+
+.content-menu-item:focus {
+    color: var(--cs-white-focus);
+    background-color: var(--cs-white-background-focus);
+    outline: none;
+}
+
+.content-menu-item-divider {
+    border: 0 none;
+    border-top: 1px solid var(--pulldown-separator-color) !important;
+}
+
+.content-menu-item-header {
+    line-height: 18px;
+    background-color: var(--pulldown-header-background-color);
+    color: var(--pulldown-header-text-color);
+    display: block;
+    text-align: center;
+}
+
+.content-menu-item-icon {
+    position: absolute;
+    right: 40px;
+    color: var(--cs-white-text);
+}
+
+.content-menu-columns {
+    display: flex;
+    flex-direction: row;
+}
+
+.content-menu-columns .content-menu-list {
+    flex: 1 0 200px;
+    min-width: 200px;
+    padding: 0 0 5px;
+}

package/css/data_table.css

@@ -0,0 +1,191 @@
+table.fw-data-table {
+    font-size: 13px;
+    line-height: 1.25;
+}
+
+table.fw-data-table:focus {
+    outline: none;
+}
+
+table.fw-data-table thead,
+table.datatable-table thead {
+    font-weight: 900;
+    font-size: 11px;
+}
+
+table.datatable-table thead th a {
+    color: var(--cs-1-hover);
+}
+
+table.fw-data-table td,
+table.datatable-table td {
+    padding: 15px 0;
+    vertical-align: top;
+    border-bottom: solid 1px var(--cs-white-border);
+}
+
+/* Align text with top of images */
+table.fw-data-table tbody td {
+    vertical-align: top;
+}
+
+table.fw-data-table th,
+table.datatable-table th {
+    padding: 15px 0;
+    vertical-align: top;
+    border-bottom: solid 1px var(--cs-white-header-border);
+}
+
+table.fw-data-table th:last-child,
+table.fw-data-table td:last-child,
+table.datatable-table th:last-child,
+table.datatable-table td:last-child {
+    padding-right: 0;
+}
+
+table.fw-data-table:focus tbody td {
+    border-bottom-color: var(--menu-cursor-border-color);
+}
+
+table.fw-data-table .date,
+table.datatable-table .date {
+    white-space: nowrap;
+}
+
+table.fw-data-table.fw-large tbody {
+    width: 985px;
+    max-height: calc(100vh - 320px);
+}
+
+table.fw-data-table.fw-middle tbody {
+    width: 600px;
+    max-height: calc(100vh - 320px);
+}
+
+table.fw-data-table.fw-small tbody {
+    width: 342px;
+    height: 270px;
+}
+
+table.fw-data-table.fw-min tbody {
+    width: 342px;
+    height: 225px;
+}
+
+table.fw-data-table td.td-icon {
+    text-align: center;
+}
+
+table.fw-data-table-title {
+    color: var(--cs-1-text);
+}
+
+table.fw-data-table-title i.fa,
+table.fw-data-table-title i.far,
+table.fw-data-table-title i.fas {
+    margin-right: 10px;
+}
+
+table.fw-data-table .icon-trash {
+    font-size: 15px;
+}
+
+.owned-by-user .icon-access-right,
+table.fw-data-table .fa-clock,
+table.fw-data-table .fa-trash,
+table.fw-data-table .fa-download,
+table.fw-data-table .fa-history {
+    color: var(--cs-1-icon);
+    cursor: pointer;
+}
+
+.owned-by-user .icon-access-right:hover,
+table.fw-data-table .fa-clock:hover,
+table.fw-data-table .fa-trash:hover,
+table.fw-data-table .fa-download:hover,
+table.fw-data-table .fa-history:hover {
+    color: var(--cs-1-hover);
+}
+
+/* A deleted access rights row */
+.collaborator-tr[data-right="delete"] {
+    display: none;
+}
+
+table.fw-data-table .fw-avatar,
+table.fw-data-table .fw-string-avatar {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    vertical-align: top;
+    margin: -4px 10px -5px 0;
+}
+
+table.fw-data-table > tbody > tr > td:first-child {
+    padding-left: 2px;
+}
+
+table.fw-data-table:focus > tbody > tr.datatable-cursor {
+    background-color: var(--cs-white-background-selected);
+}
+
+/* the usermedia table */
+.fw-usermedia-title {
+    display: inline-block;
+    height: auto;
+}
+
+.fw-usermedia-type {
+    display: block;
+    margin-top: 3px;
+}
+
+.fw-usermedia-image {
+    display: inline-block;
+    max-width: 60px;
+    max-height: 60px;
+    overflow: hidden;
+    vertical-align: top;
+    margin: 0 14px 2px 0;
+}
+
+.fw-usermedia-image > img {
+    min-width: 100%;
+    min-height: 100%;
+}
+
+table.fw-data-table tbody td.checkable {
+    position: relative;
+}
+
+table.fw-data-table tbody tr.checked td.checkable::after {
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    right: 12px;
+    top: 12px;
+}
+
+/* Word counter dialog table */
+.fw-word-counter-tbody {
+    line-height: 38px;
+}
+
+/* Bulk action */
+.dt-bulk {
+    display: block;
+    position: relative;
+    min-width: 30px;
+}
+
+.dt-bulk .fw-check + label {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.dt-bulk-dropdown {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 3px;
+    cursor: pointer;
+}

package/css/dialog.css

@@ -0,0 +1,151 @@
+.ui-dialog {
+    position: absolute;
+    background-color: var(--cs-light-background);
+    font-size: 14px;
+    overflow: hidden;
+    outline: 0;
+    padding: 0 19px 19px;
+    box-shadow: none;
+    border: 0 none;
+    border-image: initial;
+    border-radius: 0;
+    z-index: 1000; /* Ensure dialog stays on top */
+    user-select: none; /* Prevent interaction with background content */
+}
+
+.ui-dialog-fullpage {
+    position: initial !important;
+}
+
+.ui-dialog-content.ui-scrollable {
+    overflow-y: auto;
+}
+
+.ui-dialog-titlebar {
+    position: relative;
+    margin: 0 -19px;
+    padding: 19px 40px 19px 19px;
+    background: var(--cs-dark-background);
+    color: var(--cs-dark-text);
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    user-select: none;
+}
+
+.ui-dialog-title {
+    font-size: 15px;
+    font-weight: 400;
+    text-transform: none;
+}
+
+.ui-dialog-titlebar-close {
+    right: 19px;
+}
+
+.ui-dialog-titlebar-help {
+    right: 39px;
+}
+
+.ui-button-icon-only {
+    width: 2em;
+    box-sizing: border-box;
+    text-indent: -9999px;
+    white-space: nowrap;
+}
+
+.ui-dialog-titlebar .ui-button-icon-only {
+    color: var(--cs-dark-text);
+}
+
+.ui-dialog-titlebar .ui-button-icon-only:hover {
+    color: var(--cs-dark-hover);
+}
+
+.ui-button-icon-only .ui-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: -2px;
+    margin-left: 0;
+}
+
+.ui-dialog-content {
+    position: relative;
+    margin-top: 24px;
+    overflow: hidden auto;
+    padding: 6px;
+    max-height: calc(100vh - 133px);
+    min-height: 20px;
+    max-width: calc(100vw - 4px);
+}
+
+.input-list-wrapper > tbody > tr:last-child > td {
+    padding-bottom: 0;
+}
+
+.input-list-wrapper td.input-field-list-ctrl {
+    padding-right: 20px;
+    text-align: right;
+    vertical-align: middle;
+}
+
+.input-list-wrapper td.input-field-list-ctrl .fa {
+    display: inline;
+}
+
+.entry-field input[type="text"],
+.entry-field input[type="number"] {
+    margin: 0;
+}
+
+.ui-dialog-buttonpane {
+    padding-top: 20px;
+}
+
+.ui-dialog-buttonset {
+    position: relative;
+    text-align: right;
+}
+
+.ui-dialog-buttonset .fw-button {
+    margin-left: 6px;
+}
+
+.ui-widget-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(var(--overlay-color));
+    z-index: 100;
+    backdrop-filter: blur(2px);
+}
+
+.ui-widget-overlay.no-blur {
+    backdrop-filter: none;
+}
+
+.ui-dialog-content textarea {
+    min-height: 112px;
+    min-width: 350px;
+    height: auto;
+}
+
+.fw-media-file-input {
+    display: none;
+}
+
+.ui-dialog-content .noteEl {
+    margin-bottom: 10px;
+    font-size: smaller;
+    color: var(--error-background-color);
+}
+
+.ui-dialog-content .noteEl.hide {
+    display: none;
+}
+
+.ui-dialog form {
+    padding: 8px;
+}