From 185cf42f63db03a771410027c38c27c07adf6ff5 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 6 Feb 2015 15:14:54 +0000 Subject: [PATCH] styling of fields according to design --- wagtail/wagtailadmin/blocks.py | 14 +- .../static/wagtailadmin/js/blocks/sequence.js | 3 + .../wagtailadmin/scss/components/forms.scss | 4 + .../scss/layouts/page-editor.scss | 135 +++++++++++++----- .../static/wagtailadmin/scss/mixins.scss | 8 ++ .../wagtailadmin/block_forms/list_member.html | 2 +- .../block_forms/sequence_member.html | 2 +- .../wagtailadmin/block_forms/stream.html | 6 +- .../block_forms/stream_member.html | 4 +- .../wagtailadmin/block_forms/stream_menu.html | 14 +- 10 files changed, 136 insertions(+), 56 deletions(-) diff --git a/wagtail/wagtailadmin/blocks.py b/wagtail/wagtailadmin/blocks.py index 8424ee14f..31d597aab 100644 --- a/wagtail/wagtailadmin/blocks.py +++ b/wagtail/wagtailadmin/blocks.py @@ -264,13 +264,6 @@ class FieldBlock(Block): def render_form(self, value, prefix='', error=None): widget = self.field.widget - widget_html = widget.render(prefix, value, {'id': prefix}) - - #if error: - # error_html = str(ErrorList(error.error_list)) - #else: - # error_html = '' - if self.label: label_html = format_html( """ """, @@ -279,6 +272,13 @@ class FieldBlock(Block): else: label_html = '' + widget_html = widget.render(prefix, value, {'id': prefix, 'placeholder': self.label}) + + #if error: + # error_html = str(ErrorList(error.error_list)) + #else: + # error_html = '' + return render_to_string('wagtailadmin/block_forms/field.html', { 'widget': widget_html, 'label_tag': label_html, diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js b/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js index 2652d7447..3b6054487 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js @@ -37,6 +37,9 @@ For example, they don't assume the presence of a 'delete' button - it's up to th self.menu.addClass('stream-menu-closed'); self.container.hide(); self.container.slideDown(); + + // focus first suitable input found + $('.input input,.input textarea,.input .richtext', self.container).first().focus(); }; self.getIndex = function() { return parseInt(indexField.val(), 10); diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss index a11a6aaa1..daee85da6 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss @@ -335,6 +335,10 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ border-color:$color-grey-2; color:lighten($color-grey-2, 15%); } + + &.button-nostroke{ + border:0 !important; + } } /* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss index 22e9d6253..747b0dced 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss @@ -187,8 +187,15 @@ } &.stream-field { + padding:0; + + &.required .field > label:after{ + display:none; + } + > fieldset{ @include column(12); + max-width:none; padding-left:0; padding-right:0; } @@ -196,6 +203,11 @@ .fields > li > .field > label{ display:none; } + .stream_widget > .field-content{ + width:100%; + display:block; + } + .sequence{ position:relative; @include clearfix; @@ -203,8 +215,6 @@ .sequence{ /* YUK! */ padding:0 1.5em; margin:1em 0; - border:1px solid lighten($color-grey-4, 3%); - border-width:0 1px; } } @@ -219,23 +229,37 @@ .sequence-member{ @include clearfix; position:relative; - padding:1em 1.5em; - border-bottom:1px solid lighten($color-grey-4, 3%); margin:0 -1.5em; - &:first-child{ - border-top:1px solid lighten($color-grey-4, 3%); - } - - .inner{ + .sequence-member-inner{ @include clearfix; + position:relative; + padding:0em 50px 1em 50px; + + > .struct-block > label, + > .char_field > label{ + @include transition(opacity 0.2s ease); + opacity:0; + display:block; + font-style:italic; + font-weight:normal; + position:absolute; + top:0; right:4em; + float:none; + width:auto; + padding:0; + color:$color-grey-2; + line-height:2.2em; + } } - .inner > .struct-block > label{ - display:block; - width:100%; - float:none; + &:hover .sequence-member-inner{ + > .struct-block > label, + > .char_field > label{ + opacity:1; + } } + } .struct-block > ul > li{ /* duplicates forms.scss ln.568 */ @@ -243,14 +267,27 @@ padding-top:0.5em; padding-bottom:1.2em; } + + .struct-block .char_field > label{ + display:none; + } + + input[type=text], input[type=url], input[type=email], input[type=numeric], .richtext, textarea{ + border:0; + padding-left:0; + padding-right:0; + background-color:transparent; + max-width:1024px; + } } /* Object controls */ .stream-controls{ + @include transition(opacity 0.2s ease); + opacity:0; position:absolute; + top:0; right:1em; z-index:1; - right:1em; - top:1em; color:white; overflow:hidden; @include border-radius(2px); @@ -274,16 +311,24 @@ /* Menu of other blocks to be added at each position */ .stream-menu{ @include transition(all 0.2s ease); + @include box-shadow(inset 0 0 45px rgba(0,0,0,0.3)); position:relative; + background-color:$color-grey-1; + border-top:1px solid transparent; + + .stream-menu-inner{ + max-width:50em; + max-height:9999em; + margin: auto; + overflow:hidden; + } ul{ @include transition(all 0.2s ease); @include clearfix; - - margin-bottom:0px; opacity:1; padding:1em; - background-color:$color-grey-5; + overflow:hidden; } li{ @include column(2); @@ -291,9 +336,10 @@ } button{ - background-color:$color-grey-4; + @include transition(all 0.2s ease); + background-color:transparent; border:0; - color:$color-grey-2; + color:darken($color-grey-3, 5%); height:auto; display:block; width:100%; @@ -321,46 +367,59 @@ } &:hover{ - color:$color-teal; + background-color:$color-teal; + color:white; } } &:before{ + @include transition(all 0.2s ease); + @include transform(rotate(-45deg)); + @include border-radius(50px); + cursor:pointer; font-family:wagtail; content:"B"; - width:2em; + width:1em; height:1em; display:block; - position:relative; - left:0;right:0; - margin:auto auto -1em auto; + margin:-0.5em auto auto auto; z-index:5; - color:$color-teal; + color:$color-grey-1; + background-color:white; font-size:1.7em; line-height:1em; text-align:center; - - &:hover{ - border:1px solid red; - } } - &.stream-menu-closed{ - height:3em; - max-height:10em; + @include box-shadow(none); + height:1px; + background-color:transparent; + border-top:1px solid lighten($color-grey-4, 3%); + .stream-menu-inner{ + max-height:1em; + } ul{ - margin-bottom:-200px; - max-height:10em; opacity:0; padding:10em; - overflow:hidden; - } + } + + &:before{ + @include transform(rotate(0deg)); + color:$color-teal; + background-color:white; + } + } + &.stream-menu-closed:hover{ + border-top-color:$color-teal; } } .sequence-member .stream-menu{ - margin:auto -1.5em -1em -1.5em; + margin:auto auto 1em auto; + } + .sequence-member:hover .stream-controls{ + opacity:1; } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss index bf9b3346c..df9f46e02 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss @@ -60,6 +60,14 @@ transition: none !important; } +@mixin transform($transform){ + -moz-transform: $transform; + -webkit-transform: $transform; + -o-transform: $transform; + -ms-transform: $transform; + transform: $transform; +} + @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html index 9d0e1bdec..3eca03374 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html @@ -1,4 +1,4 @@ {% extends "wagtailadmin/block_forms/sequence_member.html" %} {% block header_controls %} - + {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html index 6849d2668..60ec704cb 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html @@ -8,7 +8,7 @@ {% block header_controls %}{% endblock %} -
{{ child.render_form }}
+
{{ child.render_form }}
{% block footer_controls %}{% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html index dfd01a262..a7146e37a 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html @@ -1,4 +1,8 @@ {% extends "wagtailadmin/block_forms/sequence.html" %} {% block header %} - {% include "wagtailadmin/block_forms/stream_menu.html" with prefix=header_menu_prefix %} + {% if list_members_html %} + {% include "wagtailadmin/block_forms/stream_menu.html" with prefix=header_menu_prefix state="closed" %} + {% else %} + {% include "wagtailadmin/block_forms/stream_menu.html" with prefix=header_menu_prefix state="open" %} + {% endif %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html index 916a5c0e1..fb45e7264 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html @@ -5,9 +5,9 @@ {% endblock %} {% block header_controls %} - + {% endblock %} {% block footer_controls %} - {% include "wagtailadmin/block_forms/stream_menu.html" %} + {% include "wagtailadmin/block_forms/stream_menu.html" with state="closed"%} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html index b7df153e2..16574a709 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html @@ -1,7 +1,9 @@ -
- +
+
+
    + {% for child_block in child_blocks %} +
    • + {% endfor %} +
+