Skip to content

Commit

Permalink
Make it easier to get to the form buttons in large folders (#538)
Browse files Browse the repository at this point in the history 
fixes #537 

* - Always keep action buttons visible on the content list for large folders

* optmized visibility of zmi-controls to viewport height

* added media rule for small screens

* redesigned Ordered-Folder controls; monotonized obj-select behavior

* - fix linting
  • Loading branch information
@dataflake
dataflake authored Apr 10, 2019
1 parent eed8f0c commit db0f01c
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 46 deletions.
3 changes: 3 additions & 0 deletions CHANGES.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ Features
Other changes
+++++++++++++

- Always keep action buttons visible on the content list for large folders
(`#537 <https://github.com/zopefoundation/Zope/issues/537>`_)

- Make showing the ZMI modal add dialog configurable per product
(`#535 <https://github.com/zopefoundation/Zope/issues/535>`_)

Expand Down
2 changes: 1 addition & 1 deletion src/App/dtml/manage_page_header.dtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,5 @@

</head>
<!-- REFACT what is a better way to get the last part of the current URL? -->
<body id="nodeid-<dtml-var "getId()">" class="zmi zmi-<dtml-var "this().meta_type.replace(' ', '-')"> zmi-<dtml-var "URL0[_.len(URL1)+1:]">">
<body id="nodeid-<dtml-var "getId()">" class="zmi zmi-<dtml-var "this().meta_type.replace(' ', '-').replace('(', '').replace(')', '')"> zmi-<dtml-var "URL0[_.len(URL1)+1:]">">
</dtml-unless>
91 changes: 66 additions & 25 deletions src/OFS/zpt/main.zpt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<tal:tabs replace="structure here/manage_tabs" />

<main class="container-fluid">
<form name="objectItems"
method="post"
<form id="objectItems" name="objectItems" method="post"
tal:define="has_order_support python:getattr(here.aq_explicit, 'has_order_support', 0);
sm modules/AccessControl/SecurityManagement/getSecurityManager;
default_sort python: 'position' if has_order_support else 'id';
Expand Down Expand Up @@ -73,7 +72,8 @@
<tr tal:repeat="ob_dict obs">
<tal:obj define="ob nocall:ob_dict/obj">
<td class="zmi-object-check text-right" onclick="$(this).children('input').trigger('click');">
<input type="checkbox" class="checkbox-list-item" name="ids:list" tal:attributes="value ob_dict/id" onclick="event.stopPropagation();$(this).parent().parent().toggleClass('checked');" />
<input type="checkbox" class="checkbox-list-item" name="ids:list" tal:attributes="value ob_dict/id"
onclick="event.stopPropagation();select_objectitem($(this));" />
</td>
<td class="zmi-object-type" onclick="$(this).prev().children('input').trigger('click')">
<i title="Broken object" class="fas fa-ban text-danger" tal:attributes="class ob/zmi_icon | default; title ob/meta_type | default">
Expand All @@ -100,32 +100,44 @@
</tbody>
</table>

<div class="form-group zmi-controls" tal:define="
delete_allowed python:sm.checkPermission('Delete objects', context)" tal:condition="obs">
<tal:copy-paste condition="not:context/dontAllowCopyAndPaste|nothing">
<input class="btn btn-primary" type="submit" name="manage_renameForm:method" value="Rename" />
<input class="btn btn-primary" type="submit" name="manage_cutObjects:method" value="Cut" tal:condition="delete_allowed" />
<input class="btn btn-primary" type="submit" name="manage_copyObjects:method" value="Copy" />
<input class="btn btn-primary" type="submit" name="manage_pasteObjects:method" value="Paste" tal:condition="here/cb_dataValid" />
</tal:copy-paste>
<input class="btn btn-primary" type="submit" name="manage_delObjects:method" value="Delete" tal:condition="delete_allowed" />
<input class="btn btn-primary" type="submit" name="manage_importExportForm:method" value="Import/Export" tal:condition="python:sm.checkPermission('Import/Export objects', context)" />
</div>
<div class="container-fluid">
<div class="form-group row zmi-controls" tal:condition="python: has_order_support and sm.checkPermission('Manage properties', context)">
<input type="submit" name="manage_move_objects_up:method" value="Move up" title="Move selected items up" class="btn btn-primary" />
<span>/</span>
<input type="submit" name="manage_move_objects_down:method" value="Move down" title="Move selected items down" class="btn btn-primary" />
<span>by</span>
<div class="col-xs-2">
<select class="form-control" name="delta:int">
<div class="form-group form-inline zmi-controls" tal:define="
delete_allowed python:sm.checkPermission('Delete objects', context)" tal:condition="obs">
<div class="input-group">
<tal:copy-paste condition="not:context/dontAllowCopyAndPaste|nothing">
<input class="btn btn-primary mr-2" type="submit" name="manage_renameForm:method" value="Rename" />
<input class="btn btn-primary mr-2" type="submit" name="manage_cutObjects:method" value="Cut" tal:condition="delete_allowed" />
<input class="btn btn-primary mr-2" type="submit" name="manage_copyObjects:method" value="Copy" />
<input class="btn btn-primary mr-2" type="submit" name="manage_pasteObjects:method" value="Paste" tal:condition="here/cb_dataValid" />
</tal:copy-paste>
<input class="btn btn-primary mr-2" type="submit" name="manage_delObjects:method" value="Delete" tal:condition="delete_allowed" />
<input class="btn btn-primary mr-2" type="submit" name="manage_importExportForm:method" value="Import/Export" tal:condition="python:sm.checkPermission('Import/Export objects', context)" />

<div class="input-group" tal:condition="python: has_order_support and sm.checkPermission('Manage properties', context)">
<select class="form-control btn btn-primary" name="delta:int">
<option tal:repeat="val python:range(1,min(5,len(obs)))" tal:content="val" />
<option tal:repeat="val python:range(5,len(obs),5)" tal:content="val" />
</select>
<div class="input-group-append">
<button type="submit" name="manage_move_objects_up:method" value="Move up"
title="Move selected items up" class="btn btn-primary">
<i class="fas fa-arrow-up"></i>
</button>
<button type="submit" name="manage_move_objects_down:method" value="Move down"
title="Move selected items down" class="btn btn-primary rounded-right">
<i class="fas fa-arrow-down"></i>
</button>
</div>
<button type="submit" name="manage_move_objects_to_top:method" value="Move to top"
title="Move selected items to top" class="btn btn-primary ml-2 mr-2">
<i class="fas fa-arrow-up" style="border-top: 0.2rem solid silver;"></i>
</button>
<button type="submit" name="manage_move_objects_to_bottom:method" value="Move to bottom"
title="Move selected items to bottom" class="btn btn-primary">
<i class="fas fa-arrow-down" style="border-bottom: 0.2rem solid silver;"></i>
</button>
</div>
<input type="submit" name="manage_move_objects_to_top:method" value="Move to top" class="btn btn-primary" title="Move selected items to top" />
<input type="submit" name="manage_move_objects_to_bottom:method" value="Move to bottom" class="btn btn-primary" title="Move selected items to bottom" />
</div>

</div>
</tal:not-empty>

Expand All @@ -146,7 +158,7 @@

<script>
// +++++++++++++++++++++++++++
// checkbox_all: Item Selection
// Item Selection
// +++++++++++++++++++++++++++
function checkbox_all() {
var checkboxes = document.getElementsByClassName('checkbox-list-item');
Expand All @@ -162,6 +174,35 @@
}
};

function zmicontrols_visible() {
var zmicontrols = $('form#objectItems .zmi-controls');
var zmicontrols_top = zmicontrols.offset().top;
var zmicontrols_bottom = zmicontrols_top + zmicontrols.outerHeight();
var viewport_top = $(window).scrollTop();
var viewport_bottom = viewport_top + $(window).height();
return zmicontrols_bottom > viewport_top && zmicontrols_top < viewport_bottom;
};

function select_objectitem(ob) {
ob.parent().parent().toggleClass('checked');
if ( !zmicontrols_visible() ) {
$('form#objectItems').addClass('selected');
}
// Anything selected?
var checkboxes = document.getElementsByClassName('checkbox-list-item');
var selected = false;
for (i = 0; i < checkboxes.length; i++) {
if ( checkboxes[i].checked ) {
selected = true;
break;
}
}
if ( !selected ) {
$('form#objectItems').removeClass('selected');
console.log('form#objectItems removed .selected');
}
};


$(function () {

Expand Down
1 change: 1 addition & 0 deletions src/Zope2/utilities/mkwsgiinstance.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ def check_buildout(script_path):
if os.path.isfile(zope_py) and os.access(zope_py, os.X_OK):
return True


def get_zope2path(python):
""" Get Zope2 path from selected Python interpreter.
"""
Expand Down
71 changes: 51 additions & 20 deletions src/zmi/styles/resources/zmi_base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}

body.zmi {
font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.zmi:not(.zmi-manage_menu) main,
Expand Down Expand Up @@ -46,14 +46,6 @@ a:hover {
::-ms-input-placeholder {
color:rgba(108, 117, 125, .5) !important;
}

.zmi a.btn.btn-primary,
.zmi input.btn.btn-primary {
background-color:white !important;
color:#6c757d;
border-color:#6c757d;
min-width: 7em;
}
.h2, h2 {
font-size: 1.5rem;
margin: 2rem 0 1rem;
Expand All @@ -62,11 +54,6 @@ a:hover {
font-size: 1.25rem;
margin: 2rem 0 .5rem;
}

input.btn.btn-primary:hover {
background-color:#e9ecef !important;
}

.zmi {
background-color:#fcfcfc;
}
Expand All @@ -93,9 +80,22 @@ input.btn.btn-primary:hover {
margin-top:1.75rem
}
.zmi-controls > * {
margin-right:.5rem;
X-margin-right:.5rem;
margin-bottom:.6rem;
min-width: 7em;
X-min-width: 7em;
}

.zmi .zmi-controls .btn.btn-primary,
.zmi a.btn.btn-primary,
.zmi input.btn.btn-primary {
background-color:white !important;
color:#6c757d;
border-color:#6c757d;
X-min-width: 7em;
}
.zmi-controls .btn.btn-primary:hover,
input.btn.btn-primary:hover {
background-color:#e9ecef !important;
}

form.zmi-upload {
Expand Down Expand Up @@ -235,11 +235,42 @@ form.zmi-upload {
.zmi table.objectItems tr.checked {
background-color:#007bff1c !important;
}
.zmi form[name="objectItems"] div.zmi-controls.row span {
padding: .375rem .25rem;
min-width: initial;
.zmi form#objectItems .zmi-controls {
white-space: nowrap;
overflow: auto;
}
.zmi form#objectItems.selected {
margin-bottom: 4.5rem;
}
.zmi form#objectItems.selected .zmi-controls {
position: fixed;
bottom: 0;
height: 4rem;
background: rgb(233, 236, 239);
width: 100vw;
margin: 0 -1rem;
padding: 0.75rem 1rem;
}
.zmi form#objectItems .zmi-controls .input-group select {
max-width: 4rem;
}
@media (max-width: 768px) {
.zmi.zmi-Folder-Ordered form#objectItems .zmi-controls {
height: 7rem;
}
.zmi form#objectItems .zmi-controls > .input-group {
width:100%;
display:block;
}
.zmi form#objectItems .zmi-controls .input-group .input-group {
margin-top:.5rem;
}
}
@media (min-width: 960px) {
.zmi form#objectItems .zmi-controls > .input-group input.btn {
min-width:7rem;
}
}


/* Table Object-Items: Sorting Links*/

Expand Down

0 comments on commit db0f01c

Please sign in to comment.