diff --git a/css/dropzone.widget.css b/css/dropzone.widget.css index 01604de..1518dbb 100644 --- a/css/dropzone.widget.css +++ b/css/dropzone.widget.css @@ -19,6 +19,22 @@ background-size: cover; } -.dropzone .dz-preview.dz-file-preview .dz-image, .dropzone .dz-preview .dz-image { +.dropzone .dz-preview.dz-file-preview .dz-image, +.dropzone .dz-preview .dz-image { border-radius: 0; -} \ No newline at end of file +} + +.dropzone { + margin: .5em; + background: #f5f5f2; + border: 3px dashed hsla(0, 0%, 42%, 0.65); + border-radius: 5px; +} + +.dropzone.dz-drag-hover { + border: dashed #40b6ff; +} + +.dropzone.dz-started { + padding: 16px; +} diff --git a/dropzonejs.module b/dropzonejs.module index 521a3fe..897d7ba 100644 --- a/dropzonejs.module +++ b/dropzonejs.module @@ -54,6 +54,9 @@ function template_preprocess_dropzonejs(&$variables) { $variables['attributes']['class'] = (array) $element['#attributes']['class']; } + $variables['dropzone_description'] = $element['#dropzone_description']; + $variables['or_text'] = t('or'); + $variables['select_files_button_text'] = t('Select files'); $variables['uploaded_files'] = $element['uploaded_files']; } diff --git a/templates/dropzonejs.html.twig b/templates/dropzonejs.html.twig index e36d1c7..7954876 100644 --- a/templates/dropzonejs.html.twig +++ b/templates/dropzonejs.html.twig @@ -5,12 +5,23 @@ * * Available variables: * - attributes: A list of HTML attributes for the element. + * - dropzone_description: A message to be displayed in the dropzone field. + * - or_text: A translatable string of the word 'or'. + * - select_files_button_text: The text shown on the 'Select files' button. * - children: Optional additional rendered elements. * - uploaded_files: Hidden element that holds uploaded files. * * @see template_preprocess_dropzonejs() */ #} - + + +
+

{{ dropzone_description }}

+

{{ or_text }}

+ {{ select_files_button_text }} +
+ {{ uploaded_files }} {{ children }}