make callbackery work better on mobile

CHANGES

@@ -1,3 +1,22 @@
+0.47.3 2023-08-29 16:20:30 +0200 Tobias Oetiker <[email protected]>
+
+ - make table columns with flex with work on mobile devices
+
+0.47.2 2023-08-29 14:14:54 +0200 Tobias Oetiker <[email protected]>
+
+ - connect mmButton properties to button propperties
+
+0.47.1 2023-08-29 12:04:49 +0200 Tobias Oetiker <[email protected]>
+
+ - include callbackery.ui.form.FileSelectorMenuButton into distro
+
+0.47.0 2023-08-29 11:01:09 +0200 Tobias Oetiker <[email protected]>
+
+* make callbackery work better on mobile
+  - collapse navbar buttons into menu on mobile
+  - move labels over form fields on mobile
+* cleanup indentation
+
 0.46.5 2023-06-28 08:29:18 +0200 Tobias Oetiker <[email protected]>
 
  - fixed regression in abstractform (missing signature)

MANIFEST

@@ -48,8 +48,7 @@ lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/Auto.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/DateTime.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/renderer/HBox.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/renderer/NoteForm.js
-lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/UploadButton.js
-lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/UploadToolbarButton.js
+lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/FileSelectorMenuButton.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/VirtualSelectBox.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/Header.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/__init__.js

lib/CallBackery.pm

@@ -37,7 +37,7 @@ use CallBackery::Plugin::Doc;
 use CallBackery::Database;
 use CallBackery::User;
 
-our $VERSION = '0.46.5';
+our $VERSION = '0.47.3';
 
 
 =head2 config

lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/TabView.js

@@ -5,8 +5,7 @@
    Utf8Check: äöü
 ************************************************************************ */
 /**
- * Build the desktop. This is a singleton. So that the desktop
- * object and with it the treeView and the searchView are universaly accessible
+ * Build the desktop. This is a singleton
  */
 qx.Class.define("callbackery.ui.TabView", {
     extend : qx.ui.tabview.TabView,

lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/FileSelectorMenuButton.js

@@ -0,0 +1,112 @@
+/* ************************************************************************
+
+   After Qooxdoo FileSelectorMenuButton
+   Copyright:
+     2023 Oetiker+Partner AG
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * Tobias Oetiker
+
+************************************************************************ */
+
+qx.Class.define("callbackery.ui.form.FileSelectorMenuButton", {
+    extend: qx.ui.menu.Button,
+    statics: {
+        _fileInputElementIdCounter: 0
+    },
+    properties: {
+        /**
+         * What type of files should be offered in the fileselection dialog.
+         * Use a comma separated list of [Unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). If you dont set anything, all files
+         * are allowed.
+         *
+         * *Example*
+         *
+         * `.doc,.docx,application/msword`
+         */
+        accept: {
+            nullable: true,
+            check: "String",
+            apply: "_applyAttribute"
+        },
+
+        /**
+         * Specify that the camera should be used for getting the "file". The
+         * value defines which camera should be used for capturing images.
+         * `user` indicates the user-facing camera.
+         * `environment` indicates the camera facing away from the user.
+         */
+        capture: {
+            nullable: true,
+            check: ["user", "environment"],
+            apply: "_applyAttribute"
+        },
+
+        /**
+         * Set to "true" if you want to allow the selection of multiple files.
+         */
+        multiple: {
+            nullable: true,
+            check: "Boolean",
+            apply: "_applyAttribute"
+        },
+
+        /**
+         * If present, indicates that only directories should be available for
+         * selection.
+         */
+        directoriesOnly: {
+            nullable: true,
+            check: "Boolean",
+            apply: "_applyAttribute"
+        }
+    },
+
+    members: {
+        __inputObjec: null,
+        _applyAttribute(value, old, attr) {
+            if (attr === "directoriesOnly") {
+                // while the name of the attribute indicates that this only
+                // works for webkit browsers, this is not the case. These
+                // days the attribute is supported by
+                // [everyone](https://caniuse.com/?search=webkitdirectory).
+                attr = "webkitdirectory";
+            }
+            this.__inputObject.setAttribute(attr, value);
+        },
+        setEnabled(value) {
+            this.__inputObject.setEnabled(value);
+            super.setEnabled(value);
+        },
+        _createContentElement() {
+            let id = "qxMenuFileSelector_" + (++callbackery.ui.form.FileSelectorMenuButton._fileInputElementIdCounter);
+            let input = (this.__inputObject = new qx.html.Input(
+                "file",
+                null,
+                { id: id }
+            ));
+
+            let label = new qx.html.Element("label", {}, { for: id });
+            label.addListenerOnce("appear", e => {
+                label.add(input);
+            });
+
+            input.addListenerOnce("appear", e => {
+                let inputEl = input.getDomElement();
+                // since qx.html.Node does not even create the
+                // domNode if it is not set to visible initially
+                // we have to quickly hide it after creation.
+                input.setVisible(false);
+                inputEl.addEventListener("change", e => {
+                    this.fireDataEvent("changeFileSelection", inputEl.files);
+                    inputEl.value = "";
+                });
+            });
+            return label;
+        }
+    }
+});