Content Table styles

conestack · May 14, 2024 · 15bd54e · 15bd54e
1 parent 658e2ab
commit 15bd54e
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 123 deletions.
diff --git a/scss/colors.scss b/scss/colors.scss
@@ -30,6 +30,11 @@ $color-mode-type: data;
     color: $light;
     background-color: $black;
   }
+
+  #contextmenu {
+    color: $light;
+    background-color: $dropdown-dark-bg;
+  }
 }
 
 /* light mode */
@@ -52,6 +57,11 @@ $color-mode-type: data;
         color: $dark;
         background-color: $light;
     }
+
+    #contextmenu {
+        color: $dark;
+        background-color: $white;
+    }
 }
 
 /* import everything where we need changed bootstrap variables for here */

diff --git a/scss/styles.scss b/scss/styles.scss
@@ -124,4 +124,8 @@ body {
     #header-logo {
         color: #fff;
     }
+}
+
+.table_length, .table_filter {
+    width: unset;
 }
diff --git a/src/cone/app/browser/actions.py b/src/cone/app/browser/actions.py
@@ -258,7 +258,6 @@ def __init__(self, **kw):
     def target(self):
         return make_url(self.request, node=self.model)
 
-
 class ActionUp(LinkAction):
     """One level up action.
     """
@@ -267,6 +266,7 @@ class ActionUp(LinkAction):
     event = 'contextchanged:#layout'
     text = _('action_one_level_up', default='One level up')
     path = 'href'
+    css_class = 'nav-link py-1 pe-3'
 
     @property
     def display(self):
@@ -303,6 +303,7 @@ class ActionView(LinkAction):
     text = _('action_view', default='View')
     href = LinkAction.target
     path = 'href'
+    css_class = 'nav-link p-0'
 
     @property
     def action(self):
@@ -347,6 +348,7 @@ class ActionList(LinkAction):
     action = 'listing:#content:inner'
     path = 'href'
     text = _('action_listing', default='Listing')
+    css_class = 'nav-link p-0'
 
     @property
     def href(self):
@@ -399,6 +401,7 @@ class ActionAdd(TileAction):
     """Add dropdown action.
     """
     tile = 'add_dropdown'
+    css_class = 'nav-link p-0'
 
     @property
     def display(self):
@@ -413,6 +416,7 @@ class ActionEdit(LinkAction):
     action = 'edit:#content:inner'
     path = 'href'
     text = _('action_edit', default='Edit')
+    css_class = 'nav-link p-0'
 
     @property
     def href(self):
@@ -436,6 +440,7 @@ class ActionDelete(LinkAction):
     confirm = _('delete_item_confirm',
                 default='Do you really want to delete this Item?')
     text = _('action_delete', default='Delete')
+    css_class = 'nav-link p-0'
 
     @property
     def display(self):

diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css
@@ -15,6 +15,10 @@
   color: #f8f9fa;
   background-color: #000;
 }
+[data-bs-theme=dark] #contextmenu {
+  color: #f8f9fa;
+  background-color: #343a40;
+}
 
 /* light mode */
 [data-bs-theme=light] #content {
@@ -32,6 +36,10 @@
   color: #212529;
   background-color: #f8f9fa;
 }
+[data-bs-theme=light] #contextmenu {
+  color: #212529;
+  background-color: #fff;
+}
 
 /* import everything where we need changed bootstrap variables for here */
 :root {
@@ -154,3 +162,6 @@ body {
     color: #fff;
   }
 }
+.table_length, .table_filter {
+  width: unset;
+}
diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css
diff --git a/src/cone/app/browser/table.py b/src/cone/app/browser/table.py
@@ -44,7 +44,7 @@ class Table(Tile):
     ajax_path = None
     ajax_path_event = None
 
-    table_length_size = 'col-xs-4 col-sm3'
+    table_length_size = 'col-xs-4 col-sm-3'
     table_filter_size = 'col-xs-3'
 
     @property

diff --git a/src/cone/app/browser/templates/action_dropdown.pt b/src/cone/app/browser/templates/action_dropdown.pt
@@ -6,15 +6,16 @@
 
     <a href="#"
        class="dropdown-toggle ${context.css}"
-       data-toggle="dropdown">
+       data-bs-toggle="dropdown">
       <span class="${context.icon|nothing}"></span>
       <span tal:content="context.title">Title</span>
       <span class="caret"></span>
     </a>
 
-    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+    <ul class="dropdown-menu" role="menu">
       <li role="presentation" tal:repeat="item context.items">
         <a href="${item.url|nothing}"
+           class="dropdown-item"
            role="menuitem"
            tabindex="-1"
            ajax:bind="click"

diff --git a/src/cone/app/browser/templates/add_dropdown.pt b/src/cone/app/browser/templates/add_dropdown.pt
@@ -8,14 +8,15 @@
 
     <a href="#"
        class="dropdown-toggle"
-       data-toggle="dropdown">
+       data-bs-toggle="dropdown">
       <span i18n:translate="add">Add</span>
       <span class="caret"></span>
     </a>
 
     <ul class="dropdown-menu" role="addmenu">
       <li tal:repeat="item context.items">
         <a href="${item.url}"
+           class="dropdown-item"
            ajax:bind="click"
            ajax:target="${item.target}"
            ajax:action="add:#content:inner"

diff --git a/src/cone/app/browser/templates/batch.pt b/src/cone/app/browser/templates/batch.pt
@@ -7,13 +7,14 @@
   <ul class="pagination pagination-sm"
       tal:condition="context.display">
 
-    <tal:fistpage
+    <tal:firstpage
         define="firstpage context.firstpage;
                 invisible not firstpage['visible'] or firstpage['current']"
         condition="firstpage">
 
-      <li tal:condition="not invisible">
+      <li tal:condition="not invisible" class="page-item">
         <a href="${firstpage.get('href', firstpage.get('url'))}"
+           class="page-link"
            ajax:bind="click"
            ajax:target="${firstpage.get('target', firstpage.get('url'))}"
            ajax:event="${context.ajax_event}"
@@ -22,21 +23,23 @@
            i18n:translate="first">First</a>
       </li>
 
-      <li class="disabled"
+      <li class="page-item disabled"
           tal:condition="invisible">
         <a href="javascript:void(0)"
+           class="page-link"
            i18n:translate="first">First</a>
       </li>
 
-    </tal:fistpage>
+    </tal:firstpage>
 
     <tal:prevpage
         define="prevpage context.prevpage;
                 invisible not prevpage['visible'] or prevpage['current']"
         condition="prevpage">
 
-      <li tal:condition="not invisible">
+      <li tal:condition="not invisible" class="page-item">
         <a href="${prevpage.get('href', prevpage.get('url'))}"
+           class="page-link"
            ajax:bind="click"
            ajax:target="${prevpage.get('target', prevpage.get('url'))}"
            ajax:event="${context.ajax_event}"
@@ -45,9 +48,10 @@
            i18n:translate="previous">Previous</a>
       </li>
 
-      <li class="disabled"
+      <li class="page-item disabled"
           tal:condition="invisible">
         <a href="javascript:void(0)"
+           class="page-link"
            i18n:translate="previous">Previous</a>
       </li>
 
@@ -58,8 +62,9 @@
           define="invisible not page['visible'];
                   current page['current']">
 
-        <li tal:condition="not invisible and not current">
+        <li tal:condition="not invisible and not current" class="page-item">
           <a href="${page.get('href', page.get('url'))}"
+             class="page-link"
              ajax:bind="click"
              ajax:target="${page.get('target', page.get('url'))}"
              ajax:event="${context.ajax_event}"
@@ -68,11 +73,12 @@
              tal:content="page['page']">X</a>
         </li>
 
-        <li class="${css}"
+        <li class="${css} page-item"
             tal:define="css invisible and 'invisible' or '';
                         css current and 'active' or css;"
             tal:condition="invisible or current">
           <a href="javascript:void(0)"
+             class="page-link"
              tal:content="page['page']">X</a>
         </li>
 
@@ -84,8 +90,9 @@
                 invisible not nextpage['visible'] or nextpage['current']"
         condition="nextpage">
 
-      <li tal:condition="not invisible">
+      <li tal:condition="not invisible" class="page-item">
         <a href="${nextpage.get('href', nextpage.get('url'))}"
+           class="page-link"
            ajax:bind="click"
            ajax:target="${nextpage.get('target', nextpage.get('url'))}"
            ajax:event="${context.ajax_event}"
@@ -94,9 +101,10 @@
            i18n:translate="next">Next</a>
       </li>
 
-      <li class="disabled"
+      <li class="disabled page-item"
           tal:condition="invisible">
         <a href="javascript:void(0)"
+           class="page-link"
            i18n:translate="next">Next</a>
       </li>
 
@@ -107,8 +115,9 @@
                 invisible not lastpage['visible'] or lastpage['current']"
         condition="lastpage">
 
-      <li tal:condition="not invisible">
+      <li tal:condition="not invisible" class="page-item">
         <a href="${lastpage.get('href', lastpage.get('url'))}"
+           class="page-link"
            ajax:bind="click"
            ajax:target="${lastpage.get('target', lastpage.get('url'))}"
            ajax:event="${context.ajax_event}"
@@ -117,9 +126,10 @@
            i18n:translate="last">Last</a>
       </li>
 
-      <li class="disabled"
+      <li class="disabled page-item"
           tal:condition="invisible">
         <a href="javascript:void(0)"
+           class="page-link"
            i18n:translate="last">Last</a>
       </li>
 

diff --git a/src/cone/app/browser/templates/contextmenu.pt b/src/cone/app/browser/templates/contextmenu.pt
@@ -2,20 +2,18 @@
            xmlns:ajax="http://namespaces.conestack.org/ajax"
            omit-tag="True">
 
-  <div id="contextmenu"
+  <nav id="contextmenu"
        role="contextmenu"
-       class="navbar contextsensitiv position-relative px-3 py-2 shadow-sm"
        ajax:bind="contextactionschanged"
-       ajax:action="contextmenu:#contextmenu:replace">
-
-    <div class="container-fluid">
-
-      <tal:toolbars repeat="toolbar context.toolbars">
-        <tal:toolbar replace="structure toolbar(model, request)" />
-      </tal:toolbars>
-
+       ajax:action="contextmenu:#contextmenu:replace"
+       class="navbar p-0 contextsensitiv navbar-expand rounded shadow-sm">
+    <div class="container-fluid p-0">
+      <ul class="navbar-nav">
+        <tal:toolbars repeat="toolbar context.toolbars">
+          <tal:toolbar replace="structure toolbar(model, request)" />
+        </tal:toolbars>
+      </ul>
     </div>
-
-  </div>
+  </nav>
 
 </tal:block>
diff --git a/src/cone/app/browser/templates/contextmenu_dropdown.pt b/src/cone/app/browser/templates/contextmenu_dropdown.pt
@@ -1,28 +1,20 @@
 <tal:block xmlns:tal="http://xml.zope.org/namespaces/tal"
            omit-tag="True">
 
-  <ul class="nav navbar-nav"
-      tal:condition="context.display">
-
-    <li class="dropdown">
-
-      <a href="#"
-         class="dropdown-toggle"
-         data-toggle="dropdown">
-        <span tal:condition="context.icon"
-              class="${context.icon}"></span>
-        <span tal:content="context.title">Title</span>
-        <span class="caret"></span>
-      </a>
-
-      <ul class="dropdown-menu" role="menu">
-        <li tal:repeat="action context.values()">
+  <li tal:condition="context.display" class="nav-item dropdown py-1">
+    <a class="nav-link dropdown-toggle py-0 px-3" href="#" role="button" data-bs-toggle="dropdown">
+      <span tal:condition="context.icon"
+            class="${context.icon}"></span>
+      <span tal:content="context.title">Title</span>
+      <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu dropdown-menu-end">
+      <li tal:repeat="action context.values()">
+        <div class="dropdown-item">
           <tal:action replace="structure action(model, request)" />
-        </li>
-      </ul>
-
-    </li>
-
-  </ul>
+        </div>
+      </li>
+    </ul>
+  </li>
 
 </tal:block>