introduce icons to relateditems vocabulary list #442
Comments
|
looks good to me. +1 |
vangheem
added a commit
to plone/buildout.coredev
that referenced
this issue
Feb 23, 2015
Branch: refs/heads/master Date: 2015-02-20T10:30:03+01:00 Author: Peter Mathis (petschki) <peter.mathis@kombinat.at> Commit: plone/mockup@329ee4a add content icon to relateditems pattern Files changed: M CHANGES.rst M mockup/patterns/relateditems/pattern.js diff --git a/CHANGES.rst b/CHANGES.rst index d7a860b..f6fd285 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -22,6 +22,9 @@ Changelog mockup/GETTING_STARTED.md . Refs: #460. [jcbrand] +- Add icons to relateditems pattern (see plone/mockup#442) + [petschki] + 1.8.3 (2015-01-26) ------------------ diff --git a/mockup/patterns/relateditems/pattern.js b/mockup/patterns/relateditems/pattern.js index 2bb697f..d2a0315 100644 --- 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<% } %>">' + + ' <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 %>">' + + ' <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>', Repository: mockup Branch: refs/heads/master Date: 2015-02-23T10:42:07+01:00 Author: Peter Mathis (petschki) <peter.mathis@kombinat.at> Commit: plone/mockup@78e0cbc make icons conditional. add plone contenttype icon class. fix tests Files changed: M mockup/patterns/relateditems/pattern.js M mockup/patterns/relateditems/pattern.relateditems.less M mockup/tests/pattern-relateditems-test.js diff --git a/mockup/patterns/relateditems/pattern.js b/mockup/patterns/relateditems/pattern.js index d2a0315..45b9b9e 100644 --- a/mockup/patterns/relateditems/pattern.js +++ b/mockup/patterns/relateditems/pattern.js @@ -107,8 +107,8 @@ define([ 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<% } %>">' + - ' <span class="pattern-relateditems-result-icon"><img src="<%= getIcon %>" /></span>' + + ' <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>' + @@ -121,7 +121,7 @@ define([ resultTemplateSelector: null, selectionTemplate: '' + '<span class="pattern-relateditems-item pattern-relateditems-type-<%= Type %>">' + - ' <span class="pattern-relateditems-result-icon"><img src="<%= getIcon %>" /></span>' + + ' <% 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 index 4185c4e..e46d025 100644 --- 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/tests/pattern-relateditems-test.js b/mockup/tests/pattern-relateditems-test.js index 08ddde7..9cb8751 100644 --- 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: "jpeg.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: ""}, + {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); Repository: mockup Branch: refs/heads/master Date: 2015-02-23T11:05:33+01:00 Author: Peter Mathis (petschki) <peter.mathis@kombinat.at> Commit: plone/mockup@7875a3e fix tinymce pattern for new relateditems getIcon attribute Files changed: M mockup/patterns/tinymce/pattern.js M mockup/tests/pattern-relateditems-test.js M mockup/tests/pattern-tinymce-test.js diff --git a/mockup/patterns/tinymce/pattern.js b/mockup/patterns/tinymce/pattern.js index ae9f6d3..19f3fea 100644 --- 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 index 9cb8751..52f6855 100644 --- a/mockup/tests/pattern-relateditems-test.js +++ b/mockup/tests/pattern-relateditems-test.js @@ -36,13 +36,13 @@ define([ } this.server.respondWith(/relateditems-test.json/, function(xhr, id) { var root = [ - {UID: 'jasdlfdlkdkjasdf', Title: 'Some Image', path: '/test.png', Type: 'Image', getIcon: "jpeg.png"}, + {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: ""}, + {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 = [ diff --git a/mockup/tests/pattern-tinymce-test.js b/mockup/tests/pattern-tinymce-test.js index 905321b..d78855b 100644 --- a/mockup/tests/pattern-tinymce-test.js +++ b/mockup/tests/pattern-tinymce-test.js @@ -35,7 +35,8 @@ define([ path: '/news/aggregator', Type: 'Collection', Description: 'Site News', - Title: 'News' + Title: 'News', + getIcon: '' }, { UID: 'fooasdfasdf1123asZ', @@ -43,7 +44,8 @@ define([ 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'); Repository: mockup Branch: refs/heads/master Date: 2015-02-23T08:12:31-06:00 Author: Nathan Van Gheem (vangheem) <vangheem@gmail.com> Commit: plone/mockup@39c1fb5 Merge pull request #465 from plone/issue-442 add content icon to relateditems pattern Files changed: M CHANGES.rst M mockup/patterns/relateditems/pattern.js M mockup/patterns/relateditems/pattern.relateditems.less M mockup/patterns/tinymce/pattern.js M mockup/tests/pattern-relateditems-test.js M mockup/tests/pattern-tinymce-test.js diff --git a/CHANGES.rst b/CHANGES.rst index d7a860b..f6fd285 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -22,6 +22,9 @@ Changelog mockup/GETTING_STARTED.md . Refs: #460. [jcbrand] +- Add icons to relateditems pattern (see plone/mockup#442) + [petschki] + 1.8.3 (2015-01-26) ------------------ diff --git a/mockup/patterns/relateditems/pattern.js b/mockup/patterns/relateditems/pattern.js index 2bb697f..45b9b9e 100644 --- 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 index 4185c4e..e46d025 100644 --- 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 index ae9f6d3..19f3fea 100644 --- 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 index 08ddde7..52f6855 100644 --- 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 index 905321b..d78855b 100644 --- a/mockup/tests/pattern-tinymce-test.js +++ b/mockup/tests/pattern-tinymce-test.js @@ -35,7 +35,8 @@ define([ path: '/news/aggregator', Type: 'Collection', Description: 'Site News', - Title: 'News' + Title: 'News', + getIcon: '' }, { UID: 'fooasdfasdf1123asZ', @@ -43,7 +44,8 @@ define([ 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');
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've came across this in my recent project and think, this would be a nice little feature for relateditems list. I've added "getIcon" to the RelatedItems.attributes and updated resultTemplate and selectionTemplate in the pattern to show the icon.
So if one is cool and adds a custom "getIcon" indexer you can enable image preview in relateditems selector like this:
just thinking loud :)
The text was updated successfully, but these errors were encountered: