2.0

js/src/fileupload.js

@@ -27,6 +27,14 @@ export class Fileupload {
             sequentialUploads: true,
             messages: fileupload_i18n_messages
         });
+        $('#fileupload').on('click', '.delete', (e) => {
+            e.preventDefault();
+            if ($('.template-upload, .template-download', elem).length === 1) {
+                // last item not deleted yet
+                $('.fileupload-empty', this.elem).show();
+            }
+        });
+
         // check accept file types
         let accept_file_types = elem.data('accept_file_types');
         if (accept_file_types) {
@@ -46,6 +54,7 @@ export class Fileupload {
     add_files_handle(evt) {
         evt.preventDefault();
         $('input:file', this.elem).click();
+        $('.fileupload-empty', this.elem).hide();
     }
 
     load_existing() {
@@ -60,6 +69,9 @@ export class Fileupload {
         }).done(function (result) {
             $(this).fileupload('option', 'done').call(
                 this, $.Event('done'), {result: result});
+            if (result.files.length > 0) {
+                $('.fileupload-empty', this).hide();
+            }
         });
     }
 }

mx.ini

@@ -8,9 +8,6 @@ cs_push = git@github.com:conestack
 # checkout source packages
 checkout_packages = true
 
-# feature branch to checkout
-feature_branch = master
-
 # main package
 main-package = -e .[test]
 
@@ -43,15 +40,15 @@ environment = env
 use = ${settings:checkout_packages}
 url = ${settings:cs}/odict.git
 pushurl = ${settings:cs_push}/odict.git
-branch = ${settings:feature_branch}
+branch = master
 mxmake-test-path = tests
 mxmake-source-path = src/odict
 
 [plumber]
 use = ${settings:checkout_packages}
 url = ${settings:cs}/plumber.git
 pushurl = ${settings:cs_push}/plumber.git
-branch = ${settings:feature_branch}
+branch = master
 extras = test
 mxmake-test-path = tests
 mxmake-source-path = src/plumber
@@ -64,15 +61,15 @@ mxmake-source-path = src/plumber
 use = ${settings:checkout_packages}
 url = ${settings:cs}/node.git
 pushurl = ${settings:cs_push}/node.git
-branch = ${settings:feature_branch}
+branch = master
 mxmake-test-path = src
 mxmake-source-path = src/node
 
 [node.ext.ugm]
 use = ${settings:checkout_packages}
 url = ${settings:cs}/node.ext.ugm.git
 pushurl = ${settings:cs_push}/node.ext.ugm.git
-branch = ${settings:feature_branch}
+branch = master
 extras = test
 mxmake-test-path = src
 mxmake-source-path = src/node/ext/ugm
@@ -85,7 +82,7 @@ mxmake-source-path = src/node/ext/ugm
 use = ${settings:checkout_packages}
 url = ${settings:cs}/yafowil.git
 pushurl = ${settings:cs_push}/yafowil.git
-branch = ${settings:feature_branch}
+branch = master
 extras = test
 mxmake-test-path = src
 mxmake-source-path = src/yafowil
@@ -94,23 +91,23 @@ mxmake-source-path = src/yafowil
 use = ${settings:checkout_packages}
 url = ${settings:cs}/yafowil.yaml.git
 pushurl = ${settings:cs_push}/yafowil.yaml.git
-branch = ${settings:feature_branch}
+branch = master
 mxmake-test-path = src
 mxmake-source-path = src/yafowil/yaml
 
 [yafowil.webob]
 use = ${settings:checkout_packages}
 url = ${settings:cs}/yafowil.webob.git
 pushurl = ${settings:cs_push}/yafowil.webob.git
-branch = ${settings:feature_branch}
+branch = master
 mxmake-test-path = src
 mxmake-source-path = src/yafowil/webob
 
 [yafowil.bootstrap]
 use = ${settings:checkout_packages}
 url = ${settings:cs}/yafowil.bootstrap.git
 pushurl = ${settings:cs_push}/yafowil.bootstrap.git
-branch = ${settings:feature_branch}
+branch = master
 mxmake-test-path = src
 mxmake-source-path = src/yafowil/bootstrap
 
@@ -122,7 +119,7 @@ mxmake-source-path = src/yafowil/bootstrap
 use = ${settings:checkout_packages}
 url = ${settings:cs}/treibstoff.git
 pushurl = ${settings:cs_push}/treibstoff.git
-branch = ${settings:feature_branch}
+branch = 2.0
 
 [webresource]
 use = ${settings:checkout_packages}
@@ -137,7 +134,7 @@ mxmake-source-path = webresource
 use = ${settings:checkout_packages}
 url = ${settings:cs}/cone.tile.git
 pushurl = ${settings:cs_push}/cone.tile.git
-branch = ${settings:feature_branch}
+branch = master
 extras = test
 mxmake-test-path = src
 mxmake-source-path = src/cone/tile
@@ -146,7 +143,7 @@ mxmake-source-path = src/cone/tile
 use = ${settings:checkout_packages}
 url = ${settings:cs}/cone.app.git
 pushurl = ${settings:cs_push}/cone.app.git
-branch = ${settings:feature_branch}
+branch = 2.0
 extras = test
 mxmake-test-path = src
 mxmake-source-path = src/cone/app

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "cone.fileupload"
-version = "1.1.0.dev0"
+version = "2.0.0.dev0"
 description = "jQuery File Upload integration for cone.app"
 dynamic = ["readme"]
 requires-python = ">=3.10"
@@ -22,7 +22,7 @@ classifiers = [
     "Topic :: Internet :: WWW/HTTP :: Dynamic Content",
 ]
 dependencies = [
-    "cone.app>1.0.99,<2.0.0",
+    "cone.app>1.99",
 ]
 
 [project.optional-dependencies]

src/cone/fileupload/browser/actions.py

@@ -12,7 +12,8 @@
 @context_menu_item(group='childactions', name='add_files')
 class ActionAddFiles(LinkAction):
     id = 'toolbaraction-add-files'
-    icon = 'glyphicon glyphicon-plus'
+    css = 'dropdown-item py-2 border-bottom alert alert-success rounded-0 m-0'
+    icon = 'bi bi-file-earmark-plus'
     text = _('action_add_files', default='Add files')
     bind = None
     target = None
@@ -28,9 +29,9 @@ def display(self):
 @context_menu_item(group='childactions', name='start_upload')
 class ActionStartUpload(ButtonAction):
     id = 'toolbaraction-start-upload'
-    icon = 'glyphicon glyphicon-upload'
+    icon = 'bi bi-upload'
     text = _('action_start_upload', default='Start Upload')
-    css = 'start'
+    css = 'start dropdown-item py-2 border-bottom alert alert-primary rounded-0 m-0'
     bind = None
     target = None
 
@@ -45,9 +46,9 @@ def display(self):
 @context_menu_item(group='childactions', name='cancel_upload')
 class ActionCancelUpload(ButtonAction):
     id = 'toolbaraction-cancel-upload'
-    icon = 'glyphicon glyphicon-ban-circle'
+    icon = 'bi bi-x-circle'
     text = _('action_cancel_upload', default='Cancel Upload')
-    css = 'cancel'
+    css = 'cancel dropdown-item py-2 border-bottom alert alert-warning rounded-0 m-0'
     bind = None
     target = None
 
@@ -59,12 +60,13 @@ def display(self):
         )
 
 
+# XXX: not working
 @context_menu_item(group='childactions', name='delete_files')
 class ActionDeleteFiles(ButtonAction):
     id = 'toolbaraction-delete-files'
-    icon = 'glyphicon glyphicon-trash'
+    icon = 'bi bi-trash'
     text = _('action_delete_files', default='Delete Files')
-    css = 'delete'
+    css = 'delete dropdown-item py-2 border-bottom alert alert-danger rounded-0 m-0'
     bind = None
     target = None
 
@@ -91,7 +93,7 @@ def display(self):
     def render(self):
         localizer = get_localizer(self.request)
         return (
-            u'<li class="select-files-action">'
+            u'<li class="select-files-action nav-link">'
             u'  <span>{}<input type="checkbox" class="toggle" /></span>'
             u'</li>'
         ).format(

src/cone/fileupload/browser/fileupload.pt

@@ -26,25 +26,30 @@
     </div>
 
     <!-- The global progress state -->
-    <div class="fileupload-progress fade">
+    <div class="fileupload-progress d-flex align-items-center fade">
 
       <!-- The global progress bar -->
-      <div class="progress progress-striped active col-md-6"
+      <div class="progress border border-primary col-12 col-md-6 active"
            role="progressbar"
            aria-valuemin="0"
            aria-valuemax="100">
-        <div class="progress-bar progress-bar-success"
+        <div class="progress-bar progress-bar-striped progress-bar-animated h-100"
              style="width:0%;"></div>
       </div>
 
       <!-- The extended global progress state -->
-      <div class="progress-extended col-md-6">&nbsp;</div>
+      <div class="progress-extended col-12 col-md-6 ps-3">&nbsp;</div>
     </div>
 
     <!-- The table listing the files available for upload/download -->
-    <table role="presentation" class="table table-striped">
-      <tbody class="files"></tbody>
-    </table>
+    <div class="card fileupload-card">
+      <div class="alert fileupload-empty mb-0">
+        No Files yet.
+      </div>
+      <table role="presentation" class="card-body mb-0 table table-striped">
+        <tbody class="files"></tbody>
+      </table>
+    </div>
   </form>
 
   <tal:i18n_messages replace="structure context.i18n_messages" />

src/cone/fileupload/browser/fileupload.py

@@ -54,6 +54,7 @@ def upload_template(self):
         localizer = get_localizer(self.request)
         translate = localizer.translate
         return self.upload_template_src.format(
+            error=translate(_('error', default=u'Error')),
             processing=translate(_('processing', default=u'Processing...')),
             start=translate(_('start', default=u'Start')),
             cancel=translate(_('cancel', default=u'Cancel')),

src/cone/fileupload/browser/static/fileupload/cone.fileupload.css

@@ -1,16 +1,61 @@
+form#fileupload {
+    container: fileuploadform / inline-size;
+
+    .files td {
+        vertical-align: middle;
+    }
+}
+
 .file_actions {
-    text-align:right;
+    white-space: nowrap;
+    text-align: right;
+
+    input {
+        vertical-align: middle;
+    }
+    .btn {
+        vertical-align: baseline;
+    }
 }
 
-.select-files-action > span {
-    position: relative;
-    display: block;
-    padding: 10px 15px;
-    color: #777;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-    padding-top: 15px;
-    padding-bottom: 15px;
-    line-height: 20px;
+@container fileuploadform (width < 400px) {
+    .file_actions {
+        .btn {
+            line-height: 1.25rem!important;
+            padding: .1rem .25rem!important;
+        }
+    }
+}
+@container fileuploadform (width < 500px) {
+    .fileupload-card  {
+        overflow: hidden;
+    }
+    .fileupload-card table {
+        table-layout: fixed;
+    }
+    td.file_name p.name {
+        text-overflow: ellipsis;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    input[name="delete"] {
+        line-height: normal;
+        vertical-align: bottom;
+    }
+}
+@container fileuploadform (width < 800px) {
+    .file_actions {
+        .btn {
+            padding: .25rem .5rem;
+            line-height: normal;
+            vertical-align: bottom;
+
+            > span {
+                display: none;
+            }
+        }
+    }
 }
 
 .select-files-action > span > input {
@@ -19,3 +64,23 @@
     margin-top: 0px;
     margin-left: 8px;
 }
+
+#toolbaraction-add-files:hover {
+    background-color: var(--bs-green);
+    color: var(--bs-white);
+    transition: all .1s ease-in;
+}
+#toolbaraction-start-upload:hover {
+    background-color: var(--bs-primary);
+    color: var(--bs-white);
+    transition: all .1s ease-in;
+}
+#toolbaraction-cancel-upload:hover {
+    background-color: var(--bs-warning);
+    transition: all .1s ease-in;
+}
+#toolbaraction-delete-files:hover {
+    background-color: var(--bs-red);
+    color: var(--bs-white);
+    transition: all .1s ease-in;
+}

src/cone/fileupload/browser/static/fileupload/cone.fileupload.js

@@ -24,6 +24,12 @@ var cone_fileupload = (function (exports, $) {
                 sequentialUploads: true,
                 messages: fileupload_i18n_messages
             });
+            $('#fileupload').on('click', '.delete', (e) => {
+                e.preventDefault();
+                if ($('.template-upload, .template-download', elem).length === 1) {
+                    $('.fileupload-empty', this.elem).show();
+                }
+            });
             let accept_file_types = elem.data('accept_file_types');
             if (accept_file_types) {
                 elem.fileupload('option', {
@@ -39,6 +45,7 @@ var cone_fileupload = (function (exports, $) {
         add_files_handle(evt) {
             evt.preventDefault();
             $('input:file', this.elem).click();
+            $('.fileupload-empty', this.elem).hide();
         }
         load_existing() {
             this.elem.addClass('fileupload-processing');
@@ -51,6 +58,9 @@ var cone_fileupload = (function (exports, $) {
             }).done(function (result) {
                 $(this).fileupload('option', 'done').call(
                     this, $.Event('done'), {result: result});
+                if (result.files.length > 0) {
+                    $('.fileupload-empty', this).hide();
+                }
             });
         }
     }