From 8553ab0d4a15a7a5b67c7c11495319ab69fe5ecd Mon Sep 17 00:00:00 2001 From: Kevin Roast Date: Fri, 25 May 2007 14:16:32 +0000 Subject: [PATCH] Resource panel (preview and actions) added to files/folders in MySpaces portlet - files show preview similar to MyDocs panel and folders show the child docs and folders as clickable links. Refresh action moved as per suggestion from PHH. Recently Modified filter added to MySpaces portlet. Image preview makes better use of preview panel area and is centered. MyDocs preview panel brought into line with changes to MySpaces preview panel. git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5782 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261 --- .../client/doclist_preview_panel.ftl | 16 +- .../client/myspaces_preview_panel.ftl | 52 +++++ .../alfresco/portlets/doclist_get_html.ftl | 8 +- .../alfresco/portlets/myspaces_get_html.ftl | 148 +++++++++++-- .../portlets/myspacespanel_get_html.ftl | 7 +- source/web/scripts/ajax/doclist.js | 8 +- source/web/scripts/ajax/myspaces.js | 202 +++++++++++++++++- 7 files changed, 405 insertions(+), 36 deletions(-) create mode 100644 config/alfresco/templates/client/myspaces_preview_panel.ftl diff --git a/config/alfresco/templates/client/doclist_preview_panel.ftl b/config/alfresco/templates/client/doclist_preview_panel.ftl index 3e0adb2efc..4accc801a6 100644 --- a/config/alfresco/templates/client/doclist_preview_panel.ftl +++ b/config/alfresco/templates/client/doclist_preview_panel.ftl @@ -1,34 +1,30 @@ <#assign isImage=node.isDocument && (node.mimetype = "image/gif" || node.mimetype = "image/jpeg" || node.mimetype = "image/png")> -<#assign isVideo=node.isDocument && node.mimetype?starts_with("video/")> -
-
- <#if node.isDocument && !isImage && !isVideo> +
+ <#if node.isDocument && !isImage> <#assign c=cropContent(node.properties.content, 512)> <#if c?length != 0> ${c?html?replace('$', '
', 'rm')}<#if (c?length >= 512)>... <#elseif isImage> - - <#else> - TBD - Video? +
- + - + - + diff --git a/config/alfresco/templates/client/myspaces_preview_panel.ftl b/config/alfresco/templates/client/myspaces_preview_panel.ftl new file mode 100644 index 0000000000..90e4d8fc32 --- /dev/null +++ b/config/alfresco/templates/client/myspaces_preview_panel.ftl @@ -0,0 +1,52 @@ +<#assign isImage=node.isDocument && (node.mimetype = "image/gif" || node.mimetype = "image/jpeg" || node.mimetype = "image/png")> +
Checkout Edit Details
Update View Content
Delete More Actions...
+ + + + + +
+
+ <#if node.isDocument && !isImage> + <#assign c=cropContent(node.properties.content, 512)> + <#if c?length != 0> + ${c?html?replace('$', '
', 'rm')}<#if (c?length >= 512)>... + + <#elseif isImage> +
+ <#elseif node.isContainer> + <#list node.children?sort_by('name') as c> + <#--if (c_index >= 25)>
...
<#break>--> + <#if c.isDocument || c.isContainer> + + + + +
+ 		+ + <#if node.isDocument> + + + + + + + + + + + + + <#else> + + + + + + + + + +
CheckoutEdit Details
UpdateView Content
DeleteMore Actions...
Edit DetailsDelete
More Actions...
+
diff --git a/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist_get_html.ftl b/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist_get_html.ftl index fb3a52e796..d8254ae78c 100644 --- a/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist_get_html.ftl +++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist_get_html.ftl @@ -35,7 +35,7 @@ -
+ @@ -211,7 +211,7 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited font-size: 12px; background-color: #bad7e4; color: #000000; - margin: 0px 0px 0px 0px; + margin: 0px; border-top: 1px dotted #0092dd; visibility: hidden; overflow: hidden; @@ -230,12 +230,12 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited font-weight: bolder; } -.docMetapreview +.docPreview { color: #515D6B; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; overflow: hidden; - height: 140px; + height: 144px; width: 410px; border: 1px solid #0092dd; } diff --git a/config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces_get_html.ftl b/config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces_get_html.ftl index c5700576cd..00344c5e62 100644 --- a/config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces_get_html.ftl +++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces_get_html.ftl @@ -15,7 +15,7 @@ <#-- get the filter mode from the passed in args --> -<#-- filters: 0=all, 1=spaces, 2=docs, 3=mine --> +<#-- filters: 0=all, 1=spaces, 2=docs, 3=mine, 4=recent --> <#if args.f?exists && args.f?length!=0><#assign filter=args.f?number><#else><#assign filter=0> <#-- get the path location from the passed in args, remove trailing slash --> @@ -48,22 +48,20 @@ - <#-- Refresh action --> - Refresh
- ${home.name?html} + ${home.name?html}
-
+
<#-- TODO: permission checks on the actions! --> <#-- Upload File action --> -
Upload
+
Upload
<#-- Url encode the path value, and encode any single quotes to generate valid string -->
<#-- Create Space action --> -
Create Space
+
Create Space
All Items
@@ -74,17 +72,19 @@ -
-
-
Name:
+
+
+ +
All Items Spaces Documents My ItemsRecently Modified + Refresh +
-
@@ -213,6 +213,28 @@ a.spacefilterLinkSelected:link, a.spacefilterLinkSelected:visited padding-left: 16px; } +.spaceResource +{ + font-family: Trebuchet MS, Arial, Helvetica, sans-serif; + font-size: 12px; + background-color: #bad7e4; + color: #000000; + margin: 0px; + border-top: 1px dotted #0092dd; + visibility: hidden; + overflow: hidden; +} + +.spacesAjaxWait +{ + background-image: url(${url.context}/images/icons/ajax_anim.gif); + background-position: center; + background-repeat: no-repeat; + width: 696px; + height: 150px; + overflow: hidden; +} + .spaceItemSelected { background-color: #CCE7F3 !important; @@ -263,14 +285,14 @@ a.spaceBreadcrumbLink:link, a.spaceBreadcrumbLink:visited, a.spaceBreadcrumbLink border: 1px solid #CCD4DB; } -.spaceActions +.spaceToolbar { background-color: #EEF7FB; height: 4em; border-bottom: 1px solid #CCD4DB; } -.spaceAction +.spaceToolbarAction { background-repeat: no-repeat; background-position: 2px; @@ -286,16 +308,90 @@ a.spaceBreadcrumbLink:link, a.spaceBreadcrumbLink:visited, a.spaceBreadcrumbLink border: 1px dashed #CCD4DB; } -.spaceActionUpload +.spaceToolbarActionUpload { background-image: url(${url.context}/images/icons/doclist_action_upload.png); } -.spaceActionCreateSpace +.spaceToolbarActionCreateSpace { background-image: url(${url.context}/images/icons/doclist_action_createspace.png); } +.spaceAction +{ + color: #515D6B; + font-family: Trebuchet MS, Arial, Helvetica, sans-serif; + font-size: 9pt; + font-weight: bolder; + background-color: #c3dce7; + background-repeat: no-repeat; + background-position: left; + width: 87px; + height: 28px; + border: 1px solid #ffffff; + float: left; + display: block; + padding: 10px 0px 0px 36px; + cursor: pointer; +} + +.docActionCheckout +{ + background-image: url(${url.context}/images/icons/doclist_action_checkout.png); + border-bottom: none; + border-right: none; +} + +.docActionEditDetails +{ + background-image: url(${url.context}/images/icons/doclist_action_edit.png); + border-bottom: none; +} + +.docActionUpdate +{ + background-image: url(${url.context}/images/icons/doclist_action_update.png); + border-bottom: none; + border-right: none; +} + +.docActionViewContent +{ + background-image: url(${url.context}/images/icons/doclist_action_view.png); + border-bottom: none; +} + +.docActionDelete +{ + background-image: url(${url.context}/images/icons/doclist_action_delete.png); + border-right: none; +} + +.docActionMoreActions +{ + padding-left: 20px; + padding-right: 16px; +} + +.spaceActionMoreActions +{ + padding-left: 20px; + padding-right: 16px; + border-top: none; +} + +.spaceActionEditDetails +{ + background-image: url(${url.context}/images/icons/doclist_action_edit.png); +} + +.spaceActionDelete +{ + background-image: url(${url.context}/images/icons/doclist_action_delete.png); + border-left: none; +} + .spaceUploadPanel { position: absolute; @@ -332,4 +428,26 @@ a.refreshViewLink:link, a.refreshViewLink:visited, a.refreshViewLink:hover text-decoration: none; } +.spacePreview +{ + color: #515D6B; + font-family: Trebuchet MS, Arial, Helvetica, sans-serif; + overflow: hidden; + height: 144px; + width: 410px; + border: 1px solid #0092dd; +} + +a.childSpaceLink:link, a.childSpaceLink:visited, a.childSpaceLink:hover +{ + color: #5A5741; + font-family: Trebuchet MS, Arial, Helvetica, sans-serif; +} + +img.spaceImageIcon +{ + vertical-align: -25%; + padding-right:4px; +} + \ No newline at end of file diff --git a/config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel_get_html.ftl b/config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel_get_html.ftl index eef1981b32..bbb6cf03bb 100644 --- a/config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel_get_html.ftl +++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel_get_html.ftl @@ -1,11 +1,13 @@ <#assign user=person.properties.userName> <#assign count=0> +<#assign weekms=1000*60*60*24*7> <#list companyhome.nodeByReference[args.h].children?sort_by('name') as d> <#if (d.isContainer || d.isDocument) && ((args.f="0") || (args.f="1" && d.isContainer) || (args.f="2" && d.isDocument) || - (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)))> + (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)) || + (args.f="4" && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1)))> <#assign count=count+1>
@@ -39,8 +41,9 @@
+
<#-- hidden div with the count value for the page --> - \ No newline at end of file + diff --git a/source/web/scripts/ajax/doclist.js b/source/web/scripts/ajax/doclist.js index f35451e9ef..36a46f1486 100644 --- a/source/web/scripts/ajax/doclist.js +++ b/source/web/scripts/ajax/doclist.js @@ -43,7 +43,7 @@ var MyDocs = { if (resource.isLoaded) { resource.needsOverflow = false; - var elePrev = $E('.docMetapreview', resource) + var elePrev = $E('.docPreview', resource) if (elePrev) { elePrev.setStyle('overflow', 'auto'); @@ -207,7 +207,7 @@ var MyDocs = { // deferred from transition complete event if (resource.needsOverflow) { - var elePrev = $E('.docMetapreview', resource) + var elePrev = $E('.docPreview', resource) if (elePrev) { elePrev.setStyle('overflow', 'auto'); @@ -312,7 +312,7 @@ var MyDocs = { 'opacity': [otherResource.getStyle('opacity'), 0]}; } - var otherMeta = $E('.docMetapreview', otherResource) + var otherMeta = $E('.docPreview', otherResource) if (otherMeta) { otherMeta.setStyle('overflow', 'hidden'); @@ -331,7 +331,7 @@ var MyDocs = { 'height': [resourceHeight, resource.defHeight], 'opacity': [resource.getStyle('opacity'), 0]}; - var elePrev = $E('.docMetapreview', resource) + var elePrev = $E('.docPreview', resource) if (elePrev) { elePrev.setStyle('overflow', 'hidden'); diff --git a/source/web/scripts/ajax/myspaces.js b/source/web/scripts/ajax/myspaces.js index 04b14634d0..6dea590b49 100644 --- a/source/web/scripts/ajax/myspaces.js +++ b/source/web/scripts/ajax/myspaces.js @@ -4,6 +4,7 @@ var MySpaces = { ANIM_LENGTH: 300, DETAIL_MARGIN: 56, TITLE_FONT_SIZE: 18, + RESOURCE_PANEL_HEIGHT: 150, fileInput: null, Path: null, Filter: null, @@ -59,10 +60,40 @@ var MySpaces = { var icons = $$('#spacePanel .spaceIcon'); var imgs = $$('#spacePanel .spaceIconImage'); var imgs64 = $$('#spacePanel .spaceIconImage64'); + var resources = $$('#spacePanel .spaceResource'); var fxItem = new Fx.Elements(items, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear}); var fxDetail = new Fx.Elements(details, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear}); var fxInfo = new Fx.Elements(infos, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear}); var fxIcon = new Fx.Elements(icons, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear}); + var fxResource = new Fx.Elements(resources, + { + wait: false, + duration: 500, + transition: Fx.Transitions.linear, + onComplete: function() + { + this.elements.each(function(resource, i) + { + if (resource.parentNode.isOpen) + { + if (resource.isLoaded) + { + resource.needsOverflow = false; + var elePrev = $E('.spacePreview', resource) + if (elePrev) + { + elePrev.setStyle('overflow', 'auto'); + } + } + else + { + // defer style change to ajax complete event + resource.needsOverflow = true; + } + } + }); + } + }); var fxImage = new Fx.Elements(imgs, { wait: false, @@ -82,7 +113,8 @@ var MySpaces = { var item = items[i], info = infos[i], detail = details[i], - img = imgs[i]; + img = imgs[i], + resource = resources[i]; // animated elements defaults item.defMarginLeft = item.getStyle('margin-left').toInt(); @@ -100,6 +132,8 @@ var MySpaces = { } img.defSrc = img.src; img.bigSrc = imgs64[i].src; + resource.defHeight = 1; + resource.setStyle('height', resource.defHeight); // register 'mouseenter' (subclassed mouseover) event for each space space.addEvent('mouseenter', function(e) @@ -179,6 +213,172 @@ var MySpaces = { fxInfo.start(animInfo); fxImage.start(animImage); }); + + space.addEvent('click', function(e) + { + var animItem = {}, + animDetail = {}, + animInfo = {}; + animImage = {}, + animResource = {}, + resourceHeight = resource.getStyle('height').toInt(); + + if (!space.isOpen) + { + if (!resource.isLoaded) + { + // fire off the ajax request to get the resources for this task + YAHOO.util.Connect.asyncRequest( + "POST", + getContextPath() + '/ajax/invoke/NodeInfoBean.sendNodeInfo', + { + success: function(response) + { + // remove the ajax waiting animation class + resource.removeClass("spacesAjaxWait"); + // populate the resource div with the result + resource.innerHTML = response.responseText; + // flag this resource as loaded + resource.isLoaded = true; + // deferred from transition complete event + if (resource.needsOverflow) + { + var elePrev = $E('.spacePreview', resource) + if (elePrev) + { + elePrev.setStyle('overflow', 'auto'); + } + } + }, + failure: function(response) + { + resource.innerHTML = "Sorry, preview currently unavailable."; + }, + argument: [resource] + }, + "noderef=" + resource.id + "&template=myspaces_preview_panel.ftl" + ); + } + + // open up this space's resources + // flag this space as open + space.isOpen = true; + + // slide and fade in the resources panel + animResource[i] = { + 'height': [resourceHeight, resource.defHeight + MySpaces.RESOURCE_PANEL_HEIGHT], + 'opacity': [resource.getStyle('opacity'), 1]}; + + // close other open space and toggle this one if it's already open + spaces.each(function(otherSpace, j) + { + var otherResource = resources[j], + otherItem = items[j], + otherInfo = infos[j], + otherDetail = details[j], + otherImg = imgs[j]; + + if (otherSpace == space) + { + // continue animations that may have been going on before the click + // move the item title to the right + animItem[j] = { + 'margin-left': [otherItem.getStyle('margin-left').toInt(), MySpaces.DETAIL_MARGIN], + 'font-size': [otherItem.getStyle('font-size').toInt(), MySpaces.TITLE_FONT_SIZE] + }; + // fade in the info button + animInfo[j] = {'opacity': [otherInfo.getStyle('opacity'), 1]}; + // slide and fade in the details panel + animDetail[j] = { + 'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + MySpaces.IMG_LARGE], + 'opacity': [otherDetail.getStyle('opacity'), 1] + }; + // grow the type image + animImage[j] = { + 'height': [otherImg.getStyle('height').toInt(), MySpaces.IMG_LARGE], + 'width': [otherImg.getStyle('width').toInt(), MySpaces.IMG_LARGE] + }; + } + else + { + // close any other open space + otherSpace.isOpen = false; + + // reset selected class? + otherSpace.removeClass('spaceItemSelected'); + // move the title back to the left? + var ml = otherItem.getStyle('margin-left').toInt(); + if (ml != otherItem.defMarginLeft) + { + animItem[j] = { + 'margin-left': [ml, otherItem.defMarginLeft], + 'font-size': [otherItem.getStyle('font-size').toInt(), otherItem.defFontSize] + }; + } + // does this space detail panel need resetting back to it's default height? + var h = otherDetail.getStyle('height').toInt(); + if (h != otherDetail.defHeight) + { + animDetail[j] = { + 'height': [h, otherDetail.defHeight], + 'opacity': [otherDetail.getStyle('opacity'), 0]}; + } + // does the info button need fading out + var o = otherInfo.getStyle('opacity'); + if (o != 0) + { + animInfo[j] = {'opacity': [o, 0]}; + } + // does the image need shrinking? + var ih = otherImg.getStyle('height').toInt(); + if (ih != MySpaces.IMG_SMALL) + { + animImage[j] = { + 'height': [ih, MySpaces.IMG_SMALL], + 'width': [ih, MySpaces.IMG_SMALL] + }; + } + + // does this space resource panel need resetting back to it's default height? + var otherHeight = otherResource.getStyle('height').toInt(); + if (otherHeight != otherResource.defHeight) + { + animResource[j] = { + 'height': [otherHeight, otherResource.defHeight], + 'opacity': [otherResource.getStyle('opacity'), 0]}; + } + + var otherMeta = $E('.spacePreview', otherResource) + if (otherMeta) + { + otherMeta.setStyle('overflow', 'hidden'); + } + } + }); + } + else + { + // close this space panel + // flag this space as closed + space.isOpen = false; + + // reset resource panel back to it's default height + animResource[i] = { + 'height': [resourceHeight, resource.defHeight], + 'opacity': [resource.getStyle('opacity'), 0]}; + + var elePrev = $E('.spacePreview', resource) + if (elePrev) + { + elePrev.setStyle('overflow', 'hidden'); + } + } + fxResource.start(animResource); + fxItem.start(animItem); + fxDetail.start(animDetail); + fxInfo.start(animInfo); + fxImage.start(animImage); + }); }); $('spacePanel').addEvent('mouseleave', function(e)