@qtoggle/qui 1.20.0-alpha.7 → 1.20.0-beta.2

package/js/forms/common-forms/page-form.js

@@ -1,11 +1,12 @@
 
-import {gettext}        from '$qui/base/i18n.js'
-import {mix}            from '$qui/base/mixwith.js'
-import StockIcon        from '$qui/icons/stock-icon.js'
-import PageMixin        from '$qui/pages/page.js'
-import * as Sections    from '$qui/sections/sections.js'
-import * as ObjectUtils from '$qui/utils/object.js'
-import * as Window      from '$qui/window.js'
+import {gettext}         from '$qui/base/i18n.js'
+import {mix}             from '$qui/base/mixwith.js'
+import StockIcon         from '$qui/icons/stock-icon.js'
+import PageMixin         from '$qui/pages/page.js'
+import * as Sections     from '$qui/sections/sections.js'
+import * as ObjectUtils  from '$qui/utils/object.js'
+import * as PromiseUtils from '$qui/utils/promise.js'
+import * as Window       from '$qui/window.js'
 
 import Form from '../form.js'
 
@@ -59,7 +60,14 @@ class PageForm extends mix(Form).with(PageMixin) {
 
     handleBecomeCurrent() {
         super.handleBecomeCurrent()
-        this._updateVertScroll()
+
+        /* Measured after the next paint, when layout is already up to date. Measuring now would lay out a freshly built
+         * form on the spot, and again after the classes set here. */
+        PromiseUtils.afterNextPaint().then(function () {
+            if (this.isCurrent()) {
+                this._updateVertScroll()
+            }
+        }.bind(this))
     }
 
     handleVertScroll() {

package/js/icons/icon.js

@@ -1,4 +1,7 @@
 
+import * as ObjectUtils from '$qui/utils/object.js'
+
+
 const ICON_DATA_ATTR = '_icon'
 
 
@@ -49,6 +52,22 @@ class Icon {
         }
     }
 
+    /**
+     * Tell if another icon would render the same as this one.
+     * @param {?qui.icons.Icon} other
+     * @returns {Boolean}
+     */
+    equals(other) {
+        if (other === this) {
+            return true
+        }
+        if (!other || other.constructor !== this.constructor) {
+            return false
+        }
+
+        return ObjectUtils.deepEquals(this.toAttributes(), other.toAttributes())
+    }
+
     /**
      * Return the icon that has been previously applied to an element.
      * @param {jQuery} element

package/js/lists/common-items/icon-label-list-item.js

@@ -45,9 +45,21 @@ class IconLabelListItem extends mix(ListItem).with(IconLabelViewMixin) {
             return false
         }
 
-        this.setLabel(other.getLabel())
-        this.setSubLabel(other.getSubLabel())
-        this.setIcon(other.getIcon())
+        /* Updates arrive for every server event, mostly with nothing changed. Re-applying an icon rebuilds its elements
+         * with a fade and may sample its colors, so each part is only set when it differs. */
+        if (other.getLabel() !== this.getLabel()) {
+            this.setLabel(other.getLabel())
+        }
+        if (other.getSubLabel() !== this.getSubLabel()) {
+            this.setSubLabel(other.getSubLabel())
+        }
+
+        let icon = other.getIcon()
+        let currentIcon = this.getIcon()
+        let iconChanged = icon ? !icon.equals(currentIcon) : currentIcon != null
+        if (iconChanged) {
+            this.setIcon(icon)
+        }
 
         return true
     }

package/js/lists/list.js

@@ -75,6 +75,10 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
         this._filterCollapseTimeout = null
         this._revealFrameHandle = null
         this._applySearchFilterDebouncer = new Debouncer(() => this._applySearchFilter(), SEARCH_FILTER_DELAY)
+
+        /* Counts clicks, so that only the last of several quick clicks gets handled */
+        this._selectionClickCount = 0
+        this._selectionChangeFromItems = null
     }
 
     makeHTML() {
@@ -370,24 +374,54 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
             return /* Selection unchanged */
         }
 
-        let promise = this.onSelectionChange(oldItems, newItems) || Promise.resolve()
-
-        promise.then(function () {
+        let setSelection = function (deselected, selected) {
             try {
-                removedItems.forEach(i => i.setSelected(false))
-                addedItems.forEach(i => i.setSelected(true))
+                deselected.forEach(i => i.setSelected(false))
+                selected.forEach(i => i.setSelected(true))
             }
             catch (e) {
                 logger.errorStack('setSelected failed', e)
             }
-        }).catch(function (e) {
+        }
+
+        /* Show the new selection first and let its fade finish before onSelectionChange(). That usually builds and
+         * pushes a whole page, which blocks the main thread and would otherwise hold back the tap feedback. */
+        setSelection(removedItems, addedItems)
+
+        /* Quick clicks in a row make one change, from the selection before the first one to that of the last one, so
+         * that no page gets built for a selection that is already gone */
+        if (this._selectionChangeFromItems == null) {
+            this._selectionChangeFromItems = oldItems
+        }
+        let clickCount = ++this._selectionClickCount
+        let fromItems = null
+
+        new Promise(resolve => window.requestAnimationFrame(resolve)).then(function () {
+            return Theme.afterTransitionPromise()
+        }).then(function () {
+            if (clickCount !== this._selectionClickCount) {
+                return /* A later click took over */
+            }
+
+            fromItems = this._selectionChangeFromItems
+            this._selectionChangeFromItems = null
+            if (fromItems.length === newItems.length && fromItems.every(i => newItems.includes(i))) {
+                return /* Clicked back to where it started */
+            }
+
+            return this.onSelectionChange(fromItems, newItems)
+        }.bind(this)).catch(function (e) {
+            if (fromItems && clickCount === this._selectionClickCount) {
+                setSelection(newItems, fromItems)
+            }
+
             if (e == null) {
                 logger.debug('selection change rejected')
             }
             else {
                 throw e
             }
-        })
+        }.bind(this))
     }
 
     _handleLongPress(item) {

package/js/main-ui/status.js

@@ -4,6 +4,7 @@
 
 import $ from '$qui/lib/jquery.module.js'
 
+import Icon              from '$qui/icons/icon.js'
 import StockIcon         from '$qui/icons/stock-icon.js'
 import * as Icons        from '$qui/icons/icons.js'
 import * as Toast        from '$qui/messages/toast.js'
@@ -60,8 +61,13 @@ let lastMessage = null
  * @param {String} [message] an optional status message
  */
 export function set(status, message = null) {
+    update(status, message)
+}
+
+function update(status, message, forceIcon = false) {
     if (statusLockTimeoutHandle) {
-        pendingStatusParams = {status, message}
+        forceIcon = forceIcon || Boolean(pendingStatusParams && pendingStatusParams.forceIcon)
+        pendingStatusParams = {status, message, forceIcon}
         return
     }
 
@@ -78,7 +84,7 @@ export function set(status, message = null) {
 
             statusLockTimeoutHandle = null
             if (pendingStatusParams) {
-                set(pendingStatusParams.status, pendingStatusParams.message)
+                update(pendingStatusParams.status, pendingStatusParams.message, pendingStatusParams.forceIcon)
                 pendingStatusParams = null
             }
 
@@ -144,12 +150,19 @@ export function set(status, message = null) {
             variant = 'interactive'
         }
 
-        new StockIcon({
+        let icon = new StockIcon({
             name: iconName,
             decoration: decoration,
             variant: variant,
             animation: animation
-        }).applyTo(statusIndicator.find('.qui-icon'))
+        })
+
+        /* The status is set again after every server response, mostly unchanged, and rendering an icon rebuilds it.
+         * A theme change keeps the same icon attributes but not the colors they stand for, so it forces a render. */
+        let iconElement = statusIndicator.find('.qui-icon')
+        if (forceIcon || !icon.equals(Icon.getFromElement(iconElement))) {
+            icon.applyTo(iconElement)
+        }
     }
 
     if (message) {
@@ -183,7 +196,7 @@ export function init() {
     })
 
     Theme.changeSignal.connect(function () {
-        set(lastStatus, lastMessage)
+        update(lastStatus, lastMessage, /* forceIcon = */ true)
     })
 
     set(STATUS_OK)

package/js/utils/promise.js

@@ -32,6 +32,21 @@ export function later(timeout, arg) {
     })
 }
 
+/**
+ * Return a promise that resolves once the next frame has been painted, when reading element sizes is cheap because
+ * layout is already up to date.
+ * @alias qui.utils.promise.afterNextPaint
+ * @returns {Promise}
+ */
+export function afterNextPaint() {
+    /* A requestAnimationFrame() callback runs before that frame's layout; a timeout set from it runs after the paint */
+    return new Promise(function (resolve) {
+        window.requestAnimationFrame(function () {
+            setTimeout(resolve, 0)
+        })
+    })
+}
+
 /**
  * Run a promise with a timeout. If the promise is not fulfilled within the given timeout, the returned promise will be
  * rejected with {@link qui.base.errors.TimeoutError}

package/js/widgets/widgets.js

@@ -29,6 +29,46 @@ function initButtons() {
     })
 }
 
+function initLongPress() {
+    /* A touch press held long enough to become a long press ends without a click, so the release looked like a
+     * tap that did nothing. Treat that release as a click, except in text fields and links, which have their own
+     * long-press menus. */
+    let longPressTarget = null
+
+    document.addEventListener('contextmenu', function (e) {
+        let ownMenu = e.target.closest('input, textarea, select, [contenteditable], a[href]')
+        longPressTarget = (e.pointerType === 'touch' && !ownMenu) ? e.target : null
+        if (longPressTarget) {
+            e.preventDefault()
+        }
+    }, {capture: true})
+
+    document.addEventListener('pointerup', function (e) {
+        let target = longPressTarget
+        longPressTarget = null
+        if (!target || e.pointerType !== 'touch') {
+            return
+        }
+
+        /* Touch pointers stay captured by the pressed element, so find where the finger actually left. Like a real
+         * click, the target is the closest element holding both the press and the release. */
+        let released = document.elementFromPoint(e.clientX, e.clientY)
+        while (target && !target.contains(released)) {
+            target = target.parentElement
+        }
+        if (!target || target === document.body || target === document.documentElement) {
+            return
+        }
+
+        /* Let the release finish first, like a real click does */
+        setTimeout(() => target.click())
+    }, {capture: true, passive: true})
+
+    document.addEventListener('pointercancel', function () {
+        longPressTarget = null
+    }, {capture: true, passive: true})
+}
+
 /**
  * Create a caption made of an icon and a text.
  * @alias qui.widgets.makeIconTextCaption
@@ -54,4 +94,5 @@ export function makeIconTextCaption(icon, text) {
 
 export function init() {
     initButtons()
+    initLongPress()
 }

package/less/base.less

@@ -57,6 +57,7 @@ a:ACTIVE {
 /* Root elements */
 
 html {
+    color-scheme: @color-scheme;
     color: @foreground-color;
     background: @background-root-color;
     height: 100%;

package/less/icon-label-view.less

@@ -58,14 +58,40 @@ div.qui-icon-label-view {
         background: @background-color;
         color: @interactive-color;
 
-        &.active {
+        /* The pressed shade is an overlay faded by opacity, which the compositor animates without repainting the row. A
+         * background transition repaints it on every frame, and slow devices feel that as tap lag. */
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
             background: @background-active-color;
+            opacity: 0;
+            transition: opacity @transition-duration ease;
+            pointer-events: none;
+        }
+
+        /* Keeps the icon and labels above the overlay */
+        & > * {
+            position: relative;
+        }
+
+        &.active::before {
+            opacity: 1;
         }
 
         &.selected {
             background: @interactive-color;
             color: @background-color;
 
+            &::before {
+                background: @interactive-active-color;
+            }
+
             & > div.labels > div.sub-label {
                 color: @background-color;
                 background-color: fade(@interactive-active-color, 50%);
@@ -73,11 +99,6 @@ div.qui-icon-label-view {
 
         }
 
-        &.active.selected {
-            background: @interactive-active-color;
-            color: @background-color;
-        }
-
     }
 
 }

package/less/pages/page.less

@@ -59,6 +59,18 @@ body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.
 
 }
 
+/* On a large screen, pages fade in place instead of sliding, since animating left and width lays out every visible
+ * page on each frame. A page going away keeps its place until it has faded out; one coming in takes its place at once. */
+body:NOT(.small-screen) > div.qui-main-container > div.qui-pages-container > div.qui-page {
+    transition: opacity @transition-duration ease-out,
+                width 0s linear @transition-duration,
+                left 0s linear @transition-duration;
+
+    &.visible {
+        transition: opacity @transition-duration ease-out;
+    }
+}
+
 div.qui-page.current {
     z-index: 9;
 }

package/less/theme-dark.less

@@ -4,6 +4,9 @@
 
 @theme-name: dark;
 
+/* Declared so that browsers and WebViews do not apply their own automatic dark mode on top of the theme */
+@color-scheme: only dark;
+
 
 /* fonts */
 

package/less/theme-light.less

@@ -4,6 +4,9 @@
 
 @theme-name: light;
 
+/* Declared so that browsers and WebViews do not apply their own automatic dark mode on top of the theme */
+@color-scheme: only light;
+
 
 /* fonts */
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qtoggle/qui",
   "description": "A JavaScript UI library with batteries included.",
-  "version": "1.20.0-alpha.7",
+  "version": "1.20.0-beta.2",
   "author": {
     "name": "Calin Crisan",
     "email": "ccrisan@gmail.com"

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "qui-server"
-version = "1.20.0-alpha.7"
+version = "1.20.0-beta.2"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},