Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option tho show thumbs for images in content listing and rename-p… #592

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGES.rst
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ Changelog
2.1.0 (Unreleased)
-------------------

- Add option tho show thumbs for images in content listing and rename-popover
https://github.com/plone/Products.CMFPlone/issues/1074
[fgrcon]

- do not set overflow hidden on modal wrapper parent. This should already
be taken care of with plone-modal-open class being applied to the body.
This should fix issues with scrolling when this isn't properly cleared
Expand Down
49 changes: 27 additions & 22 deletions mockup/patterns/relateditems/pattern.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@
* cached. (true)
* closeOnSelect(boolean): Select2 option. Whether or not the drop down should be closed when an item is selected. (false)
* dropdownCssClass(string): Select2 option. CSS class to add to the drop down element. ('pattern-relateditems-dropdown')
* folderTypes(array): Types which should be considered browsable. (["Folder"])
*
* #this does not respect custom dx types which are also folderish:
* --> folderTypes(array): Types which should be considered browsable. (["Folder"])
* # needs to be implemented with meta data field: is_folderish from vocabulary
*
* homeText(string): Text to display in the initial breadcrumb item. (home)
* maximumSelectionSize(integer): The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited. (-1)
* multiple(boolean): Do not change this option. (true)
Expand Down Expand Up @@ -97,29 +101,30 @@ define([
closeOnSelect: false,
basePath: '/',
homeText: _t('home'),
folderTypes: ['Folder'],
//folderTypes: ['Folder'],
selectableTypes: null, // null means everything is selectable, otherwise a list of strings to match types that are selectable
attributes: ['UID', 'Title', 'portal_type', 'path', 'getIcon'],
attributes: ['UID', 'Title', 'portal_type', 'path','getURL', 'getIcon','is_folderish','review_state'],
dropdownCssClass: 'pattern-relateditems-dropdown',
maximumSelectionSize: -1,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use "thumb" here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vangheem
I am afraid, I don't yets see clear through all this code.

What i tried is
...

<span class="pattern-relateditems-result-title contenttype-<%= portal_type.toLowerCase() %>"><%= Title %></span>'

which is a hack: it should work for 'Folder', 'Image' but of course not for 'News Item' or other (custom ...).
(need something like normalizeString here, or add contenttype-class to vocabulary?

but also classes like 'contenttype-folder' are not respected (need to fix in barcelonetta less?)

using thumb here would be a good and easy solution. But:

  • images (64x64) as i implemented it for folder contents might be too big for the dropdown
  • we should prevent rendering class=contenttype-something together with thumb ..
    so something like:

``` `
if not thumb: class=contenttype.something
else

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vangheem
update: I think i solved that ... works fine with thumb... :-) - work in progress

resultTemplate: '' +
'<div class="pattern-relateditems-result pattern-relateditems-type-<%= portal_type %> <% if (selected) { %>pattern-relateditems-active<% } %>">' +
' <a href="#" class="pattern-relateditems-result-select <% if (selectable) { %>selectable<% } %> contenttype-<%= portal_type.toLowerCase() %>">' +
' <% if (typeof getIcon !== "undefined" && getIcon) { %><span class="pattern-relateditems-result-icon"><img src="<%= getIcon %>" /></span><% } %>' +
' <span class="pattern-relateditems-result-title"><%= Title %></span>' +
'<div class=" pattern-relateditems-result <% if (selected) { %>pattern-relateditems-active<% } %>">' +
' <a href="#" class=" pattern-relateditems-result-select <% if (selectable) { %>selectable<% } %>">' +
' <% if (typeof getIcon !== "undefined" && getIcon) { %><img src="<%= getURL %>/@@images/image/icon "> <% } %>' +
' <span class="pattern-relateditems-result-title <% if (typeof review_state !== "undefined") { %> state-<%= review_state %> <% } %> " /span>' +
' <span class="pattern-relateditems contenttype-<%- portal_type.toLowerCase() %>"><%= Title %></span>' +
' <span class="pattern-relateditems-result-path"><%= path %></span>' +
' </a>' +
' <span class="pattern-relateditems-buttons">' +
' <% if (folderish) { %>' +
' <% if (is_folderish) { %>' +
' <a class="pattern-relateditems-result-browse" href="#" data-path="<%= path %>"></a>' +
' <% } %>' +
' </span>' +
'</div>',
resultTemplateSelector: null,
selectionTemplate: '' +
'<span class="pattern-relateditems-item pattern-relateditems-type-<%= portal_type %>">' +
' <% if (typeof getIcon !== "undefined" && getIcon) { %><span class="pattern-relateditems-result-icon"><img src="<%= getIcon %>" /></span><% } %>' +
' <span class="pattern-relateditems-item-title"><%= Title %></span>' +
'<span class="pattern-relateditems-item">' +
' <% if (typeof getIcon !== "undefined" && getIcon) { %> <img src="<%= getURL %>/@@images/image/icon"> <% } %>' +
' <span class="pattern-relateditems-item-title contenttype-<%- portal_type.toLowerCase() %> <% if (typeof review_state !== "undefined") { %> state-<%= review_state %> <% } %>" ><%= Title %></span>' +
' <span class="pattern-relateditems-item-path"><%= path %></span>' +
'</span>',
selectionTemplateSelector: null,
Expand Down Expand Up @@ -243,7 +248,7 @@ define([
label: item.Title,
id: item.UID,
path: item.path,
folder: self.options.folderTypes.indexOf(item.portal_type) !== -1
portal_type: item.portal_type
};
nodes.push(node);
});
Expand Down Expand Up @@ -343,17 +348,16 @@ define([
},
init: function() {
var self = this;

self.query = new utils.QueryHelper(
$.extend(true, {}, self.options, {pattern: self})
);
self.treeQuery = new utils.QueryHelper(
$.extend(true, {}, self.options, {
pattern: self,
baseCriteria: [{
i: 'portal_type',
o: 'plone.app.querystring.operation.list.contains',
v: self.options.folderTypes
i: 'is_folderish',
o: 'plone.app.querystring.operation.selection.is',
v: 'True'
}]
})
);
Expand All @@ -372,13 +376,14 @@ define([
};

Select2.prototype.initializeOrdering.call(self);

self.options.formatResult = function(item) {
if (!item.portal_type || _.indexOf(self.options.folderTypes, item.portal_type) === -1) {
item.folderish = false;
} else {
item.folderish = true;
}
if (item.is_folderish){
item.folderish = true;
}
else {
item.folderish = false;
}


item.selectable = self.isSelectable(item);

Expand Down
4 changes: 2 additions & 2 deletions mockup/patterns/structure/pattern.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
* moveUrl:/moveitem;
* indexOptionsUrl:/tests/json/queryStringCriteria.json;
* contextInfoUrl:{path}/context-info;"></div>
*
*
*/


Expand Down Expand Up @@ -53,7 +53,7 @@ define([
'UID', 'Title', 'portal_type', 'path', 'review_state',
'ModificationDate', 'EffectiveDate', 'CreationDate',
'is_folderish', 'Subject', 'getURL', 'id', 'exclude_from_nav',
'getObjSize', 'last_comment_date', 'total_comments'
'getObjSize', 'last_comment_date', 'total_comments','getIcon'
],
activeColumns: [
'ModificationDate',
Expand Down
12 changes: 8 additions & 4 deletions mockup/patterns/structure/templates/tablerow.xml
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<td class="selection"><input type="checkbox" <% if(selected){ %> checked="checked" <% } %>/></td>

<td class="title">
<a href="<%- getURL %>" class="manage state-<%- review_state %> contenttype-<%- portal_type.toLowerCase() %>"><%- Title %></a>
<a href="<%- getURL %>" class="manage state-<%- review_state %> contenttype-<%- portal_type.toLowerCase() %>"
title="<%- portal_type %>" >
<% if(attributes["getIcon"] ){ %> <img class="image-icon" src="<%- getURL %>/@@images/image/icon"><% } %>
<%- Title %></a>
<div class="icon-group-right">
<a href="<%- getURL %>/view" title="<%- _t('View') %>"><span class="glyphicon glyphicon-new-window"></span></a>
</div>
</td>
<% _.each(activeColumns, function(column){ %>
<% if(_.has(availableColumns, column)) { %>
<td class="<%- column %>"><%- attributes[column] %></td>
<% } %>
<% if(_.has(availableColumns, column)) { %>
<td class="<%- column %>"><%- attributes[column] %></td>
<% } %>
<% }); %>
<td class="actionmenu-container">
</td>
2 changes: 1 addition & 1 deletion mockup/patterns/tinymce/pattern.js
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ define([
},
relatedItems: {
// UID attribute is required here since we're working with related items
attributes: ['UID', 'Title', 'Description', 'getURL', 'portal_type', 'path', 'ModificationDate', 'getIcon'],
attributes: ['UID', 'Title', 'portal_type', 'path','getURL', 'getIcon','is_folderish','review_state'],
batchSize: 20,
basePath: '/',
vocabularyUrl: null,
Expand Down
6 changes: 3 additions & 3 deletions mockup/tests/pattern-relateditems-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ define([
}
this.server.respondWith(/relateditems-test.json/, function(xhr, id) {
var root = [
{UID: 'jasdlfdlkdkjasdf', Title: 'Some Image', path: '/test.png', portal_type: 'Image', getIcon: "image.png"},
{UID: 'jasdlfdlkdkjasdf', Title: 'Some Image', path: '/test.png', portal_type: 'Image', getIcon: ""},
{UID: 'asdlfkjasdlfkjasdf', Title: 'News', path: '/news', portal_type: 'Folder', getIcon: ""},
{UID: '124asdfasasdaf34', Title: 'About', path: '/about', portal_type: 'Folder', getIcon: ""},
{UID: 'asdf1234', Title: 'Projects', path: '/projects', portal_type: 'Folder', getIcon: ""},
{UID: 'asdf1234gsad', Title: 'Contact', path: '/contact', portal_type: 'Document', getIcon: "document.png"},
{UID: 'asdf1234gsad', Title: 'Contact', path: '/contact', portal_type: 'Document', getIcon: ""},
{UID: 'asdv34sdfs', Title: 'Privacy Policy', path: '/policy', portal_type: 'Document', getIcon: ""},
{UID: 'asdfasdf234sdf', Title: 'Our Process', path: '/our-process', portal_type: 'Folder', getIcon: "folder.png"},
{UID: 'asdfasdf234sdf', Title: 'Our Process', path: '/our-process', portal_type: 'Folder', getIcon: ""},
{UID: 'asdhsfghyt45', Title: 'Donate', path: '/donate-now', portal_type: 'Document', getIcon: ""},
];
var about = [
Expand Down