mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-12 17:23:15 +00:00
preliminary styling of streamblock fields
This commit is contained in:
Dave Cranwell
parent
3386ee53e6
commit
a6bab4e649
12 changed files with 162 additions and 52 deletions
|
|
@ -230,6 +230,8 @@
|
|||
<section id="buttons">
|
||||
<h2>Buttons</h2>
|
||||
|
||||
<p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
|
||||
|
||||
<a href="#" class="button">button</a>
|
||||
|
||||
<a href="#" class="button button-secondary">button-secondary</a>
|
||||
|
|
@ -250,8 +252,6 @@
|
|||
|
||||
<div class="button no bicolor icon icon-cog">button on a div</div>
|
||||
|
||||
<p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
|
||||
|
||||
<button>button</button>
|
||||
|
||||
<button class="button-small">small button</button>
|
||||
|
|
@ -261,6 +261,14 @@
|
|||
<input type="submit" class="bicolor icon icon-plus" value="bicolor only supported on button elements" />
|
||||
|
||||
<button class="icon icon-view">button</button>
|
||||
|
||||
<button class="icon text-replace yes icon-tick">A proper button</button>
|
||||
<a href="#" class="button icon text-replace white icon-cog">A link button</a>
|
||||
<span class="button icon text-replace no icon-bin">A non-link button</span>
|
||||
|
||||
<button class="button-small icon text-replace white icon-tick">A proper button</button>
|
||||
<a href="#" class="button button-small icon text-replace white icon-cog">A link button</a>
|
||||
<span class="button button-small icon text-replace white icon-bin">A non-link button</span>
|
||||
</section>
|
||||
|
||||
<section id="dropdowns">
|
||||
|
|
|
|||
|
|
@ -322,10 +322,12 @@ class BaseStructBlock(Block):
|
|||
for child_rendering in child_renderings
|
||||
])
|
||||
|
||||
|
||||
# Can these be rendered with a template?
|
||||
if self.label:
|
||||
return format_html("<label>{0}</label> <ul>{1}</ul>", self.label, list_items)
|
||||
return format_html('<div class="struct-block"><label>{0}</label> <ul>{1}</ul></div>', self.label, list_items)
|
||||
else:
|
||||
return format_html("<ul>{0}</ul>", list_items)
|
||||
return format_html('<div class="struct-block"><ul>{0}</ul></div>', list_items)
|
||||
|
||||
def value_from_datadict(self, data, files, prefix):
|
||||
return dict([
|
||||
|
|
|
|||
|
|
@ -632,6 +632,20 @@ Page.settings_panels = [
|
|||
from wagtail.wagtailadmin.blocks import StreamBlock
|
||||
|
||||
class BaseStreamFieldPanel(BaseFieldPanel):
|
||||
|
||||
def classes(self):
|
||||
classes = super(BaseStreamFieldPanel, self).classes()
|
||||
classes.append("stream-field")
|
||||
|
||||
# BaseFieldPanel is essentially for single fields, which are rendered on the front end
|
||||
# with the assumption that the label (singular) will always be promoted to the full-width
|
||||
# divider bar thing.
|
||||
# This results in all the other labels being promoted similarly, so it's better not to
|
||||
# treat this as a single field, and remove the "single-field" class.
|
||||
classes.remove("single-field")
|
||||
|
||||
return classes
|
||||
|
||||
@classmethod
|
||||
def widget_overrides(cls):
|
||||
return {cls.field_name: widgets.StreamWidget(block_def=cls.block_def)}
|
||||
|
|
|
|||
|
|
@ -221,9 +221,16 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
background-color:transparent;
|
||||
}
|
||||
|
||||
&.icon.text-replace:before{
|
||||
font-size:auto;
|
||||
}
|
||||
/* Buttons which are only an icon */
|
||||
&.icon.text-replace{
|
||||
font-size:0; /* unavoidable duplication of setting in icons.scss */
|
||||
width:1.8rem;
|
||||
height:1.8rem;
|
||||
|
||||
&:before{
|
||||
line-height:1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $color-button-hover;
|
||||
|
|
@ -382,9 +389,7 @@ input[type=submit], input[type=reset], input[type=button], button{
|
|||
@include border-radius(2px);
|
||||
|
||||
li{
|
||||
background-color: $color-teal;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
margin-right:1px;
|
||||
|
||||
&:last-child{
|
||||
|
|
@ -392,24 +397,6 @@ input[type=submit], input[type=reset], input[type=button], button{
|
|||
}
|
||||
}
|
||||
|
||||
.icon{
|
||||
padding:0.3em;
|
||||
}
|
||||
|
||||
.icon:before{
|
||||
line-height:2em;
|
||||
width:2em;
|
||||
}
|
||||
.icon:hover{
|
||||
background-color:$color-teal-darker;
|
||||
|
||||
&:before{
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
.icon-bin:hover{
|
||||
background-color:$color-red;
|
||||
}
|
||||
.disabled{
|
||||
display:none;
|
||||
}
|
||||
|
|
@ -824,9 +811,23 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
height: 3em;
|
||||
line-height:3em;
|
||||
|
||||
&.icon.text-replace{
|
||||
width:2.2rem;
|
||||
height:2.2rem;
|
||||
&:before{
|
||||
line-height:2.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-small{
|
||||
height:2.3em;
|
||||
line-height:2.2em;
|
||||
&.icon.text-replace{
|
||||
height:1.8rem;
|
||||
width:1.8rem;
|
||||
|
||||
&:before{
|
||||
line-height:1.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bicolor{
|
||||
|
|
@ -845,7 +846,8 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
&:before{
|
||||
line-height:1.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */
|
||||
|
|
|
|||
|
|
@ -184,6 +184,80 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.stream-field {
|
||||
> fieldset{
|
||||
@include column(12);
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
/* Object controls */
|
||||
.stream-controls{
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
right:1em;
|
||||
top:1em;
|
||||
color:white;
|
||||
overflow:hidden;
|
||||
@include border-radius(2px);
|
||||
|
||||
li{
|
||||
background-color: $color-teal;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
margin-right:1px;
|
||||
|
||||
&:last-child{
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.fields > li > .field > label{
|
||||
display:none;
|
||||
}
|
||||
.sequence{
|
||||
@include clearfix;
|
||||
margin:1em 0;
|
||||
border:1px solid lighten($color-grey-4, 3%);
|
||||
padding:0 1.5em;
|
||||
}
|
||||
.sequence-member{
|
||||
position:relative;
|
||||
padding:1em 1.5em;
|
||||
border-bottom:1px solid lighten($color-grey-4, 3%);
|
||||
margin:0 -1.5em;
|
||||
|
||||
.inner > .struct-block > label{
|
||||
display:block;
|
||||
width:100%;
|
||||
float:none;
|
||||
}
|
||||
}
|
||||
.sequence-inner{
|
||||
@include column(10);
|
||||
|
||||
&:nth-of-type(1){
|
||||
@include column(12);
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.struct-block > ul > li{ /* duplicates forms.scss ln.568 */
|
||||
@include clearfix();
|
||||
padding-top:0.5em;
|
||||
padding-bottom:1.2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* special panel for the publishing fields, requires a bit more pizzazz */
|
||||
&.publishing{
|
||||
h2:before{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% load wagtailadmin_tags %}
|
||||
<div class="field {{ field|fieldtype }}">
|
||||
{{ field.label_tag }}
|
||||
{{ label_tag }}
|
||||
<div class="field-content">
|
||||
<div class="input">
|
||||
{{ widget }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "wagtailadmin/block_forms/sequence_member.html" %}
|
||||
{% block header_controls %}
|
||||
<button type="button" id="{{ prefix }}-delete">delete</button>
|
||||
<button type="button" id="{{ prefix }}-delete" class="icon text-replace no icon-bin">delete</button>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
{# Common HTML structure shared by list and stream blocks #}
|
||||
|
||||
{% if label %}<label>{{ label }}</label>{% endif %}
|
||||
<input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
|
||||
{% block header %}{% endblock %}
|
||||
<ul id="{{ prefix }}-list">
|
||||
{% for list_member_html in list_members_html %}
|
||||
{{ list_member_html }}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% block footer %}{% endblock %}
|
||||
<div class="sequence">
|
||||
<input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
|
||||
|
||||
{% if label %}<label>{{ label }}</label>{% endif %}
|
||||
{% block header %}{% endblock %}
|
||||
<div class="sequence-inner">
|
||||
<ul id="{{ prefix }}-list" class="sequence">
|
||||
{% for list_member_html in list_members_html %}
|
||||
{{ list_member_html }}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% block footer %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
<li id="{{ prefix }}-container">
|
||||
<li id="{{ prefix }}-container" class="sequence-member">
|
||||
<input type="hidden" id="{{ prefix }}-deleted" name="{{ prefix }}-deleted" value="">
|
||||
<input type="hidden" id="{{ prefix }}-order" name="{{ prefix }}-order" value="{{ index }}">
|
||||
|
||||
{% block hidden_fields %}{% endblock %}
|
||||
{% block header_controls %}{% endblock %}
|
||||
<div>{{ child.render_form }}</div>
|
||||
|
||||
<div class="stream-controls">
|
||||
{% block header_controls %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<div class="inner">{{ child.render_form }}</div>
|
||||
|
||||
{% block footer_controls %}{% endblock %}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block header_controls %}
|
||||
<button type="button" id="{{ prefix }}-delete">delete</button>
|
||||
<button type="button" id="{{ prefix }}-delete" class="stream-control icon text-replace no icon-bin">delete</button>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer_controls %}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<li id="inline_child_{{ child.form.prefix }}">
|
||||
<ul class="controls">
|
||||
{% if can_order %}
|
||||
<li class="icon text-replace white icon-order-up inline-child-move-up" id="{{ child.form.prefix }}-move-up">{% trans "Move up" %}</li>
|
||||
<li class="icon text-replace white icon-order-down inline-child-move-down" id="{{ child.form.prefix }}-move-down">{% trans "Move down" %}</li>
|
||||
<li><button class="icon text-replace white icon-order-up inline-child-move-up" id="{{ child.form.prefix }}-move-up">{% trans "Move up" %}</button></li>
|
||||
<li><button class="icon text-replace white icon-order-down inline-child-move-down" id="{{ child.form.prefix }}-move-down">{% trans "Move down" %}</button></li>
|
||||
{% endif %}
|
||||
<li class="icon text-replace white icon-bin" id="{{ child.form.DELETE.id_for_label }}-button">{% trans "Delete" %}</li>
|
||||
<li><button class="icon text-replace white icon-bin" id="{{ child.form.DELETE.id_for_label }}-button">{% trans "Delete" %}</button></li>
|
||||
</ul>
|
||||
{{ child.render_form_content }}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{% load i18n %}
|
||||
<li id="inline_child_{{ form.prefix }}"{% if form.DELETE.value %} style="display: none;"{% endif %}>
|
||||
<ul class="controls">
|
||||
<li class="icon text-replace icon-order-up inline-child-move-up" id="{{ form.prefix }}-move-up">{% trans "Move up" %}</li>
|
||||
<li class="icon text-replace icon-order-down inline-child-move-down" id="{{ form.prefix }}-move-down">{% trans "Move down" %}</li>
|
||||
<li class="icon text-replace icon-bin" id="{{ form.DELETE.id_for_label }}-button">{% trans "Delete" %}</li>
|
||||
<li><button class="icon text-replace icon-order-up inline-child-move-up" id="{{ form.prefix }}-move-up">{% trans "Move up" %}</button></li>
|
||||
<li><button class="icon text-replace icon-order-down inline-child-move-down" id="{{ form.prefix }}-move-down">{% trans "Move down" %}</button></li>
|
||||
<li><button class="icon text-replace icon-bin" id="{{ form.DELETE.id_for_label }}-button">{% trans "Delete" %}</button></li>
|
||||
</ul>
|
||||
|
||||
<fieldset>
|
||||
|
|
|
|||
Loading…
Reference in a new issue