fwtoolkit 0.1.0-alpha.2 → 0.1.0-alpha.5

package/css/ui_dialogs.css

@@ -0,0 +1,144 @@
+.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 {
+    position: absolute;
+    padding: 19px;
+    background-color: var(--cs-light-background);
+    border: solid 1px var(--cs-light-border);
+    box-shadow: 0 0 10px var(--cs-light-box-shadow);
+    overflow: hidden;
+    border-radius: 4px;
+    font-size: 14px;
+    outline: 0;
+    z-index: 1000; /* Ensure dialog stays on top */
+    user-select: none; /* Prevent interaction with background content */
+}
+
+.ui-dialog-titlebar {
+    position: relative;
+    padding: 0;
+}
+
+.ui-dialog-title {
+    font-size: 16px;
+    font-weight: 700;
+    text-transform: none;
+}
+
+.ui-dialog-buttonpane {
+    padding-top: 20px;
+}
+
+.ui-button {
+    font-size: 14px;
+    line-height: 1em;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
+.ui-dialog-titlebar-close,
+.ui-dialog-titlebar-help {
+    position: absolute;
+    right: 0.3em;
+    top: 50%;
+    width: 20px;
+    margin: -10px 0 0;
+    padding: 1px;
+    height: 20px;
+}
+
+.ui-button-icon-only {
+    width: 2em;
+    box-sizing: border-box;
+    text-indent: -9999px;
+    white-space: nowrap;
+}
+
+.ui-button-icon-only .ui-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -8px;
+    margin-left: -8px;
+}
+
+.ui-button-icon-only .ui-icon::before {
+    text-indent: 5019px;
+}
+
+/* Style for the close button specifically */
+.ui-dialog-titlebar-close {
+    order: 99; /* Push to end of flex container */
+}
+
+.ui-dialog-titlebar-close:hover,
+.ui-dialog-titlebar-help:hover {
+    color: var(--cs-dark-hover);
+}
+
+.ui-icon-closethick::before {
+    width: 0.7em;
+    height: 1em;
+    padding-top: 5px;
+    content: "\f00d";
+}
+
+.ui-icon-help::before {
+    width: 0.7em;
+    height: 1em;
+    padding-top: 5px;
+    content: "\f128";
+}
+
+.ui-dialog-content {
+    position: relative;
+    margin-top: 24px;
+    overflow: auto;
+}
+
+.ui-dialog-buttonset {
+    position: relative;
+    text-align: right;
+}
+
+.ui-dialog-buttonset .fw-button {
+    margin-left: 6px;
+}
+
+/* Make focus visible on all focusable elements */
+.ui-dialog *:focus {
+    outline: 2px solid var(--cs-dark-background);
+    outline-offset: 2px;
+}
+
+/* Style the title bar buttons specifically */
+.ui-dialog-titlebar .ui-button-icon-only {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 8px;
+    background: transparent;
+    border: none;
+}
+
+.ui-dialog-titlebar .ui-button-icon-only:focus {
+    outline: 2px solid var(--cs-dark-text);
+    outline-offset: 2px;
+    border-radius: 4px;
+}

package/css/ui_tabs.css

@@ -0,0 +1,61 @@
+.ui-tabs-nav {
+    display: flex;
+    border-bottom: 2px solid var(--tabs-border-color);
+    margin-bottom: 16px;
+    height: auto;
+    width: auto;
+}
+
+.ui-tabs-nav > li {
+    position: relative;
+    padding: 6px 18px;
+    cursor: pointer;
+    font-weight: bold;
+    color: var(--tabs-text-inactive);
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px;
+    transition: color 0.15s, border-color 0.15s;
+    float: none;
+    margin-right: 0;
+}
+
+.ui-tabs-nav > li:hover {
+    color: var(--tabs-text-active);
+}
+
+.ui-tabs-nav .fw-button {
+    color: var(--tabs-text-inactive);
+    border: none;
+    background: transparent;
+    padding: 0;
+}
+
+.ui-tabs-nav .ui-tabs-active,
+.ui-tabs-nav .current-tab {
+    color: var(--tabs-text-active);
+    border-bottom-color: var(--tabs-indicator-color);
+}
+
+.ui-tabs-nav .ui-tabs-active .fw-button,
+.ui-tabs-nav .current-tab .fw-button {
+    color: var(--tabs-text-active);
+    background: transparent;
+}
+
+.ui-tabs-nav > li:hover .fw-button {
+    color: var(--tabs-text-active);
+}
+
+.ui-tabs-panel {
+    height: auto;
+    overflow: auto;
+    min-height: 220px;
+    padding: 0;
+    margin-top: 24px;
+}
+
+.tab-link-inner {
+    display: block;
+    margin-left: 20px;
+    color: var(--cs-light-text-secondary);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fwtoolkit",
-  "version": "0.1.0-alpha.2",
-  "description": "Fidus Writer Toolkit — reusable utilities and UI helpers for Fidus Writer and other applications",
+  "version": "0.1.0-alpha.5",
+  "description": "Fidus Writer Toolkit — reusable utilities, UI helpers and styles for Fidus Writer and other applications",
   "type": "module",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -11,6 +11,7 @@
   "author": "Johannes Wilm",
   "files": [
     "src/",
+    "css/",
     "README.md",
     "LICENSE"
   ],

package/src/basic.js

@@ -1,8 +1,8 @@
 import {keyName} from "w3c-keyname"
 
-import {ContentMenu} from "./content_menu"
-import {Dialog} from "./dialog"
-import {isActivationEvent} from "./events"
+import {ContentMenu} from "./content_menu.js"
+import {Dialog} from "./dialog.js"
+import {isActivationEvent} from "./events.js"
 
 /** Creates a styled select with a contentmenu from a select tag.
  * @param select The select-tag which is to be replaced.

package/src/datatable_bulk.js

@@ -1,7 +1,7 @@
 import {keyName} from "w3c-keyname"
 
-import {whenReady} from "./basic"
-import {ContentMenu} from "./content_menu"
+import {whenReady} from "./basic.js"
+import {ContentMenu} from "./content_menu.js"
 
 let bulkId = 0
 

package/src/dialog.js

@@ -1,6 +1,6 @@
 import {keyName} from "w3c-keyname"
 
-import {findTarget} from "./basic"
+import {findTarget} from "./basic.js"
 
 const dialogTemplate = ({
     id,

package/src/faq_dialog.js

@@ -1,6 +1,6 @@
-import {escapeText} from "./basic"
-import {Dialog} from "./dialog"
-import {ensureCSS} from "./network"
+import {escapeText} from "./basic.js"
+import {Dialog} from "./dialog.js"
+import {ensureCSS} from "./network.js"
 
 const faqTemplate = ({escapedQuestions}) =>
     `<div class="faq">

package/src/file/dialog.js

@@ -1,9 +1,9 @@
-import {Dialog} from "../dialog"
-import {FileSelector} from "./selector"
-import {addAlert} from "../basic"
-import {NewFolderDialog} from "./new_folder_dialog"
-import {moveTemplate} from "./templates"
-import {moveFile, shortFileTitle} from "./tools"
+import {Dialog} from "../dialog.js"
+import {FileSelector} from "./selector.js"
+import {addAlert} from "../basic.js"
+import {NewFolderDialog} from "./new_folder_dialog.js"
+import {moveTemplate} from "./templates.js"
+import {moveFile, shortFileTitle} from "./tools.js"
 /**
  * Functions for the document move dialog.
  */

package/src/file/index.js

@@ -1,9 +1,9 @@
-export {FileDialog} from "./dialog"
-export {FileSelector} from "./selector"
+export {FileDialog} from "./dialog.js"
+export {FileSelector} from "./selector.js"
 export {
     cleanPath,
     moveFile,
     shortFileTitle,
     longFilePath
-} from "./tools"
-export {NewFolderDialog} from "./new_folder_dialog"
+} from "./tools.js"
+export {NewFolderDialog} from "./new_folder_dialog.js"

package/src/file/new_folder_dialog.js

@@ -1,5 +1,5 @@
-import {Dialog} from "../dialog"
-import {newFolderTemplate} from "./templates"
+import {Dialog} from "../dialog.js"
+import {newFolderTemplate} from "./templates.js"
 
 export class NewFolderDialog {
     constructor(callback = _foldername => {}) {

package/src/file/selector.js

@@ -1,5 +1,5 @@
-import {escapeText, findTarget} from "../basic"
-import {ensureCSS} from "../network"
+import {escapeText, findTarget} from "../basic.js"
+import {ensureCSS} from "../network.js"
 
 export class FileSelector {
     constructor({

package/src/file/templates.js

@@ -1,4 +1,4 @@
-import {escapeText} from "../"
+import {escapeText} from "../index.js"
 
 export const moveTemplate = ({path}) =>
     `<div>

package/src/file/tools.js

@@ -1,5 +1,5 @@
-import {escapeText} from "../basic"
-import {postJson} from "../network"
+import {escapeText} from "../basic.js"
+import {postJson} from "../network.js"
 
 export const shortFileTitle = (title, path) => {
     if (!path.length || path.endsWith("/")) {

package/src/index.js

@@ -1,4 +1,4 @@
-export {OverviewMenuView} from "./overview_menu"
+export {OverviewMenuView} from "./overview_menu.js"
 export {
     dropdownSelect,
     setCheckableLabel,
@@ -17,13 +17,13 @@ export {
     whenReady,
     setDocTitle,
     showSystemMessage
-} from "./basic"
+} from "./basic.js"
 
-export {convertDataURIToBlob} from "./blob"
+export {convertDataURIToBlob} from "./blob.js"
 
-export {isActivationEvent} from "./events"
+export {isActivationEvent} from "./events.js"
 
-export {getFocusIndex, setFocusIndex} from "./focus"
+export {getFocusIndex, setFocusIndex} from "./focus.js"
 
 export {
     get,
@@ -33,19 +33,19 @@ export {
     postBare,
     ensureCSS,
     getCookie
-} from "./network"
+} from "./network.js"
 export {
     setLanguage,
     avatarTemplate
-} from "./user"
-export {Dialog} from "./dialog"
-export {ContentMenu} from "./content_menu"
-export {makeWorker} from "./worker"
-export {baseBodyTemplate} from "./templates"
-export {WebSocketConnector} from "./ws"
-export {filterPrimaryEmail} from "./user_util"
-export {DatatableBulk} from "./datatable_bulk"
-export {faqDialog} from "./faq_dialog"
+} from "./user.js"
+export {Dialog} from "./dialog.js"
+export {ContentMenu} from "./content_menu.js"
+export {makeWorker} from "./worker.js"
+export {baseBodyTemplate} from "./templates.js"
+export {WebSocketConnector} from "./ws.js"
+export {filterPrimaryEmail} from "./user_util.js"
+export {DatatableBulk} from "./datatable_bulk.js"
+export {faqDialog} from "./faq_dialog.js"
 export {
     FileDialog,
     FileSelector,
@@ -54,8 +54,8 @@ export {
     shortFileTitle,
     longFilePath,
     NewFolderDialog
-} from "./file"
+} from "./file/index.js"
 export {
     initSettings,
     getSettings
-} from "./settings"
+} from "./settings.js"

package/src/network.js

@@ -1,4 +1,4 @@
-import {getSettings} from "./settings"
+import {getSettings} from "./settings.js"
 
 /** Get cookie to set as part of the request header of all AJAX requests to the server.
  * @param name The name of the token to look for in the cookie.

package/src/overview_menu.js

@@ -1,6 +1,6 @@
 import {DiffDOM} from "diff-dom"
 import {keyName} from "w3c-keyname"
-import {escapeText, whenReady} from "./basic"
+import {escapeText, whenReady} from "./basic.js"
 
 export class OverviewMenuView {
     constructor(overview, model) {

package/src/templates.js

@@ -1,5 +1,5 @@
-import {avatarTemplate} from "./user"
-import {filterPrimaryEmail} from "./user_util"
+import {avatarTemplate} from "./user.js"
+import {filterPrimaryEmail} from "./user_util.js"
 
 export const baseBodyTemplate = ({user, contents, hasOverview, app}) => `
 <div id="wait">

package/src/user.js

@@ -1,4 +1,4 @@
-import {post} from "./network"
+import {post} from "./network.js"
 
 export const setLanguage = (_config, language) =>
     post("/api/i18n/setlang/", {language}).then(() => {