Author: phuong_vu Date: 2011-09-05 08:49:25 -0400 (Mon, 05 Sep 2011) New Revision: 7304 Modified: portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/gadget/UIGadget.js portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIDashboard.js portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIDashboard/Stylesheet.css portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIGadget/Stylesheet.css portal/branches/dom/web/portal/src/main/webapp/groovy/portal/webui/application/UIGadget.gtmpl Log: [DOM] UIGadget optimization Modified: portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/gadget/UIGadget.js =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/gadget/UIGadget.js 2011-09-05 12:46:25 UTC (rev 7303) +++ portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/gadget/UIGadget.js 2011-09-05 12:49:25 UTC (rev 7304) @@ -99,7 +99,7 @@ } else { var gadgetControl = eXo.core.DOMUtil.findFirstDescendantByClass(uiGadget, "div", "GadgetControl"); gadgetControl.style.display = "block"; - var gadgetTitle = eXo.core.DOMUtil.findFirstDescendantByClass(gadgetControl, "div", "GadgetTitle") ; + var gadgetTitle = eXo.core.DOMUtil.findFirstDescendantByClass(gadgetControl, "span", "GadgetTitle") ; gadgetTitle.style.display = "block"; if (metadata && metadata.modulePrefs.title != null && metadata.modulePrefs.title.length > 0) gadgetTitle.innerHTML = metadata.modulePrefs.title; } Modified: portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIDashboard.js =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIDashboard.js 2011-09-05 12:46:25 UTC (rev 7303) +++ portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIDashboard.js 2011-09-05 12:49:25 UTC (rev 7304) @@ -310,7 +310,7 @@ if (iframe) { iframe.style.width = "99.9%" ; } - var minimizeButton = DOMUtil.findFirstDescendantByClass(gadgetControls[j], "div", "MinimizeAction") ; + var minimizeButton = DOMUtil.findFirstDescendantByClass(gadgetControls[j], "span", "MinimizeAction") ; if(canEdit) { eXo.webui.UIDashboard.init(gadgetControls[j], uiGadget); Modified: portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIDashboard/Stylesheet.css =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIDashboard/Stylesheet.css 2011-09-05 12:46:25 UTC (rev 7303) +++ portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIDashboard/Stylesheet.css 2011-09-05 12:49:25 UTC (rev 7304) @@ -43,20 +43,6 @@ height: 100%; } -.UIDashboard .GadgetTitle { - float: left; /* orientation=lt */ - float: right; /* orientation=rt */ - padding: 0px 5px; - color: #5b5b5b; - font-weight: normal; - cursor: move; - overflow: hidden; - white-space: nowrap; - width: 195px; - margin-right: 75px !important; /* orientation=lt */ - margin: 0px 0px 0px 75px !important; /* orientation=rt */ -} - .UIDashboard .UIDashboardEditForm { background: white; padding: 10px; @@ -89,11 +75,11 @@ margin: 4px 0px 0px 2px;/* orientation=rt */ } -.UITabPaneDashboard .NormalTab { +.UITabPaneDashboard .NormalTab { background-color:#E6E6E6; } -.UITabPaneDashboard .SelectedTab { +.UITabPaneDashboard .SelectedTab { background-color:#fff; } @@ -107,13 +93,13 @@ } -.UITabPaneDashboard .UITab .Tablabel ,.UITabPaneDashboard span { +.UITabPaneDashboard .UITab .Tablabel, .UITabPaneDashboard span { font-weight:normal; line-height: 14px; } -.UITabPaneDashboard .UITab .CloseIcon { +.UITabPaneDashboard .UITab .CloseIcon { background: url('background/IconClose.gif') no-repeat center top; width: 14px; height: 13px; @@ -124,11 +110,11 @@ vertical-align: middle; } -.UITabPaneDashboard .SelectedTab .CloseIcon { +.UITabPaneDashboard .SelectedTab .CloseIcon { margin:0; } -.UITabPaneDashboard .AddDashboard { +.UITabPaneDashboard .AddDashboard { background: url('background/AddDashboard.gif') no-repeat center center; width: 34px; height: 32px; @@ -167,9 +153,6 @@ width: 20px; } -.UIDashboardSelectContainer .DashboardItemContainer { -} - .UIDashboardSelectContainer .DashboardItemContainer .InputContainer { padding: 4px 0px 4px 10px; _padding: 0px 10px; @@ -241,10 +224,6 @@ border: 1px solid #b8babf; } -.UIDashboardSelectContainer .GadgetCategory .GadgetTab .RightCategoryTitleBar { - -} - .UIDashboardSelectContainer .GadgetCategory .GadgetTab .MiddleCategoryTitleBar { height: 23px; padding: 0px 8px; @@ -297,60 +276,6 @@ padding: 5px; color: #111; } -.UIDashboard .UIGadget { - padding: 5px 0px; -} - -.UIDashboard .UIGadget .GadgetControl { - float: none; - padding: 0px; - height: auto; width: auto; -} - -.UIDashboard .UIGadget .GadgetControl .LeftControlBar { - background: none; - padding: 0px; -} - -.UIDashboard .UIGadget .GadgetControl .RightControlBar { - background: none; - padding: 0px; -} - -.UIDashboard .UIGadget .GadgetControl .CenterControlBar { - background: url('background/BgTitleGadget.gif') repeat-x left top; - height: 23px; - line-height: 23px; - padding: 0 9px; - border: 1px solid #dbdbdb; - border-top: none; - cursor: move; -} - -.UIDashboard .UIGadget .GadgetControl .GadgetDragHandleArea { - display: none; -} - -.UIDashboard .UIGadget .TLGadget { - display: none; -} - -.UIDashboard .UIGadget .MLGadget { - background: #f2f2f3; - border: 1px solid #c3c3c3; - border-top: none; - padding: 3px; -} - -.UIDashboard .UIGadget .MRGadget { - background: white; - padding: 0 0 1px; -} - -.UIDashboard .UIGadget .BLGadget { - display: none; -} - /*------------------UIDashboardContainer----------------*/ .UIDashboardContainer { @@ -361,8 +286,8 @@ .UIDashboardContainer .GadgetContainer { overflow: auto; height: 100%; - min-height: 400px; - _height: 400px; + min-height: 400px; + _height: 400px; } .UIDashboardContainer .GadgetContainer .ContainerControlBarL { @@ -393,19 +318,13 @@ text-decoration: none; } -.GadgetContainer .UIColumns { -} - -.GadgetContainer .UIColumn { +.UIDashboardContainer .GadgetContainer .UIColumn { float: left; /* orientation=lt */ float: right; /* orientation=rt */ width: 325px; padding: 2px; } -.UIDashboardContainer .UIGadget { - width: 320px; -} .UIDashboardContainer .UIGadget .GadgetMenuBar{ text-align: left; /* orientation=lt */ text-align: right; /* orientation=rt */ @@ -509,6 +428,7 @@ #UIAddGadgetPopup .PopupTitle { margin-left: 22px; } + /*----------------------Maximized-------------------*/ .Maximized .UIGadget { @@ -516,59 +436,7 @@ margin: 0px; } -.Maximized .UIGadget .GadgetControl { - float: none; - padding: 0px; - height: auto; width: auto; -} - -.Maximized .UIGadget .GadgetControl .LeftControlBar { - background: none; - padding: 0px; -} - -.Maximized .UIGadget .GadgetControl .RightControlBar { - background: none; - padding: 0px; -} - -.Maximized .UIGadget .GadgetControl .CenterControlBar { - background: url('background/BgTitleGadget.gif') repeat-x left top; - height: 23px; - line-height: 23px; - padding: 0 9px; - border: 1px solid #dbdbdb; - border-top: none; -} - -.Maximized .UIGadget .GadgetControl .GadgetDragHandleArea { - display: none; -} - -.Maximized .UIGadget .TLGadget { - display: none; -} - -.Maximized .UIGadget .MLGadget { - background: #f2f2f3; - border: 1px solid #c3c3c3; - border-top: none; - padding: 3px; -} - -.Maximized .UIGadget .MRGadget { - background: white; - padding: 0 0 1px; -} - -.Maximized .UIGadget .BLGadget { - display: none; -} - .Maximized .GadgetTitle { - float: left; /* orientation=lt */ - float: right; /* orientation=rt */ - padding: 0px 5px; color: #5b5b5b; font-weight: bold; cursor: move; Modified: portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIGadget/Stylesheet.css =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIGadget/Stylesheet.css 2011-09-05 12:46:25 UTC (rev 7303) +++ portal/branches/dom/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UIGadget/Stylesheet.css 2011-09-05 12:49:25 UTC (rev 7304) @@ -36,38 +36,30 @@ } .UIGadget .GadgetControl { - float: right; /* orientation=lt */ - float: left; /* orientation=rt */ - width: 100px; height: 20px; - padding-right: 6px; /* orientation=lt */ - padding-left: 6px; /* orientation=rt */ + background: url('/eXoResources/skin/DefaultSkin/portal/webui/component/view/UIDashboard/background/BgTitleGadget.gif') repeat-x left top; + height: 23px; + line-height: 23px; + padding: 0 9px; + border: 1px solid #dbdbdb; + border-top: none; + cursor: move; + text-align: left; } -.UIGadget .GadgetControl .LeftControlBar { - background: url('background/Gadget.png') no-repeat left top; /* orientation=lt */ - background: url('background/Gadget-rt.png') no-repeat right top; /* orientation=rt */ - padding-left: 23px; /* orientation=lt */ - padding-right: 23px; /* orientation=rt */ +.UIGadget .GadgetTitle { + padding: 0px 5px; + color: #5b5b5b; + font-weight: normal; + cursor: move; + overflow: hidden; + white-space: nowrap; + width: auto; + margin-right: 75px !important; /* orientation=lt */ + margin: 0px 0px 0px 75px !important; /* orientation=rt */ } -.UIGadget .GadgetControl .RightControlBar{ - background: url('background/Gadget.png') no-repeat right top; /* orientation=lt */ - background: url('background/Gadget-rt.png') no-repeat left top; /* orientation=rt */ - padding-right: 4px; /* orientation=lt */ - padding-left: 4px; /* orientation=rt */ -} - -.UIGadget .GadgetControl .CenterControlBar { - height: 19px; - background: url('background/Gadget.png') repeat-x center -19px; -} - .UIGadget .GadgetControl .GadgetDragHandleArea { - float: right; /* orientation=lt */ - float: left; /* orientation=rt */ - width: 13px; height: 13px; cursor: move; - margin: 3px 3px 0px 3px; background: url('background/Gadget.png') left -78px; } @@ -102,50 +94,13 @@ background-position: 65px top; } -.UIGadget .TLGadget { - background: url('background/Gadget.png') no-repeat left -38px; - padding-left: 8px; +.UIGadget .GadgetApplication { + background: #f2f2f3; + border: 1px solid #c3c3c3; + border-top: none; + padding: 3px; } -.UIGadget .TRGadget { - background: url('background/Gadget.png') no-repeat right -38px; - padding-right: 8px; -} - -.UIGadget .TCGadget { - background: url('background/Gadget.png') repeat-x center -43px; - height: 5px; -} - -.UIGadget .MLGadget { - background: url('background/MiddleGadget.png') repeat-y left; - padding-left: 6px; -} - -.UIGadget .MRGadget { - background: url('background/MiddleGadget.png') repeat-y right; - padding-right: 6px; -} - -.UIGadget .MCGadget { - background: white; -} - -.UIGadget .BLGadget { - background: url('background/Gadget.png') no-repeat left -58px; - padding-left: 9px; -} - -.UIGadget .BRGadget { - background: url('background/Gadget.png') no-repeat right -68px; - padding-right: 9px; -} - -.UIGadget .BCGadget { - background: url('background/Gadget.png') repeat-x center -48px; - height: 10px; -} - .UIGadget iframe { width: 299px; } Modified: portal/branches/dom/web/portal/src/main/webapp/groovy/portal/webui/application/UIGadget.gtmpl =================================================================== --- portal/branches/dom/web/portal/src/main/webapp/groovy/portal/webui/application/UIGadget.gtmpl 2011-09-05 12:46:25 UTC (rev 7303) +++ portal/branches/dom/web/portal/src/main/webapp/groovy/portal/webui/application/UIGadget.gtmpl 2011-09-05 12:49:25 UTC (rev 7304) @@ -35,47 +35,24 @@ String unmaxiTitle = _ctx.appRes("UIGadget.tooltip.Unmaximize"); %> <div class="UIGadget" id="$id" style="left: $posX; top: $posY; z-Index: $zIndex; width: 100%" > - <div class="GadgetControl" style="visibility: visible;"> - <div class="LeftControlBar"> - <div class="RightControlBar"> - <div class="CenterControlBar ClearFix"> - <div class="CloseGadget IconControl" onclick="eXo.gadget.UIGadget.deleteGadget(this)" onmousedown="event.cancelBubble=true;" title="<%=_ctx.appRes("UIGadget.tooltip.deleteGadget")%>"><span></span></div> - <div class="<%=view.equals(uicomponent.HOME_VIEW) ? "MaximizeGadget" : "RestoreGadget";%> IconControl" - onclick="eXo.gadget.UIGadget.maximizeGadget(this)" onmousedown="event.cancelBubble=true;" - title="<%=view.equals(uicomponent.HOME_VIEW) ? maxiTitle : unmaxiTitle%>"><span></span></div> - <div class="<%=isMini ? "RestoreGadget": "MinimizeGadget";%> MinimizeAction IconControl" - onclick="eXo.gadget.UIGadget.minimizeGadget(this)" onmousedown="event.cancelBubble=true;" style="display:none;" - title="<%=isMini ? unminiTitle : miniTitle%>" miniTitle="$miniTitle" unminiTitle="$unminiTitle"><span></span></div> - <% if(uicomponent.isSettingUserPref()) { %> - <div class="EditGadget IconControl" onclick="eXo.gadget.UIGadget.editGadget('$id')" onmousedown="event.cancelBubble=true;" title="<%=_ctx.appRes("UIGadget.tooltip.editGadget")%>"><span></span></div> - <% } %> - <div class="GadgetDragHandleArea"><span></span></div> - <div class="GadgetTitle" style="display: <%=isLossData ? "block" : "none"; %> ; float: none; width: auto; margin-right: 75px"><%= uicomponent.getApplicationName() %></div> - </div> - </div> - </div> + <div class="GadgetControl ClearFix" style="visibility: visible;"> + <span class="CloseGadget IconControl" onclick="eXo.gadget.UIGadget.deleteGadget(this)" onmousedown="event.cancelBubble=true;" title="<%=_ctx.appRes("UIGadget.tooltip.deleteGadget")%>"></span> + <span class="<%=view.equals(uicomponent.HOME_VIEW) ? "MaximizeGadget" : "RestoreGadget";%> IconControl" + onclick="eXo.gadget.UIGadget.maximizeGadget(this)" onmousedown="event.cancelBubble=true;" + title="<%=view.equals(uicomponent.HOME_VIEW) ? maxiTitle : unmaxiTitle%>"></span> + <span class="<%=isMini ? "RestoreGadget": "MinimizeGadget";%> MinimizeAction IconControl" + onclick="eXo.gadget.UIGadget.minimizeGadget(this)" onmousedown="event.cancelBubble=true;" style="display:none;" + title="<%=isMini ? unminiTitle : miniTitle%>" miniTitle="$miniTitle" unminiTitle="$unminiTitle"></span> + <% if(uicomponent.isSettingUserPref()) { %> + <span class="EditGadget IconControl" onclick="eXo.gadget.UIGadget.editGadget('$id')" onmousedown="event.cancelBubble=true;" title="<%=_ctx.appRes("UIGadget.tooltip.editGadget")%>"></span> + <% } %> + <span class="GadgetDragHandleArea" style="display: none;"></span> + <span class="GadgetTitle" style="display: <%=isLossData ? "block" : "none"; %> ; float: none; width: auto; margin-right: 75px"><%= uicomponent.getApplicationName() %></span> </div> - <div class="ClearBoth"><span></span></div> - <div class="GadgetApplication" style="display:<%= Boolean.parseBoolean(uicomponent.getProperties().get("minimized")) ? "none": "block"; %>"> - <div class="TLGadget"> - <div class="TRGadget"> - <div class="TCGadget"><span></span></div> - </div> - </div> - <div class="MLGadget"> - <div class="MRGadget"> + <div class="GadgetApplication" id="content-$id" style="display:<%= Boolean.parseBoolean(uicomponent.getProperties().get("minimized")) ? "none": "block"; %>"> <% if(isLossData) {%> - <div id="content-$id" class="MCGadget"><%=_ctx.appRes("UIGadget.message.isLossData")%></div> - <% } else {%> - <div id="content-$id" class="MCGadget"></div> - <% } %> - </div> - </div> - <div class="BLGadget"> - <div class="BRGadget"> - <div class="BCGadget"><span></span></div> - </div> - </div> + <%=_ctx.appRes("UIGadget.message.isLossData")%> + <% } %> </div> <div class="UIMask" style="display: none; border:solid 1px red"><span></span></div> -</div> \ No newline at end of file +</div>