EZP-23022: Added the Content Type icons

Features/Standard/ContentTypeIcon.feature

@@ -0,0 +1,37 @@
+Feature: Content Type icons
+
+    @javascript
+    Scenario: Content items of a type without an icon get the default icon
+        Given a Content Type without a defined "ez-contenttype-icon-<identifier>" CSS class
+          And a Content item of this type exists
+         When I view this Content
+         Then the "generic" Content Type icon is attached to the title
+
+    @javascript
+    Scenario: Content items of a type with an icon get this icon
+        Given a Content item of type "folder"
+         When I view this Content
+         Then the "folder" Content Type icon is attached to the title
+
+    @javascript
+    Scenario: The Content Type icon can be customized for a given Content Type with a CSS rule
+        Given a Content item of type "folder"
+         When I view this Content
+         Then the title element has the class "ez-contenttype-icon-folder"
+
+    @javascript
+    Scenario: Content items in the Content Tree have an icon based on their type
+        Given I display the Content Tree
+         Then I see an icon based on the Content Type for each Content item
+
+    @javascript
+    Scenario: Content items in the subitem grid view without a filled image field have an icon based on their type
+        Given A Content item with several subitems with and without a filled image field
+         When I view the subitems grid
+         Then each content item without a filled image field has an icon based on its type
+          And each content item with a filled image field is represented with a variation of this image
+
+    @javascript
+    Scenario: Each Content Type in the Content Type Group page has an icon
+         When I view the Content Type list in a Content Type Group page
+         Then each content type has an icon that depends on its type

Resources/config/css.yml

@@ -174,6 +174,7 @@ system:
                 - 'bundles/ezplatformui/css/theme/views/fields/edit/richtext.css'
                 - 'bundles/ezplatformui/css/theme/views/fields/edit/user.css'
                 - 'bundles/ezplatformui/css/theme/modules/icons.css'
+                - 'bundles/ezplatformui/css/theme/modules/contenttypeicons.css'
                 - 'bundles/ezplatformui/css/theme/modules/tabs.css'
                 - 'bundles/ezplatformui/css/theme/modules/page-header.css'
                 - 'bundles/ezplatformui/css/theme/modules/serverside-content.css'

Resources/public/css/theme/modules/contenttypeicons.css

@@ -0,0 +1,123 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-contenttype-icon:before {
+    font-family: 'ez-platformui-icomoon';
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+
+    content: "generic";
+}
+
+/* default content types */
+.ez-contenttype-icon-folder:before {
+    content: "folder";
+}
+
+.ez-contenttype-icon-article:before {
+    content: "article";
+}
+
+.ez-contenttype-icon-image:before {
+    content: "image";
+}
+
+.ez-contenttype-icon-file:before {
+    content: "file";
+}
+
+.ez-contenttype-icon-user:before {
+    content: "user";
+}
+
+.ez-contenttype-icon-user_group:before {
+    content: "users";
+}
+
+/* common + demo content types */
+
+.ez-contenttype-icon-about:before {
+    content: "about";
+}
+
+.ez-contenttype-icon-author:before {
+    content: "author";
+}
+
+.ez-contenttype-icon-post:before,
+.ez-contenttype-icon-blogpost:before,
+.ez-contenttype-icon-blog_post:before {
+    content: "blogpost";
+}
+
+.ez-contenttype-icon-category:before {
+    content: "category";
+}
+
+.ez-contenttype-icon-comment:before {
+    content: "comment";
+}
+
+.ez-contenttype-icon-landingpage:before,
+.ez-contenttype-icon-landing_page:before {
+    content: "landing_page";
+}
+
+.ez-contenttype-icon-media:before,
+.ez-contenttype-icon-video:before {
+    content: "media";
+}
+
+.ez-contenttype-icon-news:before,
+.ez-contenttype-icon-page:before {
+    content: "news";
+}
+
+.ez-contenttype-icon-pdf:before,
+.ez-contenttype-icon-pdffile:before,
+.ez-contenttype-icon-pdf_file:before {
+    content: "pdf";
+}
+
+.ez-contenttype-icon-picture:before,
+.ez-contenttype-icon-photo:before {
+    content: "image";
+}
+
+.ez-contenttype-icon-place:before {
+    content: "place";
+}
+
+.ez-contenttype-icon-place_list:before,
+.ez-contenttype-icon-placelist:before {
+    content: "placelist";
+}
+
+.ez-contenttype-icon-portfolio:before {
+    content: "portfolio";
+}
+
+.ez-contenttype-icon-product:before {
+    content: "product";
+}
+
+.ez-contenttype-icon-contact:before,
+.ez-contenttype-icon-contact_form:before,
+.ez-contenttype-icon-contactform:before {
+    content: "subscriber";
+}
+
+.ez-contenttype-icon-wiki:before {
+    content: "wiki";
+}
+
+.ez-contenttype-icon-wikipage:before,
+.ez-contenttype-icon-wiki_page:before {
+    content: "wikipage";
+}

Resources/public/css/theme/modules/serverside-content.css

@@ -24,3 +24,7 @@
 .ez-serverside-content tt {
     font-size: 90%;
 }
+
+.ez-serverside-content .ez-contenttype-icon:before {
+    padding-right: 0.3em;
+}

Resources/public/css/theme/views/subitem/griditem.css

@@ -24,17 +24,18 @@
     line-height: 9rem;
 }
 
-.ez-view-subitemgriditemview.is-state-no-image .ez-subitemgrid-item-visual:before {
-    content: "\e601";
-}
-
 .ez-view-subitemgriditemview.is-state-image-loading .ez-subitemgrid-item-visual:before {
     content: "\e61c";
     color: #ddd;
     -webkit-animation: spin 0.7s infinite linear;
             animation: spin 0.7s infinite linear;
 }
 
+
+.ez-view-subitemgriditemview.is-state-image-loaded .ez-subitemgrid-item-visual:before {
+    content: "";
+}
+
 .ez-view-subitemgriditemview .ez-subitemgrid-item-link {
     color: #333;
 }