Menu
▾
▴
[Openutils-svn] SF.net SVN: openutils:[1817] trunk/openutils-mgnlmedia/src/main/resources
|
From: <die...@us...> - 2010-02-05 15:50:36
|
Revision: 1817
http://openutils.svn.sourceforge.net/openutils/?rev=1817&view=rev
Author: diego_schivo
Date: 2010-02-05 15:50:24 +0000 (Fri, 05 Feb 2010)
Log Message:
-----------
MEDIA-64 media-header: same popup-menu for "pages" and "edit" menu-items
Modified Paths:
--------------
trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/css/folderView.css
trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/js/mediafolderview.js
trunk/openutils-mgnlmedia/src/main/resources/net/sourceforge/openutils/mgnlmedia/media/pages/MediaFolderViewPage.html
Modified: trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/css/folderView.css
===================================================================
--- trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/css/folderView.css 2010-02-05 14:54:18 UTC (rev 1816)
+++ trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/css/folderView.css 2010-02-05 15:50:24 UTC (rev 1817)
@@ -177,12 +177,15 @@
}
.mediaheader {
- position: relative;
margin: 0px 10px 0 10px;
padding: 5px 0 3px 0;
text-align: left;
}
+.mediaheader .tips {
+ cursor: pointer;
+}
+
.mediaheader span.edit {
float: right;
background: transparent url(images/arrow.gif) no-repeat center right;
@@ -191,57 +194,6 @@
cursor: pointer;
}
-.mediaheader .icons {
- position: absolute;
- right: 0;
- top: 20px;
- width: 120px;
- height: 140px;
- font-size: 11px;
- background-color: #ffffff;
- border: 1px solid #cfcfcf;
- opacity: 0.90;
- filter: alpha(opacity = 90);
- -moz-box-shadow: 3px 3px 3px #666;
- -webkit-box-shadow: 3px 3px 3px #666;
- box-shadow: 3px 3px 3px #666;
-}
-
-.mediaheader .icons ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.mediaheader .icons li.active {
- background-color: #d1e1ed;
-}
-
-.mediaheader .icons a {
- text-decoration: none;
- display: block;
- color: #000;
- height: 16px;
- line-height: 16px;
- padding: 2px 4px;
-}
-
-.mediaheader .icons a.disabled {
- color: #666;
-}
-
-.mediaheader .icons a img,.mediaheader .icons a span {
- float: left;
-}
-
-.mediaheader .icons a img {
- margin-right: 4px;
-}
-
-.mediaheader .tips {
- cursor: pointer;
-}
-
.image .details {
display: none;
}
@@ -297,4 +249,52 @@
.sexy-tooltip {
font-size: 0.8em;
-}
\ No newline at end of file
+}
+
+.menupopup {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ width: 200px;
+ height: 200px;
+ display: none;
+ font-size: 11px;
+ background-color: #ffffff;
+ border: 1px solid #cfcfcf;
+ opacity: 0.90;
+ filter: alpha(opacity = 90);
+ -moz-box-shadow: 3px 3px 3px #666;
+ -webkit-box-shadow: 3px 3px 3px #666;
+ box-shadow: 3px 3px 3px #666;
+}
+
+.menupopup ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.menupopup li.active {
+ background-color: #d1e1ed;
+}
+
+.menupopup a {
+ text-decoration: none;
+ display: block;
+ color: #000;
+ height: 16px;
+ line-height: 16px;
+ padding: 2px 4px;
+}
+
+.menupopup a.disabled {
+ color: #666;
+}
+
+.menupopup a img,.menupopup a span {
+ float: left;
+}
+
+.menupopup a img {
+ margin-right: 4px;
+}
Modified: trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/js/mediafolderview.js
===================================================================
--- trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/js/mediafolderview.js 2010-02-05 14:54:18 UTC (rev 1816)
+++ trunk/openutils-mgnlmedia/src/main/resources/mgnl-resources/media/js/mediafolderview.js 2010-02-05 15:50:24 UTC (rev 1817)
@@ -2,7 +2,7 @@
initialize: function(){
new MediaFolderView.BgSelectors('#navigation a.bg-selector');
- new MediaFolderView.EditMenus('li.media .edit');
+ new MediaFolderView.EditMenus('li.media .menuitem');
new MediaFolderView.InfoTooltips('li.media .image');
}
@@ -40,25 +40,33 @@
MediaFolderView.EditMenus = new Class({
initialize: function(triggers){
- this.triggerClickHandler = this.handleTriggerClick.bindWithEvent(this);
- this.popupEnterHandler = this.handlePopupEnter.bindWithEvent(this);
- this.popupMoveHandler = this.handlePopupMove.bindWithEvent(this);
- this.popupLeaveHandler = this.handlePopupLeave.bindWithEvent(this);
- $$(triggers).addEvent('click', this.triggerClickHandler);
+ $$(triggers).addEvent('click', this.handleTriggerClick.bindWithEvent(this));
+ this.popup = new Element('div').addClass('menupopup').inject(document.body);
+ this.popup.addEvents({
+ mouseenter: this.handlePopupEnter.bindWithEvent(this),
+ mousemove: this.handlePopupMove.bindWithEvent(this),
+ mouseleave: this.handlePopupLeave.bindWithEvent(this)
+ });
},
handleTriggerClick: function(e){
this.timer = $clear(this.timer);
- var popup = $(e.target).getNext();
- if (popup != this.popup){
+ var menuitem = $(e.target);
+ var menu = menuitem.getNext();
+ if (menu != this.menu){
this.hide();
- popup.setStyle('display', '');
- popup.addEvents({
- mouseenter: this.popupEnterHandler,
- mousemove: this.popupMoveHandler,
- mouseleave: this.popupLeaveHandler
- });
- this.popup = popup;
+ var content = new Element('div', {html: menu.get('html')});
+ var coords = menuitem.getCoordinates();
+ this.popup
+ .empty()
+ .grab(content)
+ .setStyles({
+ left: coords.left + 'px',
+ top: (coords.bottom + 5) + 'px',
+ display: 'block'
+ });
+ this.popup.setStyle('height', content.getSize().y + 'px');
+ this.menu = menu;
}
},
@@ -87,16 +95,13 @@
},
hide: function(){
- if (this.popup){
- this.popup.setStyle('display', 'none');
- this.popup.removeEvent('mouseenter', this.popupEnterHandler);
- this.popup.removeEvent('mousemove', this.popupMoveHandler);
- this.popup.removeEvent('mouseleave', this.popupLeaveHandler);
- delete this.popup;
+ if (this.menu){
+ this.popup.setStyle('display', '');
+ delete this.menu;
}
- if (this.menuItem){
- this.menuItem.setStyle('background', 'transparent');
- delete this.menuItem;
+ if (this.li){
+ this.li.removeClass('active');
+ delete this.li;
}
}
Modified: trunk/openutils-mgnlmedia/src/main/resources/net/sourceforge/openutils/mgnlmedia/media/pages/MediaFolderViewPage.html
===================================================================
--- trunk/openutils-mgnlmedia/src/main/resources/net/sourceforge/openutils/mgnlmedia/media/pages/MediaFolderViewPage.html 2010-02-05 14:54:18 UTC (rev 1816)
+++ trunk/openutils-mgnlmedia/src/main/resources/net/sourceforge/openutils/mgnlmedia/media/pages/MediaFolderViewPage.html 2010-02-05 15:50:24 UTC (rev 1817)
@@ -77,6 +77,7 @@
}
});
+ /*
$$('.tips').each(function(item){
item.store('tip:enter', $empty);
item.store('tip:leave', $empty);
@@ -97,6 +98,7 @@
$$('.tips').each(function(item){
item.addEvent('click', Tips1.elementEnter.bindWithEvent(Tips1, item));
});
+ */
new MediaFolderView();
});
@@ -173,8 +175,8 @@
[/#if]
<li class="media ${mediaStatusClass} ${selectMediaClass}" style="text-align:center">
<div class="mediaheader">
- <span class="edit">${this.msgs.get('media.edit')}</span>
- <div class="icons" style="display: none;">
+ <span class="edit menuitem">${this.msgs.get('media.edit')}</span>
+ <div class="icons menu" style="display: none;">
<ul>
[#if this.type != 'youtube']
<li>
@@ -268,11 +270,16 @@
[#if media.usedInWebPages?size = 0]
<span>${this.msgs.get('media.nopages')}</span>
[#else]
- [#assign pages = ""]
- [#list media.usedInWebPages as page]
- [#assign pages = pages + "<a href='${this.request.contextPath}" + page +".html' target='_blank'>"+ page +"</a><br/>"]
- [/#list]
- <span class="tips" rel="${pages}">${this.msgs.get('media.pages')} (${media.usedInWebPages?size})</span>
+ <span class="tips menuitem">${this.msgs.get('media.pages')} (${media.usedInWebPages?size})</span>
+ <div class="pages menu" style="display: none;">
+ <ul>
+ [#list media.usedInWebPages as page]
+ <li>
+ <a href="${this.request.contextPath}${page}.html" target="_blank">${page}</a>
+ </li>
+ [/#list]
+ </ul>
+ </div>
[/#if]
</div>
<div class="imageBorder">
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
