diff --git a/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css new file mode 100644 index 0000000..ca0798b --- /dev/null +++ b/core/themes/seven/css/components/dropzone.css @@ -0,0 +1,46 @@ +/** + * Dropzone. + */ +.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-preview { + border: 1px solid #ccc; + border-radius: 2px; + background: #fdfdfc; + margin-bottom: 1em; + padding: 0.5em 1em; +} 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/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..84040d8 100644 --- a/core/themes/seven/seven.libraries.yml +++ b/core/themes/seven/seven.libraries.yml @@ -13,6 +13,7 @@ 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/form.css: {} @@ -33,6 +34,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..5f0278d 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -186,3 +186,10 @@ 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']['#type']; +} diff --git a/core/themes/seven/templates/form-element--managed-file.html.twig b/core/themes/seven/templates/form-element--managed-file.html.twig new file mode 100644 index 0000000..fa477ff --- /dev/null +++ b/core/themes/seven/templates/form-element--managed-file.html.twig @@ -0,0 +1,95 @@ +{# +/** + * @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 %} +