[gen] Improvements in the rendering of buttons throughout the web UI. [gen] Ref field and Search: added param 'showActions' allowing to show or not the range of icons and buttons below or besides every tied or queried object.

This commit is contained in:
Gaetan Delannay 2015-01-19 15:44:09 +01:00
parent a905aaa139
commit 34cafcdbc1
10 changed files with 171 additions and 163 deletions

View file

@ -1227,12 +1227,17 @@ class ToolMixin(BaseMixin):
"})();\n" % gaId
return code
def getButtonWidth(self, label):
'''Determine button width, in pixels, corresponding to the button
p_label.'''
# Set a minimum width for small labels.
if len(label) < 15: return 'width:130px'
return 'padding-left: 26px; padding-right: 8px'
def getButtonCss(self, label, small=True):
'''Gets the CSS class(es) to set on a button, given it l_label and its
size (p_small or not).'''
# CSS for a small button. No minimum width applies: small button are
# meant to be small.
if small: return 'buttonSmall button'
# CSS for a normal button. A minimum width (via buttonFixed) is defined
# when the label is small: it produces ranges of buttons of the same
# width (excepted when labels are too large), which is more beautiful.
if len(label) < 15: return 'buttonFixed button'
return 'button'
def getLinksTargetInfo(self, klass):
'''Appy allows to open links to view or edit instances of p_klass

View file

@ -211,7 +211,8 @@ class Group(ModelClass):
back=gen.Ref(attribute='groups', show=User.showRoles,
multiplicity=(0,None)),
select=getSelectableUsers, height=15,
showHeaders=True, shownInfo=('title', 'login'))
showHeaders=True, shownInfo=('title', 'login'),
showActions='inline')
# The Translation class --------------------------------------------------------
class Translation(ModelClass):
@ -274,7 +275,7 @@ class Tool(ModelClass):
users = gen.Ref(User, multiplicity=(0,None), add=True, link=False,
back=gen.Ref(attribute='toTool', show=False), page=userPage,
queryable=True, queryFields=('title', 'login'),
show=isManager, showHeaders=True,
show=isManager, showHeaders=True, showActions='inline',
shownInfo=('title', 'login*120px', 'roles*120px'))
def computeConnectedUsers(self): pass
@ -289,7 +290,7 @@ class Tool(ModelClass):
back=gen.Ref(attribute='toTool2', show=False),
page=gen.Page('groups', show=isManager), show=isManager,
queryable=True, queryFields=('title', 'login'),
showHeaders=True,
showHeaders=True, showActions='inline',
shownInfo=('title', 'login*120px', 'roles*120px'))
pt = gen.Page('translations', show=isManager)
translations = gen.Ref(Translation, multiplicity=(0,None), add=False,
@ -299,7 +300,7 @@ class Tool(ModelClass):
layouts='f')
pages = gen.Ref(Page, multiplicity=(0,None), add=True, link=False,
show='view', back=gen.Ref(attribute='toTool3', show=False),
page=gen.Page('pages', show=isManager))
showActions='inline', page=gen.Page('pages',show=isManager))
@classmethod
def _appy_clean(klass):

View file

@ -11,8 +11,8 @@ h4 { font-size: 11pt; margin:4px 0 4px 0 }
h5 { font-size: 10pt; margin:0; font-style: italic; font-weight: normal;
background-color: #d7dee4 }
h6 { font-size: 9pt; margin:0; font-weight: bold }
a { text-decoration: none; color: #436976 }
a:visited { color: #436976 }
a { text-decoration: none; color: #114353 }
a:visited { color: #114353 }
table { font-size: 100%; border-spacing: 0px; border-collapse:collapse }
form { margin: 0; padding: 0 }
p { margin: 0 0 5px 0 }
@ -57,12 +57,12 @@ img { border: 0; vertical-align: middle }
.changePassword { color: #494949 !important; font-style:italic; font-size: 90% }
.breadcrumb { font-size: 11pt; padding-bottom: 6px }
.login { margin: 3px; color: black }
input.button { color: #666666; height: 20px; margin-bottom: 5px; margin-top:2px;
cursor:pointer; font-size: 90%; padding-left: 10px;
background-color: white; background-repeat: no-repeat;
background-position: 8px 25%; box-shadow: 2px 2px 2px #888888}
input.buttonSmall { width: 100px !important; font-size: 85%; height: 18px;
margin-bottom: 5px }
input.button { color: #666666; height: 20px; cursor:pointer; font-size: 90%;
padding-left: 26px; padding-right: 12px; background-color: white;
background-repeat: no-repeat; background-position: 8px 25%;
box-shadow: 2px 2px 2px #888888}
input.buttonSmall { font-size: 85%; height: 18px }
input.buttonFixed { width:110px; padding: 0 0 0 10px }
.fake { background-color: #e6e6e6 !important ; cursor:help !important }
.xhtml { background-color: white; padding: 4px; font-size: 95% }
.xhtml img { margin-right: 5px }
@ -83,7 +83,7 @@ input.buttonSmall { width: 100px !important; font-size: 85%; height: 18px;
box-shadow: 0 2px 4px #A9A9A9 }
.focus td { padding: 4px 0px 4px 4px }
.discreet { font-size: 90%; color: grey }
.title { color: #BA9440 }
.title {}
.lostPassword { font-size: 90%; color: white; padding-left: 1em }
.current { font-weight: bold }
.portlet { width: 150px; border-right: 3px solid #e4e4e4;
@ -184,3 +184,4 @@ td.search { padding-top: 8px }
.language {color: grey; font-size: 7pt; border: grey 1px solid; padding: 2px;
margin: 0 2px 0 4px; font-family: monospace }
.highlight { background-color: yellow }
.globalActions { margin-bottom: 4px }

View file

@ -228,24 +228,21 @@ class ToolWrapper(AbstractWrapper):
class=":(not currentSearch and (currentClass==className) and \
(currentPage=='query')) and \
'current' or ''">::_(className + '_plural')</a>
</div>
<!-- Create instances of this class -->
<form if="ztool.userMayCreate(rootClass) and \
('form' in ztool.getCreateMeans(rootClass))" class="addForm"
var2="target=ztool.getLinksTargetInfo(rootClass)"
action=":'%s/do' % toolUrl" target=":target.target">
<input type="hidden" name="action" value="Create"/>
<input type="hidden" name="className" value=":className"/>
<input type="hidden" name="popup"
value=":(inPopup or (target.target != '_self')) and '1' or '0'"/>
<input type="submit" class="buttonSmall button"
var="label=_('query_create')" value=":label"
onclick=":target.openPopup"
style=":'%s; %s' % (url('add', bg=True), \
ztool.getButtonWidth(label))"/>
</form>
<form if="ztool.userMayCreate(rootClass) and \
('form' in ztool.getCreateMeans(rootClass))" class="addForm"
var2="target=ztool.getLinksTargetInfo(rootClass)"
action=":'%s/do' % toolUrl" target=":target.target">
<input type="hidden" name="action" value="Create"/>
<input type="hidden" name="className" value=":className"/>
<input type="hidden" name="popup"
value=":(inPopup or (target.target != '_self')) and '1' or '0'"/>
<input var="label=_('query_create');
css=ztool.getButtonCss(label)" type="submit" class=":css"
value=":label" onclick=":target.openPopup"
style=":url('add', bg=True)"/>
</form>
</div>
<!-- Searches -->
<x if="ztool.advancedSearchEnabledFor(rootClass)">
<!-- Live search -->
@ -365,7 +362,8 @@ class ToolWrapper(AbstractWrapper):
if="sub">::zobj.highlight(sub)</span>
<!-- Actions -->
<div if="not inPopup and zobj.mayAct()">
<div if="not inPopup and uiSearch.showActions and zobj.mayAct()"
style=":'display:%s; margin-bottom:2px' % uiSearch.showActions">
<!-- Edit -->
<a if="zobj.mayEdit()"
var2="navInfo='search.%s.%s.%d.%d' % \
@ -453,15 +451,13 @@ class ToolWrapper(AbstractWrapper):
</table>
<!-- The button for selecting objects and closing the popup. -->
<div if="inPopup and cbShown" align=":dleft">
<input type="button" class="button"
var="label=_('object_link_many')"
value=":label"
<input type="button"
var="label=_('object_link_many'); css=ztool.getButtonCss(label)"
value=":label" class=":css" style=":url('linkMany', bg=True)"
onclick=":'onSelectObjects(%s,%s,%s,%s,%s,%s,%s)' % \
(q(rootHookId), q(uiSearch.initiator.url), \
q(uiSearch.initiatorMode), q(sortKey), q(sortOrder), \
q(filterKey), q(filterValue))"
style=":'%s; %s' % (url('linkMany', bg=True), \
ztool.getButtonWidth(label))"/>
q(filterKey), q(filterValue))"/>
</div>
<!-- Init checkboxes if present. -->
<script if="checkboxes">:'initCbs(%s)' % q(checkboxesId)</script>
@ -622,10 +618,9 @@ class ToolWrapper(AbstractWrapper):
<!-- Submit button -->
<p align=":dright"><br/>
<input type="submit" class="button" var="label=_('search_button')"
value=":label"
style=":'%s; %s' % (url('search', bg=True), \
ztool.getButtonWidth(label))"/>
<input var="label=_('search_button');
css=ztool.getButtonCss(label, small=False)" type="submit"
class=":css" value=":label" style=":url('search', bg=True)"/>
</p>
</form>
</x>''', template=AbstractWrapper.pxTemplate, hook='content')

View file

@ -465,46 +465,46 @@ class AbstractWrapper(object):
<!-- Previous -->
<x if="previousPage and pageInfo.showPrevious"
var2="label=_('page_previous');
buttonWidth=ztool.getButtonWidth(label)">
css=ztool.getButtonCss(label, small=False)">
<!-- Button on the edit page -->
<x if="isEdit">
<input type="button" class="button" value=":label"
<input type="button" class=":css" value=":label"
onclick="submitAppyForm('previous')"
style=":'%s; %s' % (url('previous', bg=True), buttonWidth)"/>
style=":url('previous', bg=True)"/>
<input type="hidden" name="previousPage" value=":previousPage"/>
</x>
<!-- Button on the view page -->
<input if="not isEdit" type="button" class="button" value=":label"
style=":'%s; %s' % (url('previous', bg=True), buttonWidth)"
<input if="not isEdit" type="button" class=":css" value=":label"
style=":url('previous', bg=True)"
onclick=":'goto(%s)' % q(zobj.getUrl(page=previousPage, \
inPopup=inPopup))"/>
</x>
<!-- Save -->
<input if="isEdit and pageInfo.showSave"
type="button" class="button" onclick="submitAppyForm('save')"
var2="label=_('object_save')" value=":label"
style=":'%s; %s' % (url('save', bg=True), \
ztool.getButtonWidth(label))" />
<input if="isEdit and pageInfo.showSave" type="button"
var2="label=_('object_save');
css=ztool.getButtonCss(label, small=False)"
class=":css" onclick="submitAppyForm('save')"
value=":label" style=":url('save', bg=True)" />
<!-- Cancel -->
<input if="isEdit and pageInfo.showCancel"
type="button" class="button" onclick="submitAppyForm('cancel')"
var2="label=_('object_cancel')" value=":label"
style=":'%s; %s' % (url('cancel', bg=True), \
ztool.getButtonWidth(label))"/>
<input if="isEdit and pageInfo.showCancel" type="button"
var2="label=_('object_cancel');
css=ztool.getButtonCss(label, small=False)"
class=":css" onclick="submitAppyForm('cancel')" value=":label"
style=":url('cancel', bg=True)"/>
<x if="not isEdit"
var2="locked=zobj.isLocked(user, page);
editable=pageInfo.showOnEdit and pageInfo.showEdit and \
mayAct and zobj.mayEdit()">
<!-- Edit -->
<input type="button" class="button" if="editable and not locked"
var="label=_('object_edit')" value=":label"
style=":'%s; %s' % (url('edit', bg=True), \
ztool.getButtonWidth(label))"
<input if="editable and not locked" type="button"
var="label=_('object_edit');
css=ztool.getButtonCss(label, small=False)"
value=":label" class=":css" style=":url('edit', bg=True)"
onclick=":'goto(%s)' % q(zobj.getUrl(mode='edit', page=page, \
inPopup=inPopup))"/>
<!-- Locked -->
<a if="editable and locked">
<img style="cursor: help"
<img class="help"
var="lockDate=ztool.formatDate(locked[1]);
lockMap={'user':ztool.getUserName(locked[0]), \
'date':lockDate};
@ -516,26 +516,24 @@ class AbstractWrapper(object):
onclick=":'onUnlockPage(%s,%s)' % (q(zobj.id), q(page))"/></a>
</x>
<!-- Delete -->
<input if="not isEdit and not inPopup and zobj.mayDelete()"
type="button" class="button"
onclick=":'onDeleteObject(%s)' % q(zobj.id)"
var2="label=_('object_delete')" value=":label"
style=":'%s; %s' % (url('delete', bg=True), \
ztool.getButtonWidth(label))"/>
<input if="not isEdit and not inPopup and zobj.mayDelete()" type="button"
var2="label=_('object_delete');
css=ztool.getButtonCss(label, small=False)"
value=":label" class=":css" style=":url('delete', bg=True)"
onclick=":'onDeleteObject(%s)' % q(zobj.id)"/>
<!-- Next -->
<x if="nextPage and pageInfo.showNext"
var2="label=_('page_next');
buttonWidth=ztool.getButtonWidth(label)">
css=ztool.getButtonCss(label, small=False)">
<!-- Button on the edit page -->
<x if="isEdit">
<input type="button" class="button" onclick="submitAppyForm('next')"
style=":'%s; %s' % (url('next', bg=True), buttonWidth)"
value=":label"/>
<input type="button" class=":css" onclick="submitAppyForm('next')"
style=":url('next', bg=True)" value=":label"/>
<input type="hidden" name="nextPage" value=":nextPage"/>
</x>
<!-- Button on the view page -->
<input if="not isEdit" type="button" class="button" value=":label"
style=":'%s; %s' % (url('next', bg=True), buttonWidth)"
<input if="not isEdit" type="button" class=":css" value=":label"
style=":url('next', bg=True)"
onclick=":'goto(%s)' % q(zobj.getUrl(page=nextPage, \
inPopup=inPopup))"/>
</x>