Author: ndkhoiits Date: 2011-02-25 05:47:08 -0500 (Fri, 25 Feb 2011) New Revision: 5945 Added: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/background/ portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/background/AddTab.gif Modified: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/Stylesheet.css portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UIPopup/UIPopupCategory/Stylesheet.css portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UITabSystem/UITabs/Stylesheet.css portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_en.properties portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_vi.properties portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/groovy/portal/webui/container/UITabContainer.gtmpl portal/branches/branch-GTNPORTAL-1822/webui/portal/src/main/java/org/exoplatform/portal/webui/container/UITabContainer.java Log: GTNPORTAL-1417 Support to newly add tab at run-time for the Tab Layout Container Modified: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/Stylesheet.css =================================================================== --- portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/Stylesheet.css 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/Stylesheet.css 2011-02-25 10:47:08 UTC (rev 5945) @@ -1,22 +1,22 @@ -/** - * Copyright (C) 2009 eXo Platform SAS. - * - * This is free software; you can redistribute it and/or modify it - * under the terms of the GNU Lesser General Public License as - * published by the Free Software Foundation; either version 2.1 of - * the License, or (at your option) any later version. - * - * This software is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public - * License along with this software; if not, write to the Free - * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA - * 02110-1301 USA, or see the FSF site: http://www.fsf.org. - */ - +/** + * Copyright (C) 2009 eXo Platform SAS. + * + * This is free software; you can redistribute it and/or modify it + * under the terms of the GNU Lesser General Public License as + * published by the Free Software Foundation; either version 2.1 of + * the License, or (at your option) any later version. + * + * This software is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this software; if not, write to the Free + * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA + * 02110-1301 USA, or see the FSF site: http://www.fsf.org. + */ + .UITabContainer { padding: 7px; } @@ -47,6 +47,14 @@ height: 24px; } +.UITabContainer .UIHorizontalTabs .AddTab { + height: 24px; + width: 23px; + background: url("background/AddTab.gif") no-repeat left top; + float: left; + cursor: pointer; +} + .UITabContainer .SelectedTab .EditIcon { width: 16px; height: 24px; background: url('/eXoResources/skin/DefaultSkin/skinIcons/16x16/icons/SelectedEditTab.gif') no-repeat center; /* orientation=lt */ Added: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/background/AddTab.gif =================================================================== (Binary files differ) Property changes on: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/portal/webui/component/view/UITabContainer/background/AddTab.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Modified: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UIPopup/UIPopupCategory/Stylesheet.css =================================================================== --- portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UIPopup/UIPopupCategory/Stylesheet.css 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UIPopup/UIPopupCategory/Stylesheet.css 2011-02-25 10:47:08 UTC (rev 5945) @@ -109,7 +109,9 @@ background: #efefef; border-bottom: 1px #cdcdcd solid; cursor: pointer; - display: block; + display: block; + text-align: left; + width: auto; } .UIPopupCategory .CategoryItem:hover { Modified: portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UITabSystem/UITabs/Stylesheet.css =================================================================== --- portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UITabSystem/UITabs/Stylesheet.css 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/web/eXoResources/src/main/webapp/skin/DefaultSkin/webui/component/UITabSystem/UITabs/Stylesheet.css 2011-02-25 10:47:08 UTC (rev 5945) @@ -21,7 +21,7 @@ } .UIHorizontalTabs .CenterHorizontalTabs { - overflow-y: hidden; + /*overflow-y: hidden;*/ background: url('background/NormalTabStyle.gif') repeat-x center top; padding: 0px 6px; } Modified: portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_en.properties =================================================================== --- portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_en.properties 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_en.properties 2011-02-25 10:47:08 UTC (rev 5945) @@ -998,6 +998,13 @@ UITableColumnContainer.tooltip.editContainer=Edit Table ############################################################################ + # org.exoplatform.portal.webui.container.UITableColumnContainer# + ############################################################################ + +UITabContainer.label.moveLeft=Move Left +UITabContainer.label.moveRight=Move Right + + ############################################################################ # org.exoplatform.portal.component.view.UIPage # ############################################################################ Modified: portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_vi.properties =================================================================== --- portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_vi.properties 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/WEB-INF/classes/locale/portal/webui_vi.properties 2011-02-25 10:47:08 UTC (rev 5945) @@ -954,6 +954,13 @@ UITableColumnContainer.tooltip.editContainer=Sửa thuộc tính của bảng ############################################################################ + # org.exoplatform.portal.webui.container.UITableColumnContainer# + ############################################################################ + +UITabContainer.label.moveLeft=Chuyển sang trái +UITabContainer.label.moveRight=Chuyển sang phải + + ############################################################################ # org.exoplatform.portal.component.view.UIPage # ############################################################################ Modified: portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/groovy/portal/webui/container/UITabContainer.gtmpl =================================================================== --- portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/groovy/portal/webui/container/UITabContainer.gtmpl 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/web/portal/src/main/webapp/groovy/portal/webui/container/UITabContainer.gtmpl 2011-02-25 10:47:08 UTC (rev 5945) @@ -49,9 +49,13 @@ if(uiChild.isRendered()) status = "SelectedTab"; String title = uiChild.getTitle(); String tabId = uiChild.getId(); - if(title == null || title.trim().length() < 1 ) title = _ctx.appRes("UITabContainer.tab") +String.valueOf(counter); + if(title == null || title.trim().length() < 1 ) { + title = _ctx.appRes("UITabContainer.tab") + String.valueOf(counter); + uiChild.setTitle(title); + } else title = ExpressionUtil.getExpressionValue(res, title); String selectTab = uicomponent.event("SelectTab", tabId); + String tabState = uicomponent.getTabState(uiChild, uicomponent); %> <div class="UITab NormalTabStyle"> <div class="<%=status%>"> @@ -60,10 +64,46 @@ <% if(uiChild.isShowEditControl()){ String actionLink = uicomponent.event("EditContainer", "$uiChild.id") - "javascript:"; + String showCategory = "eXo.webui.UIPopupSelectCategory.show(this, event);" + String moveLeftAction = uicomponent.event("MoveLeft", tabId); + String moveRightAction = uicomponent.event("MoveRight", tabId); %> <div class="MiddleTab ClearFix"> <div class="TabLabel FloatLeft" onclick="eXo.webui.UIHorizontalTabs.changeTabForUITabPane(this,'$id', '$tabId' );<%= selectTab %>"><%=title%></div> - <div class="EditIcon" onclick="<%=actionLink%>"></div> + <div class="EditIcon" onclick="$showCategory"> + <div style="position: relative; width: 100%"> + <div class="UIPopupCategory" style="display: none;"> + <div class="PopupCategoryDecorator"> + <div class="PopupCategoryTL"> + <div class="PopupCategoryTR"> + <div class="PopupCategoryTC"><span></span></div> + </div> + </div> + <div class="PopupCategoryML"> + <div class="PopupCategoryMR"> + <div class="PopupCategoryMC"> + <% if (!tabState.equals(org.exoplatform.portal.webui.container.UITabContainer.FIRST_TAB)) {%> + <a class="CategoryItem"> + <div class="CategoryItemLabel" onclick="$moveLeftAction"><%= _ctx.appRes("UITabContainer.label.moveLeft") %></div> + </a> + <% } %> + <% if (!tabState.equals(org.exoplatform.portal.webui.container.UITabContainer.LAST_TAB)) { %> + <a class="CategoryItem"> + <div class="CategoryItemLabel" onclick="$moveRightAction"><%= _ctx.appRes("UITabContainer.label.moveRight") %></div> + </a> + <% } %> + </div> + </div> + </div> + <div class="PopupCategoryBL"> + <div class="PopupCategoryBR"> + <div class="PopupCategoryBC"><span></span></div> + </div> + </div> + </div> + </div> + </div> + </div> <%} else {%> <div class="MiddleTab"> <a class="TabLabel" onclick="eXo.webui.UIHorizontalTabs.changeTabForUITabPane(this,'$id', '$tabId' );<%= selectTab %>"><%=title%></a> @@ -76,13 +116,21 @@ <% counter++; } - %> + %> + <% String addTabLink = uicomponent.event("AddTab"); + if (uicomponent.isShowEditControl()) { + %> + <div class="AddTab" onclick="$addTabLink"> + <span></span> + </div> + <% } %> </div> + </div> + </div> </div> </div> - <div class="HorizontalLayout TabContent"> <% String style = ""; Modified: portal/branches/branch-GTNPORTAL-1822/webui/portal/src/main/java/org/exoplatform/portal/webui/container/UITabContainer.java =================================================================== --- portal/branches/branch-GTNPORTAL-1822/webui/portal/src/main/java/org/exoplatform/portal/webui/container/UITabContainer.java 2011-02-25 09:49:42 UTC (rev 5944) +++ portal/branches/branch-GTNPORTAL-1822/webui/portal/src/main/java/org/exoplatform/portal/webui/container/UITabContainer.java 2011-02-25 10:47:08 UTC (rev 5945) @@ -19,6 +19,7 @@ package org.exoplatform.portal.webui.container; +import org.exoplatform.portal.application.PortalRequestContext; import org.exoplatform.portal.webui.container.UIContainerActionListener.EditContainerActionListener; import org.exoplatform.portal.webui.portal.UIPortalComponentActionListener.DeleteComponentActionListener; import org.exoplatform.webui.config.annotation.ComponentConfig; @@ -27,6 +28,7 @@ import org.exoplatform.webui.event.Event; import org.exoplatform.webui.event.EventListener; +import java.util.Collections; import java.util.List; /** @@ -35,16 +37,59 @@ @ComponentConfig(template = "system:/groovy/portal/webui/container/UITabContainer.gtmpl", events = { @EventConfig(listeners = EditContainerActionListener.class), @EventConfig(listeners = DeleteComponentActionListener.class, confirm = "UIContainer.deleteContainer"), - @EventConfig(listeners = UITabContainer.SelectTabActionListener.class)}) + @EventConfig(listeners = UITabContainer.SelectTabActionListener.class), + @EventConfig(listeners = UITabContainer.MoveLeftActionListener.class), + @EventConfig(listeners = UITabContainer.MoveRightActionListener.class), + @EventConfig(listeners = UITabContainer.AddTabActionListener.class)}) public class UITabContainer extends UIContainer { + public static final String TAB_CONTAINER = "TabContainer"; + public static final String FIRST_TAB = "FirstTab"; + public static final String LAST_TAB = "LastTab"; public UITabContainer() { super(); } + private void moveTab(UITabContainer container, String childId, boolean isToLeft) + { + UIComponent selectedChild = container.getChildById(childId); + List<UIComponent> children = container.getChildren(); + int selectedIndex = children.indexOf(selectedChild); + if (isToLeft) + { + if (selectedIndex > 0) + { + Collections.swap(children, selectedIndex, selectedIndex - 1); + } + } + else + { + if (selectedIndex < children.size() - 1) + { + Collections.swap(children, selectedIndex, selectedIndex + 1); + } + } + } + + public String getTabState(UIComponent uiChild, UITabContainer uiContainer) + { + String tabState = ""; + List<UIComponent> children = uiContainer.getChildren(); + int tabIndex = children.indexOf(uiChild); + if (tabIndex == 0) + { + tabState = FIRST_TAB; + } + else if (tabIndex == children.size() - 1) + { + tabState = LAST_TAB; + } + return tabState; + } + static public class SelectTabActionListener extends EventListener<UITabContainer> { public void execute(Event<UITabContainer> event) throws Exception @@ -69,4 +114,67 @@ } } } + + public static class MoveLeftActionListener extends EventListener<UITabContainer> + { + @Override + public void execute(Event<UITabContainer> event) throws Exception + { + UITabContainer container = event.getSource(); + String objectId = event.getRequestContext().getRequestParameter(OBJECTID); + if (container == null || objectId == null) + { + return; + } + container.moveTab(container, objectId, true); + event.getRequestContext().addUIComponentToUpdateByAjax(container); + } + } + + public static class MoveRightActionListener extends EventListener<UITabContainer> + { + @Override + public void execute(Event<UITabContainer> event) throws Exception + { + UITabContainer container = event.getSource(); + String objectId = event.getRequestContext().getRequestParameter(OBJECTID); + if (container == null || objectId == null) + { + return; + } + container.moveTab(container, objectId, false); + event.getRequestContext().addUIComponentToUpdateByAjax(container); + } + + } + + public static class AddTabActionListener extends EventListener<UITabContainer> + { + @Override + public void execute(Event<UITabContainer> event) throws Exception + { + UITabContainer container = event.getSource(); + PortalRequestContext pcontext = (PortalRequestContext)event.getRequestContext(); + if (container == null) + { + return; + } + List<UIComponent> children = container.getChildren(); + for (UIComponent child : children) + { + if (child.isRendered() && child instanceof UIContainer) + { + UIContainer newTabContainer = container.addChild(UIContainer.class, null, null); + newTabContainer.setTemplate(child.getTemplate()); + child.setRendered(false); + newTabContainer.setRendered(true); + newTabContainer.setId(String.valueOf(newTabContainer.hashCode())); + newTabContainer.setShowEditControl(true); + pcontext.addUIComponentToUpdateByAjax(container); + return; + } + } + } + + } }