admin: evolve backoffice style (#7454)

wcs/admin/categories.py

@@ -175,6 +175,8 @@ class CategoriesDirectory(Directory):
         html_top('categories', title = _('Categories'))
         r = TemplateIO(html=True)
 
+        r += htmltext('<div class="bo-block">')
+        r += htmltext('<h2>%s</h2>') % _('Categories')
         r += htmltext('<ul class="biglist sortable" id="category-list">')
         categories = Category.select()
         Category.sort_by_position(categories)
@@ -185,6 +187,7 @@ class CategoriesDirectory(Directory):
             r += htmltext('<p class="details">')
             r += htmltext('</p></li>')
         r += htmltext('</ul>')
+        r += htmltext('</div>')
         return r.getvalue()
 
     def get_sidebar(self):

wcs/admin/forms.py

@@ -1464,12 +1464,12 @@ class FormsDirectory(AccessControlled, Directory):
             else:
                 r += htmltext('<li>')
             r += htmltext('<strong class="label"><a href="%s/">%s</a></strong>') % (formdef.id, formdef.name)
-            r += htmltext('<p class="details">')
             if formdef.disabled and formdef.disabled_redirection:
+                r += htmltext('<p class="details">')
                 r += htmltext('(<a href="%s">') % formdef.disabled_redirection
                 r += _('redirection')
                 r += htmltext('</a>) ')
-            r += htmltext('</p>')
+                r += htmltext('</p>')
             r += htmltext('</li>')
         r += htmltext('</ul>')
         r += htmltext('</div>')

wcs/admin/roles.py

@@ -206,6 +206,8 @@ class RolesDirectory(Directory):
         html_top('roles', title = _('Roles'))
         r = TemplateIO(html=True)
 
+        r += htmltext('<div class="bo-block">')
+        r += htmltext('<h2>%s</h2>') % _('Roles')
         r += htmltext('<ul class="biglist">')
         for role in Role.select(order_by = 'name'):
             r += htmltext('<li>')
@@ -213,6 +215,7 @@ class RolesDirectory(Directory):
             r += htmltext('<p class="details">')
             r += htmltext('</p></li>')
         r += htmltext('</ul>')
+        r += htmltext('</div>')
         return r.getvalue()
 
     def get_sidebar(self):

wcs/admin/users.py

@@ -372,6 +372,8 @@ class UsersDirectory(Directory):
 
         r += htmltext('</ul>')
 
+        r += htmltext('<div class="bo-block">')
+        r += htmltext('<h2>%s</h2>') % _('Users')
         r += htmltext('<ul class="biglist">')
         for user in users:
             if user.is_admin:
@@ -381,13 +383,15 @@ class UsersDirectory(Directory):
             else:
                 r += htmltext('<li class="simple-user">')
             r += htmltext('<strong class="label"><a href="%s/">%s</a></strong>') % (user.id, user.display_name)
-            r += htmltext('<p class="details">')
+            if user.email and False:
-            if user.email:
+                r += htmltext('<p class="details">')
                 r += user.email
-            r += htmltext('</p></li>')
+                r += htmltext('</p>')
+            r += htmltext('</li>')
         r += htmltext('</ul>')
 
         r += pagination_links(offset, limit, filtered_count)
+        r += htmltext('</div>')
 
         r += htmltext('</div>')
 

wcs/admin/workflows.py

@@ -1023,13 +1023,15 @@ class WorkflowsDirectory(Directory):
 
         get_response().filter['sidebar'] = self.get_sidebar()
 
+        r += htmltext('<div class="bo-block">')
+        r += htmltext('<h2>%s</h2>') % _('Workflows')
         r += htmltext('<ul class="biglist">')
         for workflow in [Workflow.get_default_workflow()] + Workflow.select(order_by = 'name'):
             r += htmltext('<li>')
             r += htmltext('<strong class="label"><a href="%s/">%s</a></strong>') % (workflow.id, workflow.name)
-            r += htmltext('<p class="details">')
+            r += htmltext('</li>')
-            r += htmltext('</p></li>')
         r += htmltext('</ul>')
+        r += htmltext('</div>') # .bo-block
         return r.getvalue()
 
     def get_sidebar(self):

wcs/backoffice/management.py

@@ -219,7 +219,7 @@ class ManagementDirectory(Directory):
 
     def display_forms(self, forms_list):
         r = TemplateIO(html=True)
-        r += htmltext('<ul>')
+        r += htmltext('<ul class="biglist">')
         cats = Category.select(order_by = 'name')
         for c in cats + [None]:
             if c is None:
@@ -230,17 +230,20 @@ class ManagementDirectory(Directory):
                 cat_name = c.name
             if not l2:
                 continue
-            r += htmltext('<li>%s</li>') % cat_name
+            r += htmltext('<li><h3>%s</h3></li>') % cat_name
-            r += htmltext('<ul>')
             for formdef, no_pending, no_total in l2:
-                r += htmltext('<li><a href="%s/">%s</a>') % (formdef.url_name, formdef.name)
+                r += htmltext('<li><strong><a href="%s/">%s</a></strong>') % (formdef.url_name, formdef.name)
+                klass = ''
+                if no_total:
+                    klass = 'badge'
+                r += htmltext('<p class="details %s">' % klass)
                 if no_pending:
-                    r += _(': %(pending)s open on %(total)s') % {'pending': no_pending,
+                    r += _('%(pending)s open on %(total)s') % {'pending': no_pending,
                                                         'total': no_total}
                 else:
-                    r += _(': %(total)s items') % {'total': no_total}
+                    r += _('%(total)s items') % {'total': no_total}
+                r += htmltext('</p>')
                 r += htmltext('</li>')
-            r += htmltext('</ul>')
         r += htmltext('</ul>')
         return r.getvalue()
 

wcs/qommon/backoffice/listing.py

@@ -33,23 +33,10 @@ def pagination_links(offset, limit, total_count):
         query['limit'] = limit
         if 'ajax' in query:
             del query['ajax']
-        r += htmltext('<a data-offset="%s" href="?%s">%s</a>') % (
+        r += htmltext('<a class="previous-page" data-offset="%s" href="?%s"><!--%s--></a>') % (
                 query['offset'], urllib.urlencode(query, doseq=1), _('Previous Page'))
     else:
-        r += _('Previous Page')
+        r += htmltext('<span class="previous-page"><!--%s--></span>') % _('Previous Page')
-
-    r += ' - '
-
-    if offset + limit < total_count:
-        # link to next page
-        query['offset'] = offset+limit
-        query['limit'] = limit
-        if 'ajax' in query:
-            del query['ajax']
-        r += htmltext('<a data-offset="%s" href="?%s">%s</a>') % (
-                query['offset'], urllib.urlencode(query, doseq=1), _('Next Page'))
-    else:
-        r += _('Next Page')
 
     # display links to individual pages
     page_range = 7
@@ -84,5 +71,17 @@ def pagination_links(offset, limit, total_count):
                     page_number)
     r += htmltext('</span>') # <!-- .pages -->
 
+    if offset + limit < total_count:
+        # link to next page
+        query['offset'] = offset+limit
+        query['limit'] = limit
+        if 'ajax' in query:
+            del query['ajax']
+        r += htmltext('<a class="next-page" data-offset="%s" href="?%s"><!--%s--></a>') % (
+                query['offset'], urllib.urlencode(query, doseq=1), _('Next Page'))
+    else:
+        r += htmltext('<span class="next-page"><!--%s--></span>') % _('Next Page')
+
+
     r += htmltext('</div>')
     return r.getvalue()

wcs/qommon/static/css/dc2/admin.css

@@ -37,15 +37,14 @@ li.biglistitem {
 
 ul.biglist li .details,
 li.biglistitem .details {
-	display: block;
 	margin: 0;
 	color: #555;
 	font-size: 80%;
 	display: inline;
-	padding-left: 10px;
+	padding: 0 1ex;
-	font-style: italic;
 }
 
+
 ul.biglist li p.commands,
 li.biglistitem p.commands {
 	float: right;
@@ -375,12 +374,11 @@ div.page-nav span.page-count-label {
 	margin: 0 1ex;
 }
 
-ul.biglist li.user-is-admin {
+div.bo-block ul.biglist li.user-is-admin strong a {
 	border-left: 5px solid #0099ff;
 }
 
-ul.biglist li.user-has-roles {
+div.bo-block ul.biglist li.user-has-roles strong a {
-	border-left-color: green;
 	border-left: 5px solid #cc00ff;
 }
 
@@ -513,7 +511,68 @@ div#sidebar div.bo-block {
 }
 
 div.bo-block ul.biglist {
-	padding-left: 0em;
+	margin: 0 -1ex -1ex -1ex;
+	padding: 0;
+}
+
+div.bo-block h2 {
+	font-size: 200%;
+	border: none;
+	/*
+	padding: 0.5ex 1ex 0.5ex 1ex;
+	margin: -1ex -1ex -0 -1ex;
+	background: white;
+	*/
+
+	padding: 0.5ex 0 0.5ex 0;
+	margin: 0;
+}
+
+div.bo-block ul.biglist li {
+	border-width: 1px 0 0 0;
+	border-color: #e4e4e4;
+	padding: 0;
+}
+
+div.bo-block ul.biglist h3 {
+	padding: 1ex;
+	font-weight: normal;
+	margin: 0;
+}
+
+div.bo-block ul.biglist li.disabled {
+	background: none;
+}
+
+div.bo-block ul.biglist li.disabled a {
+	color: #888;
+}
+
+div.bo-block ul.biglist li > a,
+div.bo-block ul.biglist strong a {
+	display: block;
+	padding: 0.5ex 1ex;
+	border: none;
+	font-weight: normal;
+	color: #215D9C;
+	transition: all 0.25s ease 0s;
+}
+
+div.bo-block ul.biglist p.details {
+	position: absolute;
+	top: 0.5ex;
+	right: 1ex;
+	background: transparent;
+}
+
+div.bo-block ul.biglist p.details.badge {
+	background-color: #AD7C6D;
+	border-radius: 5px;
+	color: white;
+}
+
+div.bo-block ul.biglist a:hover {
+	background: #ccc;
 }
 
 div.bo-block span.disabled a {
@@ -579,21 +638,39 @@ h3 span.change {
 }
 
 div#page-links {
-	margin: 1em 0;
+	margin: 1em -1ex;
+	padding: 2ex 1ex 0 1ex;
 }
 
+#page-links .previous-page,
+#page-links .next-page {
+	display: inline-block;
+}
+
+#page-links .previous-page:before {
+	content: "<";
+}
+
+#page-links .next-page:before {
+	content: ">";
+}
+
+
 div#page-links span.pages {
-	border-left: 1px solid #666;
+	padding-left: 1ex;
-	padding-left: 2ex;
+	margin-left: 1ex;
-	margin-left: 2ex;
 }
 
-div#page-links span.pages a {
+div#page-links a {
-	padding: 0 2px;
+	padding: 1ex 1.5ex;
+	border: none;
+	display: inline-block;
 }
 
 div#page-links span.pages a.current {
-	font-weight: bold;
+	background: #EE6E73;
+	color: white;
+	border-radius: 2px;
 }
 
 ul#fields-filter {
@@ -706,6 +783,19 @@ div.SubmitWidget input:hover, input[type=submit]:hover {
   border-color: #666;
 }
 
+div.DataSourceSelectionWidget div.content input[type=text],
+div.PrefillSelectionWidget div.content input[type=text] {
+	max-width: 50%;
+	margin: 0 1ex;
+}
+
+div.DataSourceSelectionWidget div.content input[type=submit],
+div.PrefillSelectionWidget div.content input[type=submit] {
+	padding: 0 1ex;
+	margin: 0 0 0 1ex;
+	height: 1.8em;
+}
+
 ul#field-filter,
 ul#columns-filter {
 	list-style: none;

wcs/qommon/static/css/dc2/gadjo.css

@@ -98,8 +98,7 @@ ul.user-info a {
 /* header */
 
 div#header {
-	background: #ff7800;
+	background: #AD7C6D url(adwaita-lock.jpg);
-	background: linear-gradient(to bottom, #f13600 5%, #ff7800 30%) top right no-repeat;
 	color: white;
 	padding-left: 25px;
 	border-bottom: 1px solid #888;
@@ -107,18 +106,6 @@ div#header {
 	height: 5em;
 }
 
-div#header h1:after {
-	content: "";
-	display: block;
-	background: url(../images/banner-green.jpg) top right no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0px;
-	width: calc(100% - 15em);
-	max-width: 75%;
-	height: 100%;
-}
-
 div#header h1 {
 	margin: 0;
 	padding: 15px 0 25px 0;
@@ -130,9 +117,9 @@ div#header h1 {
 
 div#main-content {
 	width: 95%;
-	margin-left: 2%;
+	margin-left: 0;
-	padding: 0 6px;
+	padding: 0 6px 0 16px;
-	border: 1px solid #888;
+	border: 1px solid #ccc;
 	border-width: 0 1px 1px 0;
 	background: white;
 	float: left;
@@ -175,10 +162,10 @@ span#breadcrumb {
 }
 
 span#breadcrumb a {
-	display: inline;
+	display: inline-block;
 	padding-left: 20px;
 	position: relative;
-	height: 26px;
+	height: 14px;
 	margin-left: -4px;
 }
 
@@ -189,8 +176,8 @@ span#breadcrumb a:first-child {
 
 span#breadcrumb a:after {
 	content: "";
-	height: 20px;
+	height: 22px;
-	width: 20px;
+	width: 22px;
 	-webkit-transform: scale(0.4, 0.707) rotate(45deg);
 	-moz-transform: scale(0.4, 0.707) rotate(45deg);
 	transform: scale(0.4, 0.707) rotate(45deg);
@@ -332,8 +319,8 @@ a[class^="icon-"], a[class*=" icon-"] {
 	color: #FF7800;
 }
 
-.icon-home-space:before	   { content: "\f015  "; }
+.icon-home-space:before           { content: "\f015\00a0\00a0"; }
-.icon-remove-sign:before	  { content: "\f057"; }
+.icon-remove-sign:before          { content: "\f057"; }
 
 /* misc */
 
@@ -429,13 +416,6 @@ a.button {
 	padding-bottom: calc(1ex + 1px);
 }
 
-a.button.disabled, button[disabled] {
-	background: #f9f9f9;
-	color: #888;
-	box-shadow: none;
-	cursor: default;
-}
-
 input[type="submit"][name="submit"] {
 	background: #283c54;
 	background-image: linear-gradient(to bottom, #1cabe7, #1999cd);
@@ -447,6 +427,36 @@ input[type=submit]:hover {
 	border-color: #666;
 }
 
+/* disabled items */
+textarea.disabled:focus,
+input.disabled[type="text"]:focus,
+input.disabled[type="email"]:focus,
+input.disabled[type="password"]:focus,
+textarea.disabled,
+input.disabled[type="text"],
+input.disabled[type="email"],
+input.disabled[type="password"],
+textarea.disabled:focus,
+input.disabled[type="text"]:focus,
+input.disabled[type="email"]:focus,
+input.disabled[type="password"]:focus,
+a.button.disabled, button.disabled, button[disabled] {
+	border: 1px solid #bbb;
+	background: #f9f9f9;
+	cursor: default;
+	box-shadow: none;
+	color: #888;
+}
+
+a.disabled {
+	color: #888;
+	text-decoration: none;
+	border: none;
+	cursor: default;
+}
+
+/* dialog styling */
+
 .ui-dialog .ui-widget-content .ui-state-default.delete-button {
 	background: #bc4c38;
 	background-image: linear-gradient(to bottom, #dc2c18, #a43c28);
@@ -550,7 +560,6 @@ form.small button + a.button {
 #sidepage {
 	position: absolute;
 	z-index: 100;
-	background: black;
 	width: 30ex;
 	height: 2em;
 	text-align: left;
@@ -563,16 +572,20 @@ form.small button + a.button {
 }
 
 #main.enable-transitions,
+#sidepage.enable-transitions ul#sidepage-menu,
 #sidepage.enable-transitions {
-	transition-duration: 100ms;
+	transition-duration: 400ms;
 }
 
 #sidepage.sidepage-expanded {
 	height: 100%;
-	background: #23282d url(texture.png);
 	overflow: initial;
 }
 
+#sidepage.sidepage-expanded ul#sidepage-menu {
+	transform: scale(1);
+}
+
 #main {
 	transition: margin-left 0ms ease-in;
 }
@@ -588,6 +601,14 @@ form.small button + a.button {
 #sidepage ul#sidepage-menu {
 	list-style: none;
 	padding: 0;
+	padding-top: 1em;
+	margin: 0;
+	background: #23282d url(texture.png);
+	height: 100%;
+	height: calc(100% - 3em); /* #top 2em, padding-top: 1em */
+	transition: all 0ms ease;
+	transform: scale(1, 0);
+	transform-origin: 0 0;
 }
 
 #sidepage ul#sidepage-menu a {