V5 edit views UI

girder/girder_large_image/web_client/main.js

@@ -1,3 +1,6 @@
+// import tailwind
+import './stylesheets/importTailwind.css';
+
 // import modules for side effects
 import './routes';
 import './views/fileList';
@@ -12,6 +15,7 @@ import * as largeImage from './index';
 const {registerPluginNamespace} = girder.pluginUtils;
 const SearchFieldWidget = girder.views.widgets.SearchFieldWidget;
 
+console.log('registering plugin namespace for large image');
 registerPluginNamespace('large_image', largeImage);
 
 SearchFieldWidget.addMode(

girder/girder_large_image/web_client/package.json

@@ -26,7 +26,11 @@
         "vue-color": "^2.8.1",
         "vue-loader": "~15.9.8",
         "vue-template-compiler": "~2.6.14",
-        "yaml": "^2.1.1"
+        "vuedraggable": "^2.24.3",
+        "yaml": "^2.1.1",
+        "autoprefixer": "^10.4.21",
+        "postcss": "^8.5.3",
+        "tailwindcss": "^3.4.17"
     },
     "main": "./index.js",
     "eslintConfig": {
@@ -76,6 +80,7 @@
     ],
     "pugLintConfig": {
         "extends": "@girder/pug-lint-config",
+        "disallowHtmlText": null,
         "excludeFiles": [
             "**/node_modules/"
         ]

girder/girder_large_image/web_client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

girder/girder_large_image/web_client/stylesheets/importTailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

girder/girder_large_image/web_client/stylesheets/itemList.styl

@@ -24,75 +24,6 @@ div.large_image_container+span
   div.large_image_container
     min-width 480px
 
-ul.g-item-list
-  &.li-item-list
-    display table
-    background #fff
-
-    >li
-      display table-row
-
-      &.li-item-list-header
-        padding-bottom 5px
-
-      >span.li-item-list-header
-        display table-cell
-        font-weight bold
-        text-align center
-        border-bottom 1px solid #888
-        padding 0 5px
-
-        &.sortable
-          &:after
-            color black
-            content "\002b65"
-            padding-left 5px
-
-          &.down:after
-            content "\002b63"
-
-          &.up:after
-            content "\002b61"
-
-      >.li-item-list-cell
-        display table-cell
-        padding 4px 3px 3px
-        vertical-align top
-
-        &.li-column-record-size
-          div
-            float none
-            margin-left 0
-            padding 0 10px
-
-        &.li-column-record-controls
-          white-space nowrap
-
-      >span.li-item-list-cell:first-child
-        padding-left 5px
-
-      >span.li-item-list-cell:last-child
-        padding-right 5px
-
-      >span.li-column-metadata
-        padding-left 5px
-        padding-right 5px
-
-      div.large_image_thumbnail
-        display flex
-        align-items flex-end
-        justify-content center
-        width inherit
-
-    span.g-item-list-label
-      font-weight bold
-      font-size 14px
-      color black
-      padding-right 5px
-
-    span.large_image_metadata
-      display inline-block
-
   &.li-item-list[layout_mode="grid"]
     display block
 
@@ -114,9 +45,6 @@ ul.g-item-list[metadata-columns="0"]
   .li-column-record-name
     width 100%
 
-.li-item-list-filter
-  padding-left 12px
-
 @media (min-width 768px)
   .modal-dialog.li-item-list-dialog
     width inherit
@@ -126,36 +54,8 @@ ul.g-item-list[metadata-columns="0"]
     width 70%
     max-width 1000px
 
-.li-flatten-item-list
-  font-size 14px
-  display inline-block
-  margin-left 20px
-
-  label
-    padding-left 5px
-    font-weight normal
-
-.g-hierarchy-widget .g-hierarchy-actions-header.li-item-list-filter-parent
-  display flex
-  align-items baseline
-
-  button.g-checked-actions-button
-    float unset
-
-  .li-item-list-filter
-    flex 1
-    display flex
-    align-items baseline
-
-    input
-      flex 1
-
-    .li-item-list-filter-clear
-      cursor pointer
-      margin-right 20px
-
-.g-hierarchy-widget .g-hierarchy-breadcrumb-bar ol.breadcrumb.li-item-list-filter-parent
-  white-space wrap
+.li-item-list-filter
+  padding-top 11px
 
-  .li-item-list-filter
-    white-space nowrap
+.li-item-list-filter-clear
+  cursor pointer

girder/girder_large_image/web_client/tailwind.config.js

@@ -0,0 +1,41 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./views/**/*.{js,ts,jsx,tsx,styl,css,pug,vue}",
+    "./templates/**/*.{js,ts,jsx,tsx,styl,css,pug,vue}",
+    "./stylesheets/**/*.{js,ts,jsx,tsx,styl,css,pug,vue}",
+    "./vue/**/*.{js,ts,jsx,tsx,styl,css,pug,vue}",
+    "./widgets/**/*.{js,ts,jsx,tsx,styl,css,pug,vue}",
+    "./*.{js,ts,jsx,tsx,styl,css,pug,vue}",
+  ],
+  safelist: [
+    {
+      pattern: /.*/, // Match all class names since plugins may use anything
+    },
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'hsl(var(--primary-h), var(--primary-s), var(--primary-l))',
+          hover: 'var(--primary-hover)',
+          content: 'var(--primary-content)',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l))',
+          hover: 'var(--secondary-hover)',
+          content: 'var(--secondary-content)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent-h), var(--accent-s), var(--accent-l))',
+          hover: 'var(--accent-hover)',
+          content: 'var(--accent-content)',
+        },
+      },
+      zIndex: {
+        '100': '100',
+      },
+    },
+  },
+  blocklist: ['collapse'], // disable because bootstrap uses it for something else
+}