misc: change condition widget ui to have type selector on the right (#24046)

This commit is contained in:
Frédéric Péters 2018-05-24 23:54:51 +02:00
parent 1d1259adc0
commit 19227e7a6d
3 changed files with 121 additions and 21 deletions

View File

@ -2294,23 +2294,19 @@ class ConditionWidget(CompositeWidget):
value = {}
options = [
('none', C_('condition|None'), 'none'),
('python', _('Python Expression'), 'python'),
('django', _('Django Expression (beta)'), 'django'),
]
self.add(SingleSelectWidget, 'type', options=options, value=value.get('type'),
attrs={'data-dynamic-display-parent': 'true'})
self.add(StringWidget, 'value_django', size=80,
value=value.get('value') if value.get('type') == 'django' else None,
attrs={'data-dynamic-display-child-of': '%s$type' % self.name,
'data-dynamic-display-value': 'django'})
value=value.get('value') if value.get('type') == 'django' else None)
self.add(StringWidget, 'value_python', size=80,
value=value.get('value') if value.get('type') == 'python' else None,
attrs={'data-dynamic-display-child-of': '%s$type' % self.name,
'data-dynamic-display-value': 'python'})
value=value.get('value') if value.get('type') == 'python' else None)
self.add(SingleSelectWidget, 'type', options=options,
value=value.get('type'),
attrs={'data-dynamic-display-parent': 'true'})
@property
def content_extra_attributes(self):
@ -2328,16 +2324,27 @@ class ConditionWidget(CompositeWidget):
if self.value['type']:
self.value['value'] = self.get('value_%s' % self.value['type'])
try:
Condition(self.value).validate()
except ValidationError as e:
self.set_error(str(e))
if not self.value['value']:
if self.value['value']:
try:
Condition(self.value).validate()
except ValidationError as e:
self.set_error(str(e))
else:
self.value = None
def render_content(self):
r = TemplateIO(html=True)
for widget in self.get_widgets():
r += widget.render_content()
return r.getvalue()
return htmltext('''
<span class="django"
data-dynamic-display-value="django"
data-dynamic-display-child-of="%(name)s$type"
>%(value_django)s</span
><span class="python"
data-dynamic-display-value="python"
data-dynamic-display-child-of="%(name)s$type"
>%(value_python)s</span
>%(type)s''') % {
'name': self.name,
'value_django': self.get_widget('value_django').render_content(),
'value_python': self.get_widget('value_python').render_content(),
'type': self.get_widget('type').render_content()
}

View File

@ -978,7 +978,46 @@ ul.biglist li p.commands span {
}
div.ConditionWidget div.content input[type=text] {
margin: 0 1ex;
margin: 0;
}
div.ConditionWidget div.content span.django,
div.ConditionWidget div.content span.python {
position: relative;
z-index: 3;
}
div.ConditionWidget div.content span.django::after,
div.ConditionWidget div.content span.python::after {
position: absolute;
top: 0px;
right: 1ex;
height: 100%;
opacity: 0.3;
pointer-events: none;
}
div.ConditionWidget div.content span.django::after {
content: "Django";
}
div.ConditionWidget div.content span.python::after {
content: "Python";
}
div.ConditionWidget div.content select {
width: 2em;
padding: 4px 2em 4px 1ex;
background-position: right 0.8rem center;
margin-left: -1px;
text-indent: -10000px;
background-image: url(gear.svg);
position: relative;
}
div.ConditionWidget div.content select:focus {
outline: none;
z-index: 5;
}
div.DataSourceSelectionWidget div.content input[type=text],

View File

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 444.8 444.8"
version="1.1"
id="svg4"
sodipodi:docname="gear.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="836"
id="namedview6"
showgrid="false"
inkscape:zoom="0.53057555"
inkscape:cx="222.39999"
inkscape:cy="222.39999"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
d="m 258.60165,15.279077 c -9.1135,16.53169 -17.76133,38.20122 -27.29961,54.59921 -3.56537,-0.26587 -7.05361,-1.18884 -10.68245,-1.18884 -12.61973,0 -25.0715,1.84973 -36.79512,4.74776 -11.58548,-14.53953 -23.94169,-34.11283 -35.60818,-48.66451 -10.80955,3.98963 -20.97628,8.60218 -30.86043,14.24327 3.64362,18.3309 10.51708,40.68068 14.24328,59.34697 -13.028,9.450693 -23.78376,20.206453 -33.234313,33.234303 C 79.69844,127.8712 57.34869,120.99759 39.01787,117.35397 c -5.641136,9.88407 -10.253753,20.05073 -14.243275,30.86042 14.551615,11.66657 34.124825,24.02289 48.664515,35.60818 -2.89993,11.72354 -4.74776,24.17558 -4.74776,36.79512 0,3.62729 0.93664,7.11708 1.18694,10.68245 -16.39818,9.53844 -38.067518,18.18619 -54.59921,27.29961 1.946201,10.43595 4.873213,21.03218 8.308576,30.86042 18.664344,-0.37982 41.761004,-3.5931 60.533904,-3.55892 7.1074,14.87985 15.97267,28.63126 27.29961,40.35594 -6.53451,17.76915 -17.020643,38.30871 -23.73879,55.78615 8.086297,6.67345 17.07282,12.39089 26.11267,17.80409 14.0232,-12.15844 29.45212,-29.30202 43.91675,-41.54288 14.35893,6.55419 29.95345,10.07626 46.29064,11.8694 6.24964,18.10832 11.55733,41.32752 17.80409,59.34696 11.45311,-0.076 22.28791,-0.53554 33.2343,-2.37388 3.05945,-18.72173 4.192,-42.48483 7.12163,-61.72084 15.57595,-4.43782 30.81644,-10.14045 43.91676,-18.99103 16.11696,10.04473 34.14086,23.88654 49.85145,33.2343 8.49799,-7.24204 16.49675,-15.24068 23.73879,-23.73879 -9.34769,-15.71051 -23.18961,-33.73452 -33.2343,-49.85145 8.85042,-13.10039 14.55328,-28.34069 18.99103,-43.91675 19.23597,-2.92842 42.99892,-4.06219 61.72084,-7.12164 1.83644,-10.94643 2.30969,-21.78119 2.37388,-33.2343 -18.01956,-6.24691 -41.23856,-11.55452 -59.34697,-17.80409 -1.79313,-16.33722 -5.31539,-31.93152 -11.86939,-46.29064 12.24086,-14.4647 29.3844,-29.8934 41.54288,-43.91675 -5.41324,-9.03973 -11.13068,-18.026293 -17.80409,-26.112673 -17.47741,6.71827 -38.01716,17.204363 -55.78615,23.738793 -11.72465,-11.32701 -25.47594,-20.192023 -40.35594,-27.299613 -0.0337,-18.77301 3.18897,-41.86952 3.56082,-60.5339 -9.82831,-3.43358 -20.42436,-6.36238 -30.86042,-8.30858 z M 220.61959,144.65547 c 41.9538,0 75.96411,34.01028 75.96411,75.96412 0,41.95384 -34.01031,75.96412 -75.96411,75.96412 -41.95381,0 -75.96412,-34.01028 -75.96412,-75.96412 0,-41.95384 34.01031,-75.96412 75.96412,-75.96412 z"
id="path42961-7"
inkscape:connector-curvature="0" />
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB