Improved draft styling within entry indexes (#7517)

craftcms · Feb 9, 2021 · 42ea5b9 · 42ea5b9
1 parent a6ba5a2
commit 42ea5b9
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 ### Changed
 - The Entries index page no longer shows unpublished drafts when filtering by entry status.
+- Improved the styling of entry drafts within entry indexes. ([#7517](https://github.com/craftcms/cms/issues/7517))
 - Field groups are now soft-deleted.
 - Color fields’ text inputs are now updated based on the color input’s `input` event rather than `change`. ([#7529](https://github.com/craftcms/cms/issues/7529))
 

diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -9,6 +9,7 @@
 
 use Craft;
 use craft\base\ElementInterface;
+use craft\behaviors\DraftBehavior;
 use craft\enums\LicenseKeyStatus;
 use craft\events\RegisterCpAlertsEvent;
 use craft\web\twig\TemplateLoaderException;
@@ -233,7 +234,7 @@ public static function alerts(?string $path = null, bool $fetch = false): array
      * @param bool $showStatus Whether the element status should be shown (if the element type has statuses)
      * @param bool $showThumb Whether the element thumb should be shown (if the element has one)
      * @param bool $showLabel Whether the element label should be shown
-     * @param bool $showDraftBadge Whether to show the “Draft” badge beside the label if the element is a draft
+     * @param bool $showDraftName Whether to show the draft name beside the label if the element is a draft of a published element
      * @return string
      * @since 3.5.8
      */
@@ -245,11 +246,12 @@ public static function elementHtml(
         bool $showStatus = true,
         bool $showThumb = true,
         bool $showLabel = true,
-        bool $showDraftBadge = true
+        bool $showDraftName = true
     ): string {
         $isDraft = $element->getIsDraft();
         $isRevision = !$isDraft && $element->getIsRevision();
         $label = $element->getUiLabel();
+        $showStatus = $showStatus && ($isDraft || $element::hasStatuses());
 
         // Create the thumb/icon image, if there is one
         if ($showThumb) {
@@ -306,7 +308,7 @@ public static function elementHtml(
             $htmlAttributes['class'] .= ' error';
         }
 
-        if ($showStatus && $element::hasStatuses()) {
+        if ($showStatus) {
             $htmlAttributes['class'] .= ' hasstatus';
         }
 
@@ -344,15 +346,27 @@ public static function elementHtml(
                 ]);
         }
 
-        if ($showStatus && $element::hasStatuses()) {
-            $status = !$isDraft && !$isRevision ? $element->getStatus() : null;
-            $html .= Html::tag('span', '', [
-                'class' => array_filter([
-                    'status',
-                    $status,
-                    $status ? ($element::statuses()[$status]['color'] ?? null) : null,
-                ]),
-            ]);
+        if ($showStatus) {
+            if ($isDraft) {
+                $html .= Html::tag('span', '', [
+                    'class' => ['icon'],
+                    'aria' => [
+                        'hidden' => 'true',
+                    ],
+                    'data' => [
+                        'icon' => 'draft',
+                    ],
+                ]);
+            } else {
+                $status = !$isRevision ? $element->getStatus() : null;
+                $html .= Html::tag('span', '', [
+                    'class' => array_filter([
+                        'status',
+                        $status,
+                        $status ? ($element::statuses()[$status]['color'] ?? null) : null,
+                    ]),
+                ]);
+            }
         }
 
         $html .= $imgHtml;
@@ -363,6 +377,13 @@ public static function elementHtml(
 
             $encodedLabel = Html::encode($label);
 
+            if ($showDraftName && $isDraft && !$element->getIsUnpublishedDraft()) {
+                /* @var DraftBehavior|ElementInterface $element */
+                $encodedLabel .= Html::tag('span', $element->draftName ?: Craft::t('app', 'Draft'), [
+                    'class' => 'draft-label',
+                ]);
+            }
+
             // Should we make the element a link?
             if (
                 $context === 'index' &&
@@ -380,12 +401,6 @@ public static function elementHtml(
                 $html .= $encodedLabel;
             }
 
-            if ($showDraftBadge && $isDraft) {
-                $html .= Html::tag('span', Craft::t('app', 'Draft'), [
-                    'class' => 'draft-label',
-                ]);
-            }
-
             $html .= '</span></div>';
         }
 
@@ -402,7 +417,7 @@ public static function elementHtml(
      * @param bool $showStatus Whether the element status should be shown (if the element type has statuses)
      * @param bool $showThumb Whether the element thumb should be shown (if the element has one)
      * @param bool $showLabel Whether the element label should be shown
-     * @param bool $showDraftBadge Whether to show the “Draft” badge beside the label if the element is a draft
+     * @param bool $showDraftName Whether to show the draft name beside the label if the element is a draft of a published element
      * @return string
      * @since 3.6.3
      */
@@ -412,19 +427,19 @@ public static function elementPreviewHtml(
         bool $showStatus = true,
         bool $showThumb = true,
         bool $showLabel = true,
-        bool $showDraftBadge = true
+        bool $showDraftName = true
     ): string {
         if (empty($elements)) {
             return '';
         }
 
         $first = array_shift($elements);
-        $html = static::elementHtml($first, 'index', $size, null, $showStatus, $showThumb, $showLabel, $showDraftBadge);
+        $html = static::elementHtml($first, 'index', $size, null, $showStatus, $showThumb, $showLabel, $showDraftName);
 
         if (!empty($elements)) {
             $otherHtml = '';
             foreach ($elements as $other) {
-                $otherHtml .= static::elementHtml($other, 'index', $size, null, $showStatus, $showThumb, $showLabel, $showDraftBadge);
+                $otherHtml .= static::elementHtml($other, 'index', $size, null, $showStatus, $showThumb, $showLabel, $showDraftName);
             }
             $html .= Html::tag('span', '+' . Craft::$app->getFormatter()->asInteger(count($elements)), [
                 'title' => implode(', ', ArrayHelper::getColumn($elements, 'title')),

diff --git a/src/web/assets/cp/dist/css/craft.css b/src/web/assets/cp/dist/css/craft.css
diff --git a/src/web/assets/cp/dist/css/craft.css.map b/src/web/assets/cp/dist/css/craft.css.map
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -2203,20 +2203,14 @@ $elementInnerSpacing: 5px;
     display: inline-block;
 
     .draft-label {
-      @include margin-left(7px);
-      user-select: none;
-      border: 1px solid $mediumTextColor;
-      border-radius: 3px;
       display: inline-block;
-      height: 16px;
-
-      padding: 0 5px 0 4px;
-      font-size: 11px;
-      line-height: 16px;
+      @include margin(-1px, 0, -1px, 7px);
+      padding: 1px 5px;
       font-weight: normal;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-      color: $mediumDarkTextColor;
+      text-decoration: none !important;
+      color: $lightTextColor;
+      background: $grey100;
+      border-radius: $largeBorderRadius;
     }
   }
 
@@ -2234,6 +2228,13 @@ $elementInnerSpacing: 5px;
         @include left($baseElementSidePadding);
         top: calc(50% - 5px);
       }
+
+
+      .icon {
+        position: absolute;
+        @include left($baseElementSidePadding - 1);
+        top: calc(50% - 11px);
+      }
     }
 
     &.hasthumb {