Merge pull request #465 from plone/issue-442

add content icon to relateditems pattern
plone · Feb 23, 2015 · 39c1fb5 · 39c1fb5 · mister-roboto · Feb 23, 2015
2 parents 0478aff + 7875a3e
commit 39c1fb5
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 39 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -22,6 +22,9 @@ Changelog
   mockup/GETTING_STARTED.md . Refs: #460.
   [jcbrand]
 
+- Add icons to relateditems pattern (see https://github.com/plone/mockup/issues/442)
+  [petschki]
+
 
 1.8.3 (2015-01-26)
 ------------------

diff --git a/mockup/patterns/relateditems/pattern.js b/mockup/patterns/relateditems/pattern.js
@@ -102,12 +102,13 @@ define([
       homeText: _t('home'),
       folderTypes: ['Folder'],
       selectableTypes: null, // null means everything is selectable, otherwise a list of strings to match types that are selectable
-      attributes: ['UID', 'Title', 'Type', 'path'],
+      attributes: ['UID', 'Title', 'Type', 'path', 'getIcon'],
       dropdownCssClass: 'pattern-relateditems-dropdown',
       maximumSelectionSize: -1,
       resultTemplate: '' +
         '<div class="pattern-relateditems-result pattern-relateditems-type-<%= Type %> <% if (selected) { %>pattern-relateditems-active<% } %>">' +
-        '  <a href="#" class="pattern-relateditems-result-select <% if (selectable) { %>selectable<% } %>">' +
+        '  <a href="#" class="pattern-relateditems-result-select <% if (selectable) { %>selectable<% } %> contenttype-<%= Type.toLowerCase() %>">' +
+        '    <% if (getIcon) { %><span class="pattern-relateditems-result-icon"><img src="<%= getIcon %>" /></span><% } %>' +
         '    <span class="pattern-relateditems-result-title"><%= Title %></span>' +
         '    <span class="pattern-relateditems-result-path"><%= path %></span>' +
         '  </a>' +
@@ -120,6 +121,7 @@ define([
       resultTemplateSelector: null,
       selectionTemplate: '' +
         '<span class="pattern-relateditems-item pattern-relateditems-type-<%= Type %>">' +
+        ' <% if (getIcon) { %><span class="pattern-relateditems-result-icon"><img src="<%= getIcon %>" /></span><% } %>' +
         ' <span class="pattern-relateditems-item-title"><%= Title %></span>' +
         ' <span class="pattern-relateditems-item-path"><%= path %></span>' +
         '</span>',

diff --git a/mockup/patterns/relateditems/pattern.relateditems.less b/mockup/patterns/relateditems/pattern.relateditems.less
@@ -64,23 +64,8 @@
 
   .pattern-relateditems-result-select {
     display: block;
-
-    &.selectable:after {
-      .glyphicon();
-      .glyphicon-chevron-right();
-      position: absolute;
-      left: 0;
-      font-size: 14px;
-      right: 0;
-      top: 50%;
-      margin-top: -14px;
-
-      color: @link-color;
-    }
-    &.selectable{
-      .glyphicon();
-      .glyphicon-record();
-    }
+    line-height: 15px;
+    padding-top: 5px;
   }
 
   .pattern-relateditems-buttons {
@@ -104,7 +89,6 @@
     display: block;
     color: #444;
     font-size: 11px;
-    padding-left: 25px;
   }
 }
 

diff --git a/mockup/patterns/tinymce/pattern.js b/mockup/patterns/tinymce/pattern.js
@@ -114,7 +114,7 @@ define([
       },
       relatedItems: {
         // UID attribute is required here since we're working with related items
-        attributes: ['UID', 'Title', 'Description', 'getURL', 'Type', 'path', 'ModificationDate'],
+        attributes: ['UID', 'Title', 'Description', 'getURL', 'Type', 'path', 'ModificationDate', 'getIcon'],
         batchSize: 20,
         basePath: '/',
         vocabularyUrl: null,

diff --git a/mockup/tests/pattern-relateditems-test.js b/mockup/tests/pattern-relateditems-test.js
@@ -36,25 +36,25 @@ define([
       }
       this.server.respondWith(/relateditems-test.json/, function(xhr, id) {
         var root = [
-          {UID: 'jasdlfdlkdkjasdf', Title: 'Some Image', path: '/test.png', Type: 'Image'},
-          {UID: 'asdlfkjasdlfkjasdf', Title: 'News', path: '/news', Type: 'Folder'},
-          {UID: '124asdfasasdaf34', Title: 'About', path: '/about', Type: 'Folder'},
-          {UID: 'asdf1234', Title: 'Projects', path: '/projects', Type: 'Folder'},
-          {UID: 'asdf1234gsad', Title: 'Contact', path: '/contact', Type: 'Document'},
-          {UID: 'asdv34sdfs', Title: 'Privacy Policy', path: '/policy', Type: 'Document'},
-          {UID: 'asdfasdf234sdf', Title: 'Our Process', path: '/our-process', Type: 'Folder'},
-          {UID: 'asdhsfghyt45', Title: 'Donate', path: '/donate-now', Type: 'Document'},
+          {UID: 'jasdlfdlkdkjasdf', Title: 'Some Image', path: '/test.png', Type: 'Image', getIcon: "image.png"},
+          {UID: 'asdlfkjasdlfkjasdf', Title: 'News', path: '/news', Type: 'Folder', getIcon: ""},
+          {UID: '124asdfasasdaf34', Title: 'About', path: '/about', Type: 'Folder', getIcon: ""},
+          {UID: 'asdf1234', Title: 'Projects', path: '/projects', Type: 'Folder', getIcon: ""},
+          {UID: 'asdf1234gsad', Title: 'Contact', path: '/contact', Type: 'Document', getIcon: "document.png"},
+          {UID: 'asdv34sdfs', Title: 'Privacy Policy', path: '/policy', Type: 'Document', getIcon: ""},
+          {UID: 'asdfasdf234sdf', Title: 'Our Process', path: '/our-process', Type: 'Folder', getIcon: "folder.png"},
+          {UID: 'asdhsfghyt45', Title: 'Donate', path: '/donate-now', Type: 'Document', getIcon: ""},
         ];
         var about = [
-          {UID: 'gfn5634f', Title: 'About Us', path: '/about/about-us', Type: 'Document'},
-          {UID: '45dsfgsdcd', Title: 'Philosophy', path: '/about/philosophy', Type: 'Document'},
-          {UID: 'dfgsdfgj675', Title: 'Staff', path: '/about/staff', Type: 'Folder'},
-          {UID: 'sdfbsfdh345', Title: 'Board of Directors', path: '/about/board-of-directors', Type: 'Document'}
+          {UID: 'gfn5634f', Title: 'About Us', path: '/about/about-us', Type: 'Document', getIcon: ""},
+          {UID: '45dsfgsdcd', Title: 'Philosophy', path: '/about/philosophy', Type: 'Document', getIcon: ""},
+          {UID: 'dfgsdfgj675', Title: 'Staff', path: '/about/staff', Type: 'Folder', getIcon: ""},
+          {UID: 'sdfbsfdh345', Title: 'Board of Directors', path: '/about/board-of-directors', Type: 'Document', getIcon: ""}
         ];
 
         var staff = [
-          {UID: 'asdfasdf9sdf', Title: 'Mike', path: '/about/staff/mike', Type: 'Document'},
-          {UID: 'cvbcvb82345', Title: 'Joe', path: '/about/staff/joe', Type: 'Document'}
+          {UID: 'asdfasdf9sdf', Title: 'Mike', path: '/about/staff/mike', Type: 'Document', getIcon: ""},
+          {UID: 'cvbcvb82345', Title: 'Joe', path: '/about/staff/joe', Type: 'Document', getIcon: ""}
         ];
         var searchables = about.concat(root).concat(staff);
 

diff --git a/mockup/tests/pattern-tinymce-test.js b/mockup/tests/pattern-tinymce-test.js
@@ -35,15 +35,17 @@ define([
             path: '/news/aggregator',
             Type: 'Collection',
             Description: 'Site News',
-            Title: 'News'
+            Title: 'News',
+            getIcon: ''
           },
           {
             UID: 'fooasdfasdf1123asZ',
             path: '/about',
             getURL: 'http://localhost:8081/about',
             Type: 'Page',
             Description: 'About',
-            Title: 'About'
+            Title: 'About',
+            getIcon: 'document.png'
           },
         ];
 
@@ -199,7 +201,8 @@ define([
         UID: 'foobar',
         Type: 'Page',
         Title: 'Foobar',
-        path: '/foobar'
+        path: '/foobar',
+        getIcon: ''
       });
       expect(pattern.linkModal.getLinkUrl()).to.equal('resolveuid/foobar');
     });
@@ -246,7 +249,8 @@ define([
         UID: 'foobar',
         Type: 'Page',
         Title: 'Foobar',
-        path: '/foobar'
+        path: '/foobar',
+        getIcon: ''
       });
       pattern.linkModal.focusElement(pattern.tiny.dom.getRoot().getElementsByTagName('p')[0]);
       pattern.linkModal.$button.trigger('click');