diff -u b/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css --- b/core/themes/seven/css/components/dropzone.css +++ b/core/themes/seven/css/components/dropzone.css @@ -1,6 +1,8 @@ /** - * Dropzone. + * @file + * Styling drop zone. */ + .dropzone-wrapper { border: 1px solid #bfbfbf; border-radius: 2px; @@ -36,6 +38,9 @@ -webkit-box-sizing: border-box; box-sizing: border-box; } +.dropzone-description .button { + margin-bottom: 1em; +} .dropzone-preview { border: 1px solid #ccc; diff -u b/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml --- b/core/themes/seven/seven.libraries.yml +++ b/core/themes/seven/seven.libraries.yml @@ -16,6 +16,7 @@ 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: {} diff -u b/core/themes/seven/seven.theme b/core/themes/seven/seven.theme --- b/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -193,3 +193,15 @@ function seven_theme_suggestions_form_element_alter(&$suggestions, $variables) { - $suggestions[] = 'form_element__' . $variables['element']['#type']; + $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'; + } } reverted: --- b/core/themes/seven/templates/form-element--managed-file.html.twig +++ /dev/null @@ -1,95 +0,0 @@ -{# -/** - * @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 %} - -
- {{ 'Add Files'|t }} -
- {{ description.content }} - - {% endif %} - only in patch2: unchanged: --- /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; +} only in patch2: unchanged: --- /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 only in patch2: unchanged: --- /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 only in patch2: unchanged: --- /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 only in patch2: unchanged: --- /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 %} only in patch2: unchanged: --- /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 %} +