From dda7c2ab124bd67585411587e597ca67ce6c48fb Mon Sep 17 00:00:00 2001 From: mortendk Date: Mon, 28 Aug 2017 10:35:29 +0200 Subject: [PATCH] #184 form id based template suggestions added in --- csscomb.json | 329 ++++++++++++++++++ elevenfeat/elevenfeat.info.yml | 4 +- .../templates/feat/contextual/contextual.css | 13 +- .../feat/outside_in/offcanvas_container.css | 2 +- ...--form-id--block-off-canvas-form.html.twig | 43 +++ ...--form-id--block-off-canvas-form.html.twig | 79 +++++ ...--form-id--block-off-canvas-form.html.twig | 42 +++ ...--form-id--block-off-canvas-form.html.twig | 33 ++ .../templates/feat/quickedit/quickedit.css | 2 +- .../elevenformsuggestions.module | 95 ++++- 10 files changed, 631 insertions(+), 11 deletions(-) create mode 100644 csscomb.json create mode 100644 elevenfeat/templates/feat/outside_in/templates/details--form-id--block-off-canvas-form.html.twig create mode 100644 elevenfeat/templates/feat/outside_in/templates/form-element--form-id--block-off-canvas-form.html.twig create mode 100644 elevenfeat/templates/feat/outside_in/templates/form-element-label--form-id--block-off-canvas-form.html.twig create mode 100644 elevenfeat/templates/feat/outside_in/templates/input--form-id--block-off-canvas-form.html.twig diff --git a/csscomb.json b/csscomb.json new file mode 100644 index 0000000..ffba55c --- /dev/null +++ b/csscomb.json @@ -0,0 +1,329 @@ +{ + "exclude": [ + ".git/**", + "node_modules/**", + "bower_components/**" + ], + "always-semicolon": true, + "block-indent": "", + "color-case": "lower", + "color-shorthand": true, + "element-case": "lower", + "eof-newline": true, + "leading-zero": false, + "quotes": "single", + "remove-empty-rulesets": true, + "space-after-colon": " ", + "space-after-combinator": " ", + "space-after-opening-brace": "\n", + "space-after-selector-delimiter": "\n", + "space-before-closing-brace": "\n", + "space-before-colon": "", + "space-before-combinator": " ", + "space-before-opening-brace": "\n", + "space-before-selector-delimiter": "", + "strip-spaces": true, + "unitless-zero": true, + "vendor-prefix-align": true, + "sort-order": [ + [ + "font", + "font-family", + "font-size", + "font-weight", + "font-style", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "line-height" + ], + [ + "position", + "z-index", + "top", + "right", + "bottom", + "left" + ], + [ + "display", + "visibility", + "float", + "clear", + "overflow", + "overflow-x", + "overflow-y", + "-ms-overflow-x", + "-ms-overflow-y", + "clip", + "zoom", + "flex-direction", + "flex-order", + "flex-pack", + "flex-align", + "flex" + ], + [ + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left" + ], + [ + "table-layout", + "empty-cells", + "caption-side", + "border-spacing", + "border-collapse", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image" + ], + [ + "content", + "quotes", + "counter-reset", + "counter-increment", + "resize", + "cursor", + "-webkit-user-select", + "-moz-user-select", + "-ms-user-select", + "user-select", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "-webkit-transition", + "-moz-transition", + "-ms-transition", + "-o-transition", + "transition", + "-webkit-transition-delay", + "-moz-transition-delay", + "-ms-transition-delay", + "-o-transition-delay", + "transition-delay", + "-webkit-transition-timing-function", + "-moz-transition-timing-function", + "-ms-transition-timing-function", + "-o-transition-timing-function", + "transition-timing-function", + "-webkit-transition-duration", + "-moz-transition-duration", + "-ms-transition-duration", + "-o-transition-duration", + "transition-duration", + "-webkit-transition-property", + "-moz-transition-property", + "-ms-transition-property", + "-o-transition-property", + "transition-property", + "-webkit-transform", + "-moz-transform", + "-ms-transform", + "-o-transform", + "transform", + "-webkit-transform-origin", + "-moz-transform-origin", + "-ms-transform-origin", + "-o-transform-origin", + "transform-origin", + "-webkit-animation", + "-moz-animation", + "-ms-animation", + "-o-animation", + "animation", + "-webkit-animation-name", + "-moz-animation-name", + "-ms-animation-name", + "-o-animation-name", + "animation-name", + "-webkit-animation-duration", + "-moz-animation-duration", + "-ms-animation-duration", + "-o-animation-duration", + "animation-duration", + "-webkit-animation-play-state", + "-moz-animation-play-state", + "-ms-animation-play-state", + "-o-animation-play-state", + "animation-play-state", + "-webkit-animation-timing-function", + "-moz-animation-timing-function", + "-ms-animation-timing-function", + "-o-animation-timing-function", + "animation-timing-function", + "-webkit-animation-delay", + "-moz-animation-delay", + "-ms-animation-delay", + "-o-animation-delay", + "animation-delay", + "-webkit-animation-iteration-count", + "-moz-animation-iteration-count", + "-ms-animation-iteration-count", + "-o-animation-iteration-count", + "animation-iteration-count", + "-webkit-animation-direction", + "-moz-animation-direction", + "-ms-animation-direction", + "-o-animation-direction", + "animation-direction", + "text-align", + "-webkit-text-align-last", + "-moz-text-align-last", + "-ms-text-align-last", + "text-align-last", + "vertical-align", + "white-space", + "text-decoration", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-indent", + "-ms-text-justify", + "text-justify", + "letter-spacing", + "word-spacing", + "-ms-writing-mode", + "text-outline", + "text-transform", + "text-wrap", + "text-overflow", + "-ms-text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "-ms-word-wrap", + "word-wrap", + "word-break", + "-ms-word-break", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "pointer-events" + ], + [ + "opacity", + "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", + "-ms-interpolation-mode", + "color", + "border", + "border-width", + "border-style", + "border-color", + "border-top", + "border-top-width", + "border-top-style", + "border-top-color", + "border-right", + "border-right-width", + "border-right-style", + "border-right-color", + "border-bottom", + "border-bottom-width", + "border-bottom-style", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-style", + "border-left-color", + "-webkit-border-radius", + "-moz-border-radius", + "border-radius", + "-webkit-border-top-left-radius", + "-moz-border-radius-topleft", + "border-top-left-radius", + "-webkit-border-top-right-radius", + "-moz-border-radius-topright", + "border-top-right-radius", + "-webkit-border-bottom-right-radius", + "-moz-border-radius-bottomright", + "border-bottom-right-radius", + "-webkit-border-bottom-left-radius", + "-moz-border-radius-bottomleft", + "border-bottom-left-radius", + "-webkit-border-image", + "-moz-border-image", + "-o-border-image", + "border-image", + "-webkit-border-image-source", + "-moz-border-image-source", + "-o-border-image-source", + "border-image-source", + "-webkit-border-image-slice", + "-moz-border-image-slice", + "-o-border-image-slice", + "border-image-slice", + "-webkit-border-image-width", + "-moz-border-image-width", + "-o-border-image-width", + "border-image-width", + "-webkit-border-image-outset", + "-moz-border-image-outset", + "-o-border-image-outset", + "border-image-outset", + "-webkit-border-image-repeat", + "-moz-border-image-repeat", + "-o-border-image-repeat", + "border-image-repeat", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "background", + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", + "background-color", + "background-image", + "background-repeat", + "background-attachment", + "background-position", + "background-position-x", + "-ms-background-position-x", + "background-position-y", + "-ms-background-position-y", + "-webkit-background-clip", + "-moz-background-clip", + "background-clip", + "background-origin", + "-webkit-background-size", + "-moz-background-size", + "-o-background-size", + "background-size", + "box-decoration-break", + "-webkit-box-shadow", + "-moz-box-shadow", + "box-shadow", + "filter:progid:DXImageTransform.Microsoft.gradient", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", + "text-shadow" + ] + ] +} diff --git a/elevenfeat/elevenfeat.info.yml b/elevenfeat/elevenfeat.info.yml index f3abcc5..7462861 100644 --- a/elevenfeat/elevenfeat.info.yml +++ b/elevenfeat/elevenfeat.info.yml @@ -1,10 +1,10 @@ -name: elevenfeat +name: eleven Front End Amin Tools type: theme description: 'eleven FEAT - Seperation of the FrontEnd Admin Tools for the Eleven theme' base theme: classy core: '8.x' -hidden: TRUE +# hidden: TRUE # -- Libraries ----------------------------------------------------------------- libraries: diff --git a/elevenfeat/templates/feat/contextual/contextual.css b/elevenfeat/templates/feat/contextual/contextual.css index 2b549f0..0af6b40 100644 --- a/elevenfeat/templates/feat/contextual/contextual.css +++ b/elevenfeat/templates/feat/contextual/contextual.css @@ -207,6 +207,9 @@ contextual links icon colors /* ----------------------------------------------------------------------------- Contextual links icons ----------------------------------------------------------------------------- */ + + + /* block config */ .contextual .contextual-links .block-configure a:before { -webkit-mask: url(icons/gears.svg); @@ -218,14 +221,20 @@ Contextual links icons .contextual .contextual-links .quickedit a { color: var(--rasberry); } -.contextual .contextual-links .outside-inblock-configure a:before, -.contextual .contextual-links .quickedit a:before { +.contextual .contextual-links .outside-inblock-configure a:before{ background-color: var(--rasberry-light); -webkit-mask: url(icons/flash.svg) no-repeat; mask: url(icons/flash.svg) no-repeat; } +.contextual .contextual-links .quickedit{ + color: var(--grass); +} +.contextual .contextual-links .quickedit a:before { + background-color: var(--grass-light); +} + /* translate */ .contextual .contextual-links .config-translationcontextual-linksentityblockconfig-translation-overview a:before, .contextual .contextual-links .config-translationcontextual-linksentitymenuconfig-translation-overview a:before, diff --git a/elevenfeat/templates/feat/outside_in/offcanvas_container.css b/elevenfeat/templates/feat/outside_in/offcanvas_container.css index 8616b20..686a3df 100644 --- a/elevenfeat/templates/feat/outside_in/offcanvas_container.css +++ b/elevenfeat/templates/feat/outside_in/offcanvas_container.css @@ -9,10 +9,10 @@ .ui-icon { display: none; } + /* ----------------------------------------------------------------------------- ui dialog Titlebar ------------------------------------------------------------------------------*/ - /* title bar */ .ui-dialog .ui-dialog-titlebar { padding: 0.5rem 0; diff --git a/elevenfeat/templates/feat/outside_in/templates/details--form-id--block-off-canvas-form.html.twig b/elevenfeat/templates/feat/outside_in/templates/details--form-id--block-off-canvas-form.html.twig new file mode 100644 index 0000000..24366c3 --- /dev/null +++ b/elevenfeat/templates/feat/outside_in/templates/details--form-id--block-off-canvas-form.html.twig @@ -0,0 +1,43 @@ +{# +/** + * @file + * Theme override for a details element. + * + * Available variables + * - attributes: A list of HTML attributes for the details element. + * - errors: (optional) Any errors for this details element, may not be set. + * - title: (optional) The title of the element, may not be set. + * - description: (optional) The description of the element, may not be set. + * - children: (optional) The children of the element, may not be set. + * - value: (optional) The value of the element, may not be set. + * + * @see template_preprocess_details() + */ +#} + + {%- if title -%} + {% + set summary_classes = [ + required ? 'js-form-required', + required ? 'form-required', + ] + %} + {{ title }} + {%- endif -%} +
+ {% if errors %} +
+ {{ errors }} +
+ {% endif %} + {%- if description -%} +
{{ description }}
+ {%- endif -%} + {%- if children -%} + {{ children }} + {%- endif -%} + {%- if value -%} + {{ value }} + {%- endif -%} +
+ diff --git a/elevenfeat/templates/feat/outside_in/templates/form-element--form-id--block-off-canvas-form.html.twig b/elevenfeat/templates/feat/outside_in/templates/form-element--form-id--block-off-canvas-form.html.twig new file mode 100644 index 0000000..e74fff4 --- /dev/null +++ b/elevenfeat/templates/feat/outside_in/templates/form-element--form-id--block-off-canvas-form.html.twig @@ -0,0 +1,79 @@ +{{ attach_library('eleven/form.form') }} + +{% if element['#title'].getUntranslatedString() %} + {% set element_name = element['#title'].getUntranslatedString()|clean_class %} +{% else %} + {% set element_name = element['#title']|clean_class %} +{% endif %} + +{% + set classes = [ + 'form-item', + 'form-item--' ~ type|clean_class , + element['#type'] == 'select' ? 'form-item--inline' , + element['#multiple'] ? 'form-item--select-multiple' , + errors ? 'form-item--error', + disabled == 'disabled' ? 'form-item--disabled', + 'js-form-item', + 'js-form-type-' ~ type|clean_class, + 'js-form-item-' ~ name|clean_class, + ] +%} +{% + set description_classes = [ + 'form-item__description', + description_display == 'invisible' ? 'visually-hidden', + ] +%} + +{# {{ element_name }} #} + + + + {% block formItemIcon %} + {% endblock %} + + {# label before/invisble #} + {% if label_display in ['before', 'invisible'] %} + {{ label }} + {% endif %} + + {# prefix #} + {% if prefix is not empty %} + {{ prefix }} + {% endif %} + + {# children = the content of a field. #} + {% if type == "item" %} +
+ {{ children }} +
+ {% else %} + {{ children }} + {% endif %} + + {# description before #} + {% if description.content %} + + {{ description.content }} + + {% endif %} + + {# suffix #} + {% if suffix is not empty %} + {{ suffix }} + {% endif %} + + {# label after #} + {% if label_display == 'after' %} + {{ label }} + {% endif %} + + {# errors #} + {% if errors %} +
+ {{ errors }} +
+ {% endif %} + + diff --git a/elevenfeat/templates/feat/outside_in/templates/form-element-label--form-id--block-off-canvas-form.html.twig b/elevenfeat/templates/feat/outside_in/templates/form-element-label--form-id--block-off-canvas-form.html.twig new file mode 100644 index 0000000..b12dfe2 --- /dev/null +++ b/elevenfeat/templates/feat/outside_in/templates/form-element-label--form-id--block-off-canvas-form.html.twig @@ -0,0 +1,42 @@ +{# +We want to be able to identity some of the labels so we can change that markup +and yank in some icons etc + +first lets grap the label for id and use that as a identifier so we can add +a span for an icon inside the label + +the wrapper is defined over in form-element.html.twig remember to set it to inline etc +#} + +{% if element['#title'].getUntranslatedString() %} + {% set element_name = element['#title'].getUntranslatedString()|clean_class %} +{% elseif element['#title'] %} + {% set element_name = element['#title']|render %} +{% else %} + {% set element_name = '' %} +{% endif %} + +{# '_t-elementname--' ~ element_name|clean_class, #} + +{% + set classes = [ + title_display == 'invisible' ? 'visually-hidden', + required ? 'js-form-required', + required ? 'is-required', + ] +%} + +{% if title_display == 'invisible' %} + + + + + +{% else %} + + + + {{ title }} + + +{%- endif %} diff --git a/elevenfeat/templates/feat/outside_in/templates/input--form-id--block-off-canvas-form.html.twig b/elevenfeat/templates/feat/outside_in/templates/input--form-id--block-off-canvas-form.html.twig new file mode 100644 index 0000000..27cccfc --- /dev/null +++ b/elevenfeat/templates/feat/outside_in/templates/input--form-id--block-off-canvas-form.html.twig @@ -0,0 +1,33 @@ +{{ attach_library('eleven/form.form') }} + +{% + set remove_classes = [ + 'text-full', + 'form-text', + ] +%} + +{% set input_type = element['#type'] %} + + +{{ children }} + +{# set a range of types we want to test on #} +{% set test = [ + 'date', + 'password', + 'search', + 'submit', + 'button', + ] +%} + + +{% if input_type in test %} +
+{% endif %} diff --git a/elevenfeat/templates/feat/quickedit/quickedit.css b/elevenfeat/templates/feat/quickedit/quickedit.css index bb0d3f8..5f8deee 100644 --- a/elevenfeat/templates/feat/quickedit/quickedit.css +++ b/elevenfeat/templates/feat/quickedit/quickedit.css @@ -19,7 +19,7 @@ contenteditable="true">title agian ? /*The active element */ .quickedit-editable.quickedit-highlighted { - background-color: var(--white); + background-color: var(--rasberry); border: 1px solid var(--ashalt);; } diff --git a/elevenformsuggestions/elevenformsuggestions.module b/elevenformsuggestions/elevenformsuggestions.module index 7934ca3..e359fca 100644 --- a/elevenformsuggestions/elevenformsuggestions.module +++ b/elevenformsuggestions/elevenformsuggestions.module @@ -8,11 +8,17 @@ use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Render\Element; function elevenformsuggestions_theme_suggestions_input(array $variables) { + $suggestions = []; + if (isset($variables['element']['#form_id'])) { - $suggestions = ['input__' . $variables['element']['#type'] . '__form_id__'. $variables['element']['#form_id']]; + $suggestions[] = 'input__form_id__'. $variables['element']['#form_id']; + $suggestions[] = 'input__' . $variables['element']['#type'] . '__form_id__'. $variables['element']['#form_id']; } return $suggestions; + + kint($suggestions); + } @@ -20,6 +26,7 @@ function elevenformsuggestions_theme_suggestions_input(array $variables) { * Implements hook_preprocess_form_element(). */ function elevenformsuggestions_preprocess_form_element(array &$variables) { + if (!isset($variables['label'])) { return; } @@ -30,6 +37,7 @@ function elevenformsuggestions_preprocess_form_element(array &$variables) { if (isset($variables['element']['#type'])) { $variables['label']['#form_element_type'] = $variables['element']['#type']; } + } /** @@ -50,12 +58,8 @@ function elevenformsuggestions_theme_suggestions_form_element(array $variables) */ function elevenformsuggestions_theme_suggestions_form_element_label(array $variables) { $suggestions = []; - // if (isset($variables['element']['#form_element_type'])) { - // $suggestions[] = 'form_element_label__type__' . $variables['element']['#form_element_type']; - // } if (isset($variables['element']['#form_id'])) { $suggestions[] = 'form_element_label__form-id__' . $variables['element']['#form_id']; - // $suggestions[] = 'form_element_label__type__' . $variables['element']['#form_element_type'] .'__form_id__' . $variables['element']['#form_id']; } if (isset($variables['element']['#form_element_type']) && isset($variables['element']['#form_id'])) { $suggestions[] = 'form_element_label__' . $variables['element']['#form_id'] . '__' . $variables['element']['#form_element_type']; @@ -64,6 +68,18 @@ function elevenformsuggestions_theme_suggestions_form_element_label(array $varia return $suggestions; } + +function elevenformsuggestions_theme_suggestions_form(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'form__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + + /** * Implements hook_theme_suggestions_details(). */ @@ -77,6 +93,75 @@ function elevenformsuggestions_theme_suggestions_details(array $variables) { return $suggestions; } +/** + * Implements hook_theme_suggestions_select(). + */ +function elevenformsuggestions_theme_suggestions_select(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'select__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + +/** + * Implements hook_theme_suggestions_select(). + */ +function elevenformsuggestions_theme_suggestions_fieldset(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'fieldset__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + +function elevenformsuggestions_theme_suggestions_checkboxes(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'checkboxes__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + + +function elevenformsuggestions_theme_suggestions_radios(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'radios__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + +function elevenformsuggestions_theme_suggestions_textarea(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'textarea__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + +function elevenformsuggestions_theme_suggestions_vertical_tabs(array $variables) { + $suggestions = []; + + if (isset($variables['element']['#form_id'])) { + $suggestions[] = 'vertical_tabs__form-id__' . $variables['element']['#form_id']; + } + + return $suggestions; +} + + + /** * Implements hook_form_alter(). */