diff --git a/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css new file mode 100644 index 0000000..fddfeae --- /dev/null +++ b/core/themes/seven/css/components/dropzone.css @@ -0,0 +1,51 @@ +/** + * @file + * Styling drop zone. + */ + +.dropzone-wrapper { + border: 1px solid #bfbfbf; + border-radius: 2px; + background: #fcfcfa; +} + +.dropzone { + float: left; + height: 90px; + width: 90px; + background: #faf9f5 url('../../images/dropzone.png') center center no-repeat; + border-right: 1px solid #bfbfbf; + position: relative; +} +.dropzone.is-active { + background-image: url('../../images/dropzone-active.png'); +} + +.dropzone input[type="file"] { + cursor: pointer; + position: absolute; + opacity: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.dropzone-description { + float: left; + padding: 1em; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.dropzone-description .button { + margin-bottom: 1em; +} + +.dropzone-preview { + border: 1px solid #ccc; + border-radius: 2px; + background: #fdfdfc; + margin-bottom: 1em; + padding: 0.5em 1em; +} diff --git a/core/themes/seven/css/components/file-info.css b/core/themes/seven/css/components/file-info.css new file mode 100644 index 0000000..adc175c --- /dev/null +++ b/core/themes/seven/css/components/file-info.css @@ -0,0 +1,39 @@ +/** + * @file + * Styling file info. + */ + +.file-info-table { + border-collapse: separate; +} + +.file-info { + background: #fcfcfa; +} +.file-info td { + border-top: solid 1px #bfbfbf; + border-bottom: solid 1px #bfbfbf; +} +.file-info td:first-child { + border-left: solid 1px #bfbfbf; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} +.file-info td:last-child { + border-right: solid 1px #bfbfbf; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} +.file-info .button { + background: url('../../images/delete.png') right center no-repeat; + border: none; + color: transparent; + font-weight: normal; + box-shadow: none; + text-transform: lowercase; + padding: 0 1.5em 0 0; +} +.file-info .button:hover { + background-image: url('../../images/delete-active.png'); + color: #c72100; +} diff --git a/core/themes/seven/images/delete-active.png b/core/themes/seven/images/delete-active.png new file mode 100644 index 0000000..c2e161f --- /dev/null +++ b/core/themes/seven/images/delete-active.png @@ -0,0 +1,5 @@ +PNG + + IHDR +bbKGD pHYs  tIME4#2 <IDATeСNCAﮨ@EEQ"W*$E0HR +/q i3'gr NW۸}?vq_ i50à`I ).'Xs|Wp??e&]iIENDB` \ No newline at end of file diff --git a/core/themes/seven/images/delete.png b/core/themes/seven/images/delete.png new file mode 100644 index 0000000..4119b28 --- /dev/null +++ b/core/themes/seven/images/delete.png @@ -0,0 +1,9 @@ +PNG + + IHDR +btEXtSoftwareAdobe ImageReadyqe<IDATx\нAQip  +* VONA4WBJJ4⧦iT +.OlɜMv!*)8:b:N.K[FN<6 +1Y +| ij9Wjlq +N0\3":_y'һz,|F_ZzcCm~տuz%fx 0N*+rIENDB` \ No newline at end of file diff --git a/core/themes/seven/images/dropzone-active.png b/core/themes/seven/images/dropzone-active.png new file mode 100755 index 0000000..7ecb69e --- /dev/null +++ b/core/themes/seven/images/dropzone-active.png @@ -0,0 +1,5 @@ +PNG + + IHDRDD8tEXtSoftwareAdobe ImageReadyqe<&iTXtXML:com.adobe.xmp  IDATxOHQǟBvX]7kttx  + +D')(RjPP!)u%M> f}2_g͗tNΚZ-kf+.'^Ӡ0Ctt{oxq yא^p{.mRε"LI+<?M$^uVLŠdfw%ِL>CjPeYbb戉^s3&f21Ԣ^q4$s-CC3UU||e31KN̲Q.QO]013LLXeh Gabf$f*,=21"&[kCBChHELwJ<3K|'c*CCh 3K;KxbEIRl'fĀvOfH3AP4OEQevȦ*lV \ zE#q깞ߕU"yU9֡ǣ(nؒ &Er|tk~ @z<6 kddc)(̤@IENDB` \ No newline at end of file diff --git a/core/themes/seven/images/dropzone.png b/core/themes/seven/images/dropzone.png new file mode 100755 index 0000000..8b50676 --- /dev/null +++ b/core/themes/seven/images/dropzone.png @@ -0,0 +1,4 @@ +PNG + + IHDRDD8tEXtSoftwareAdobe ImageReadyqe<&iTXtXML:com.adobe.xmp #ߪIDATx?hAbTTPK BLe iZ F&IXBxZ% !"1^56&q>1w{oP* Jp`xl1J 0 .{Ig3p4W1CM ޜ$BF Wr4H}rX_֐dYA;eh !4d95KC$-o2Rz)WȄvNFlxTZ17&'sEؿ2B40w&ٯ9;r !4'+V̪eX1sĊYX1c!4dY3G*f[chPU։vȃz#3y="u:zt\F#2d}yﶜ5c Ɨ}XIZ ۖtn@hq鹮Ͼ}bT}|Av֔m=BꕱIZ10X1yS, +-Τ^qcSIENDB` \ No newline at end of file diff --git a/core/themes/seven/images/file.png b/core/themes/seven/images/file.png new file mode 100755 index 0000000..311768f --- /dev/null +++ b/core/themes/seven/images/file.png @@ -0,0 +1,3 @@ +PNG + + IHDRU1tEXtSoftwareAdobe ImageReadyqe<&iTXtXML:com.adobe.xmp }p/IDATxb=F(] 蒓L 41q.IA ăF ne[aTq5 r qX(%ygfQjb H g:"!Eĸ "FԠQA`/&hC~)/ ?YIENDB` \ No newline at end of file diff --git a/core/themes/seven/images/fileicon.png b/core/themes/seven/images/fileicon.png new file mode 100644 index 0000000..b8e7e1a --- /dev/null +++ b/core/themes/seven/images/fileicon.png @@ -0,0 +1,4 @@ +PNG + + IHDRU1tEXtSoftwareAdobe ImageReadyqe<IDATxĔkPǿ5ڂ⮻..B+B` ւ:99vusMH]DK}w!Ix|޻Ԅ_N|Wx=I>,#_u6=_ +dH$LG^/Hk$I^CEiy'A+@Qb-KhjYP|>G&|:"L阾3Sl6zh4ZXDPjB<bi d"Y` -?'*j`F-Jns~@ l6)6Ml6ˑJ(eYFRߚ( w*A1?Fk)|pX-Kۯ}#IENDB` \ No newline at end of file diff --git a/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js new file mode 100644 index 0000000..195f77f --- /dev/null +++ b/core/themes/seven/js/dropzone.js @@ -0,0 +1,27 @@ +(function ($, Drupal) { + + 'use strict'; + + Drupal.behaviors.dropzone = { + attach: function (context, settings) { + var $dropzone = $('.js-dropzone'); + $dropzone.on('dragover', function() { + $(this).addClass('is-active'); + }); + + $dropzone.on('dragleave', function() { + $(this).removeClass('is-active'); + }); + } + }; + + Drupal.behaviors.uploadImage = { + attach : function (context, settings) { + $('.js-upload-image').click(function(e) { + $(this).closest('.js-form-item').find('input[type="file"]').click(); + e.preventDefault(); + e.stopPropagation(); + }); + } + }; +})(jQuery, Drupal); diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml index cec9887..9e55edb 100644 --- a/core/themes/seven/seven.libraries.yml +++ b/core/themes/seven/seven.libraries.yml @@ -13,8 +13,10 @@ global-styling: css/components/colors.css: {} css/components/messages.css: {} css/components/dropbutton.component.css: {} + css/components/dropzone.css: {} css/components/entity-meta.css: {} css/components/field-ui.css: {} + css/components/file-info.css: {} css/components/form.css: {} css/components/help.css: {} css/components/menus-and-lists.css: {} @@ -33,6 +35,8 @@ global-styling: css/components/views-ui.css: {} layout: css/layout/layout.css: {} + js: + js/dropzone.js: {} dependencies: - system/admin diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme index 9afa603..df82c1c 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -186,3 +186,22 @@ function seven_form_node_form_alter(&$form, FormStateInterface $form_state) { $form['revision_information']['#type'] = 'container'; $form['revision_information']['#group'] = 'meta'; } + +/** + * Implements hook_theme_suggestions_form_element_alter(). + */ +function seven_theme_suggestions_form_element_alter(&$suggestions, $variables) { + $suggestions[] = 'form_element__' . $variables['element']['#theme']; +} + +/** + * Implements hook_preprocess_file_widget_multiple(). + */ +function seven_preprocess_file_widget_multiple(&$variables) { + unset($variables['table']['#header']); + $variables['table']['#attributes']['class'][] = 'file-info-table'; + foreach ($variables['table']['#rows'] as $key => $row) { + $variables['table']['#rows'][$key]['class'][] = 'file-info'; + $variables['table']['#rows'][$key]['class'][] = 'js-file-info'; + } +} diff --git a/core/themes/seven/templates/file-upload-help.html.twig b/core/themes/seven/templates/file-upload-help.html.twig new file mode 100644 index 0000000..32800b6 --- /dev/null +++ b/core/themes/seven/templates/file-upload-help.html.twig @@ -0,0 +1,14 @@ +{# +/** + * @file + * Theme override to display help text for file fields. + * + * Available variables: + * - descriptions: Lines of help text for uploading a file. + * + * @see template_preprocess_file_upload_help() + */ +#} +{% for description in descriptions %} + {{ description }} +{% endfor %} diff --git a/core/themes/seven/templates/form-element--file-managed-file.html.twig b/core/themes/seven/templates/form-element--file-managed-file.html.twig new file mode 100644 index 0000000..5021023 --- /dev/null +++ b/core/themes/seven/templates/form-element--file-managed-file.html.twig @@ -0,0 +1,93 @@ +{# +/** + * @file + * Theme override for a managed file form element. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - errors: (optional) Any errors for this form element, may not be set. + * - prefix: (optional) The form element prefix, may not be set. + * - suffix: (optional) The form element suffix, may not be set. + * - required: The required marker, or empty if the associated form element is + * not required. + * - type: The type of the element. + * - name: The name of the element. + * - label: A rendered label element. + * - label_display: Label display setting. It can have these values: + * - before: The label is output before the element. This is the default. + * The label includes the #title and the required marker, if #required. + * - after: The label is output after the element. For example, this is used + * for radio and checkbox #type elements. If the #title is empty but the + * field is #required, the label will contain only the required marker. + * - invisible: Labels are critical for screen readers to enable them to + * properly navigate through forms but can be visually distracting. This + * property hides the label for everyone except screen readers. + * - attribute: Set the title attribute on the element to create a tooltip but + * output no label element. This is supported only for checkboxes and radios + * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement(). + * It is used where a visual label is not needed, such as a table of + * checkboxes where the row and column provide the context. The tooltip will + * include the title and required marker. + * - description: (optional) A list of description properties containing: + * - content: A description of the form element, may not be set. + * - attributes: (optional) A list of HTML attributes to apply to the + * description content wrapper. Will only be set when description is set. + * - description_display: Description display setting. It can have these values: + * - before: The description is output before the element. + * - after: The description is output after the element. This is the default + * value. + * - invisible: The description is output after the element, hidden visually + * but available to screen readers. + * - disabled: True if the element is disabled. + * - title_display: Title display setting. + * + * @see template_preprocess_form_element() + */ +#} +{% + set classes = [ + 'js-form-item', + 'form-item', + 'js-form-type-' ~ type|clean_class, + 'form-type-' ~ type|clean_class, + 'js-form-item-' ~ name|clean_class, + 'form-item-' ~ name|clean_class, + 'dropzone-wrapper', + 'clearfix', + disabled == 'disabled' ? 'form-disabled', + errors ? 'form-item--error', + ] +%} +{% + set description_classes = [ + 'dropzone-description', + description_display == 'invisible' ? 'visually-hidden', + ] +%} + + {% if prefix is not empty %} + {{ prefix }} + {% endif %} +
+ {{ children }} +
+ {% if suffix is not empty %} + {{ suffix }} + {% endif %} + {% if label_display == 'after' %} + {{ label }} + {% endif %} + {% if errors %} +
+ {{ errors }} +
+ {% endif %} + {% if description.content %} + + + {{ description.content }} + + {% endif %} +