Merge pull request #16324 from craftcms/feature/cms-1356-displaying-e…

…lement-data-in-various-view-modes

Feature/cms 1356 displaying element data in various view modes

CHANGELOG-WIP.md

@@ -3,6 +3,7 @@
 ### Content Management
 - “Related To”, “Not Related To”, “Author”, and relational field condition rules now allow multiple elements to be specified. ([#16121](https://github.com/craftcms/cms/discussions/16121))
 - Improved the styling of inline code fragments. ([#16141](https://github.com/craftcms/cms/pull/16141))
+- Improved the styling of attribute previews in card view. ([#16324](https://github.com/craftcms/cms/pull/16324))
 - Added the “Affiliated Site” user condition rule. ([#16174](https://github.com/craftcms/cms/pull/16174))
 - The global sidebar no longer shows “Failed” for queue jobs, for users that don’t have access to the Queue Manager. ([#16184](https://github.com/craftcms/cms/issues/16184))
 - Addresses and Matrix fields now show provisional drafts when previewing an owner element. ([#16295](https://github.com/craftcms/cms/issues/16295))
@@ -52,6 +53,7 @@
 ### Extensibility
 - Added `craft\base\Element::EVENT_DEFINE_ALT_ACTIONS`. ([#16294](https://github.com/craftcms/cms/pull/16294))
 - Added `craft\base\ElementInterface::getAltActions()`. ([#16294](https://github.com/craftcms/cms/pull/16294))
+- Added `craft\base\ElementTrait::$viewMode`. ([#16324](https://github.com/craftcms/cms/pull/16324))
 - Added `craft\base\conditions\BaseElementSelectConditionRule::allowMultiple()`.
 - Added `craft\base\conditions\BaseElementSelectConditionRule::getElementIds()`.
 - Added `craft\base\conditions\BaseElementSelectConditionRule::setElementIds()`.

src/base/Element.php

@@ -1312,6 +1312,10 @@ public static function indexHtml(
             }
         }
 
+        foreach ($elements as $element) {
+            $element->viewMode = $viewState['mode'];
+        }
+
         $variables['elements'] = $elements;
         $template = '_elements/' . $viewState['mode'] . 'view/' . ($includeContainer ? 'container' : 'elements');
 
@@ -2617,6 +2621,7 @@ public function attributes(): array
             $names['searchScore'],
             $names['updateSearchIndexForOwner'],
             $names['updatingFromDerivative'],
+            $names['viewMode'],
         );
 
         $names['canonicalId'] = true;
@@ -3472,6 +3477,8 @@ public function showStatusIndicator(): bool
      */
     public function getCardBodyHtml(): ?string
     {
+        $this->viewMode = 'cards';
+
         $previews = array_filter(array_map(
             function(BaseField|array $item) {
                 if ($item instanceof BaseField) {
@@ -5506,7 +5513,9 @@ public function getAttributeHtml(string $attribute): string
     {
         // Fire a 'defineAttributeHtml' event
         if ($this->hasEventHandlers(self::EVENT_DEFINE_ATTRIBUTE_HTML)) {
-            $event = new DefineAttributeHtmlEvent(['attribute' => $attribute]);
+            $event = new DefineAttributeHtmlEvent([
+                'attribute' => $attribute,
+            ]);
             $this->trigger(self::EVENT_DEFINE_ATTRIBUTE_HTML, $event);
             if (isset($event->html)) {
                 return $event->html;

src/base/ElementTrait.php

@@ -240,6 +240,12 @@ trait ElementTrait
      */
     public bool $previewing = false;
 
+    /**
+     * @var string|null The view mode used to show this element (e.g. `structure`, `table`, `thumbs`, `cards`).
+     * @since 5.6.0
+     */
+    public ?string $viewMode = null;
+
     /**
      * @var bool Whether the element should definitely be saved, if it’s a nested element being considered
      * for saving by [[NestedElementManager]].

src/base/Field.php

@@ -462,6 +462,7 @@ protected function defineRules(): array
                 'uri',
                 'url',
                 'username', // user-specific
+                'viewMode',
             ],
         ];
 

src/elements/Entry.php

@@ -2039,7 +2039,11 @@ protected function attributeHtml(string $attribute): string
                 return $section ? Html::encode(Craft::t('site', $section->name)) : '';
             case 'type':
                 try {
-                    return Cp::chipHtml($this->getType());
+                    $config = [];
+                    if ($this->viewMode === 'cards') {
+                        $config['showThumb'] = false;
+                    }
+                    return Cp::chipHtml($this->getType(), $config);
                 } catch (InvalidConfigException) {
                     return Craft::t('app', 'Unknown');
                 }

src/fields/Lightswitch.php

@@ -14,6 +14,7 @@
 use craft\base\MergeableFieldInterface;
 use craft\base\SortableFieldInterface;
 use craft\elements\Entry;
+use craft\enums\Color as ColorEnum;
 use craft\fields\conditions\LightswitchFieldConditionRule;
 use craft\helpers\ArrayHelper;
 use craft\helpers\Cp;
@@ -235,6 +236,14 @@ public function getContentGqlQueryArgumentType(): Type|array
      */
     public function getPreviewHtml(mixed $value, ElementInterface $element): string
     {
+        if ($element->viewMode === 'cards') {
+            return Cp::statusLabelHtml([
+                'color' => $value ? ColorEnum::Teal : ColorEnum::Gray,
+                'label' => $this->getUiLabel(),
+                'icon' => $value ? 'check' : 'xmark',
+            ]);
+        }
+
         if (!$value) {
             return '';
         }

src/web/assets/cp/src/css/_main.scss

@@ -3725,14 +3725,6 @@ table {
   & > .cp-icon {
     margin-inline: -2px -4px;
     margin-block: 3px 0;
-
-    // hide the entry type icon if we're alreayd showing one for the card
-    + .card-content
-      .card-body
-      .chip[data-type='craft\\\\models\\\\EntryType']
-      .cp-icon {
-      display: none;
-    }
   }
 
   .card-content,
@@ -3775,13 +3767,6 @@ table {
         text-wrap: pretty;
       }
 
-      .checkbox-preview-label {
-        display: inline;
-
-        font-style: italic;
-        margin-inline-start: 5px;
-      }
-
       .chip.small {
         padding-inline: 0;
       }