From 9d8eee31e9ff1ac5ba9f7001ca1bccfa09c995f4 Mon Sep 17 00:00:00 2001 From: Christos Stathis Date: Tue, 18 Oct 2011 11:02:35 +0300 Subject: [PATCH] Various CSS changes --- .../src/gr/grnet/pithos/web/client/Pithos.java | 102 ++++++++++++-------- .../gr/grnet/pithos/web/client/PithosCellTable.css | 8 +- .../pithos/web/client/PithosCellTreeBasic.css | 7 +- .../gr/grnet/pithos/web/client/StatusPanel.java | 2 +- .../src/gr/grnet/pithos/web/client/TopPanel.java | 1 + .../web/client/foldertree/FolderTreeView.java | 7 +- .../web/client/foldertree/FolderTreeViewModel.java | 3 +- .../web/client/grouptree/GroupTreeViewModel.java | 6 +- .../client/mysharedtree/MysharedTreeViewModel.java | 4 +- .../othersharedtree/OtherSharedTreeViewModel.java | 6 +- .../src/gr/grnet/pithos/web/public/pithos.css | 46 +++++++-- 11 files changed, 126 insertions(+), 66 deletions(-) diff --git a/web_client/src/gr/grnet/pithos/web/client/Pithos.java b/web_client/src/gr/grnet/pithos/web/client/Pithos.java index 9bfde32..75bda35 100644 --- a/web_client/src/gr/grnet/pithos/web/client/Pithos.java +++ b/web_client/src/gr/grnet/pithos/web/client/Pithos.java @@ -268,27 +268,50 @@ public class Pithos implements EntryPoint, ResizeHandler { } private void initialize() { - VerticalPanel outer = new VerticalPanel(); + boolean bareContent = Window.Location.getParameter("noframe") != null; + String contentWidth = bareContent ? "100%" : "75%"; + + VerticalPanel outer = new VerticalPanel(); outer.setWidth("100%"); + if (!bareContent) { + outer.addStyleName("pithos-outer"); + } - topPanel = new TopPanel(this, Pithos.images); - topPanel.setWidth("100%"); - outer.add(topPanel); - outer.setCellHorizontalAlignment(topPanel, HasHorizontalAlignment.ALIGN_CENTER); + if (!bareContent) { + topPanel = new TopPanel(this, Pithos.images); + topPanel.setWidth("100%"); + outer.add(topPanel); + outer.setCellHorizontalAlignment(topPanel, HasHorizontalAlignment.ALIGN_CENTER); + } - messagePanel.setWidth("75%"); + messagePanel.setWidth(contentWidth); messagePanel.setVisible(false); outer.add(messagePanel); outer.setCellHorizontalAlignment(messagePanel, HasHorizontalAlignment.ALIGN_CENTER); - - // Inner contains the various lists. - inner.sinkEvents(Event.ONCONTEXTMENU); - inner.setWidth("100%"); - - HorizontalPanel rightside = new HorizontalPanel(); - rightside.addStyleName("pithos-rightSide"); - rightside.setSpacing(5); + HorizontalPanel header = new HorizontalPanel(); + header.addStyleName("pithos-header"); + HorizontalPanel leftHeader = new HorizontalPanel(); + VerticalPanel uploadButtonPanel = new VerticalPanel(); + upload = new Button("Upload File", new ClickHandler() { + @Override + public void onClick(@SuppressWarnings("unused") ClickEvent event) { + new UploadFileCommand(Pithos.this, null, getSelection()).execute(); + } + }); + upload.addStyleName("pithos-uploadButton"); + uploadButtonPanel.add(upload); + uploadButtonPanel.setWidth("100%"); + uploadButtonPanel.setHeight("60px"); + uploadButtonPanel.setCellHorizontalAlignment(upload, HasHorizontalAlignment.ALIGN_LEFT); + uploadButtonPanel.setCellVerticalAlignment(upload, HasVerticalAlignment.ALIGN_MIDDLE); + leftHeader.add(uploadButtonPanel); + header.add(leftHeader); + header.setCellWidth(leftHeader, "35%"); + + HorizontalPanel rightHeader = new HorizontalPanel(); + rightHeader.addStyleName("pithos-rightSide"); + rightHeader.setSpacing(5); toolsButton = new Button(AbstractImagePrototype.create(images.tools()).getHTML()); toolsButton.addClickHandler(new ClickHandler() { @@ -302,21 +325,27 @@ public class Pithos implements EntryPoint, ResizeHandler { } } }); - rightside.add(toolsButton); - rightside.setCellHorizontalAlignment(toolsButton, HasHorizontalAlignment.ALIGN_LEFT); + rightHeader.add(toolsButton); + rightHeader.setCellHorizontalAlignment(toolsButton, HasHorizontalAlignment.ALIGN_LEFT); HorizontalPanel folderStatistics = new HorizontalPanel(); folderStatistics.addStyleName("pithos-folderStatistics"); numOfFiles = new HTML(); folderStatistics.add(numOfFiles); + folderStatistics.setCellVerticalAlignment(numOfFiles, HasVerticalAlignment.ALIGN_MIDDLE); HTML numOfFilesLabel = new HTML(" Files"); folderStatistics.add(numOfFilesLabel); - rightside.add(folderStatistics); - rightside.setCellHorizontalAlignment(folderStatistics, HasHorizontalAlignment.ALIGN_RIGHT); - - inner.add(rightside); - inner.setCellVerticalAlignment(rightside, HasVerticalAlignment.ALIGN_MIDDLE); - inner.setCellHeight(rightside, "60px"); + folderStatistics.setCellVerticalAlignment(numOfFilesLabel, HasVerticalAlignment.ALIGN_MIDDLE); + rightHeader.add(folderStatistics); + rightHeader.setCellHorizontalAlignment(folderStatistics, HasHorizontalAlignment.ALIGN_RIGHT); + header.add(rightHeader); + header.setCellVerticalAlignment(rightHeader, HasVerticalAlignment.ALIGN_MIDDLE); + header.setCellHeight(rightHeader, "60px"); + outer.add(header); + outer.setCellHorizontalAlignment(header, HasHorizontalAlignment.ALIGN_CENTER); + // Inner contains the various lists.nner + inner.sinkEvents(Event.ONCONTEXTMENU); + inner.setWidth("100%"); folderTreeSelectionModel = new SingleSelectionModel(); folderTreeSelectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() { @@ -344,26 +373,13 @@ public class Pithos implements EntryPoint, ResizeHandler { trees = new VerticalPanel(); trees.setWidth("100%"); - VerticalPanel uploadButtonPanel = new VerticalPanel(); - upload = new Button("Upload File", new ClickHandler() { - @Override - public void onClick(@SuppressWarnings("unused") ClickEvent event) { - new UploadFileCommand(Pithos.this, null, getSelection()).execute(); - } - }); - uploadButtonPanel.add(upload); - uploadButtonPanel.setWidth("100%"); - uploadButtonPanel.setHeight("60px"); - uploadButtonPanel.setCellHorizontalAlignment(upload, HasHorizontalAlignment.ALIGN_CENTER); - uploadButtonPanel.setCellVerticalAlignment(upload, HasVerticalAlignment.ALIGN_MIDDLE); - upload.addStyleName("pithos-uploadButton"); - trees.add(uploadButtonPanel); HorizontalPanel treeHeader = new HorizontalPanel(); treeHeader.addStyleName("pithos-treeHeader"); - treeHeader.setWidth("100%"); treeHeader.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); + treeHeader.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE); HorizontalPanel statistics = new HorizontalPanel(); + statistics.addStyleName("pithos-statistics"); statistics.add(new HTML("Total Objects: ")); totalFiles = new HTML(); statistics.add(totalFiles); @@ -389,14 +405,16 @@ public class Pithos implements EntryPoint, ResizeHandler { splitPanel.setSplitPosition("35%"); splitPanel.setSize("100%", "100%"); splitPanel.addStyleName("pithos-splitPanel"); - splitPanel.setWidth("75%"); + splitPanel.setWidth(contentWidth); outer.add(splitPanel); outer.setCellHorizontalAlignment(splitPanel, HasHorizontalAlignment.ALIGN_CENTER); - statusPanel = new StatusPanel(); - statusPanel.setWidth("100%"); - outer.add(statusPanel); - outer.setCellHorizontalAlignment(statusPanel, HasHorizontalAlignment.ALIGN_CENTER); + if (!bareContent) { + statusPanel = new StatusPanel(); + statusPanel.setWidth("100%"); + outer.add(statusPanel); + outer.setCellHorizontalAlignment(statusPanel, HasHorizontalAlignment.ALIGN_CENTER); + } // Hook the window resize event, so that we can adjust the UI. Window.addResizeHandler(this); diff --git a/web_client/src/gr/grnet/pithos/web/client/PithosCellTable.css b/web_client/src/gr/grnet/pithos/web/client/PithosCellTable.css index fdfa014..fb94c32 100644 --- a/web_client/src/gr/grnet/pithos/web/client/PithosCellTable.css +++ b/web_client/src/gr/grnet/pithos/web/client/PithosCellTable.css @@ -20,9 +20,13 @@ .cellTableHeader { border:none; - font-weight: bold; cursor: pointer; color: white; + background-color: #74aec9; + height: 25px; + text-shadow: none; + font-size: small; + font-weight: normal; } .cellTableCell { @@ -32,6 +36,7 @@ .cellTableFirstColumn { padding: 0px; + padding-left: 5px; } .cellTableLastColumn { @@ -78,4 +83,5 @@ .cellTableHoveredRow { background: none; + background-color: #A1C8DB; } \ No newline at end of file diff --git a/web_client/src/gr/grnet/pithos/web/client/PithosCellTreeBasic.css b/web_client/src/gr/grnet/pithos/web/client/PithosCellTreeBasic.css index 8114a9e..aa1d89f 100644 --- a/web_client/src/gr/grnet/pithos/web/client/PithosCellTreeBasic.css +++ b/web_client/src/gr/grnet/pithos/web/client/PithosCellTreeBasic.css @@ -14,7 +14,6 @@ * the License. */ .cellTreeWidget { - } .cellTreeEmptyMessage { @@ -33,7 +32,6 @@ } .cellTreeItemImage { - } .cellTreeItemImageValue { @@ -46,8 +44,11 @@ outline: none; } +.cellTreeItemValue:HOVER { + background-color: #A1C8DB; +} + .cellTreeOpenItem { - } .cellTreeTopItem { diff --git a/web_client/src/gr/grnet/pithos/web/client/StatusPanel.java b/web_client/src/gr/grnet/pithos/web/client/StatusPanel.java index baf7204..e186608 100644 --- a/web_client/src/gr/grnet/pithos/web/client/StatusPanel.java +++ b/web_client/src/gr/grnet/pithos/web/client/StatusPanel.java @@ -58,7 +58,7 @@ public class StatusPanel extends Composite { inner.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); HorizontalPanel firstLine = new HorizontalPanel(); firstLine.setSpacing(8); - firstLine.addStyleName("pithos-statusbar"); +// firstLine.addStyleName("pithos-statusbar"); firstLine.add(new Anchor("About")); firstLine.add(new HTML("|")); firstLine.add(new Anchor("Help")); diff --git a/web_client/src/gr/grnet/pithos/web/client/TopPanel.java b/web_client/src/gr/grnet/pithos/web/client/TopPanel.java index efc110e..47ecb1a 100644 --- a/web_client/src/gr/grnet/pithos/web/client/TopPanel.java +++ b/web_client/src/gr/grnet/pithos/web/client/TopPanel.java @@ -92,6 +92,7 @@ public class TopPanel extends Composite { inner.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM); HTML logos = new HTML("
" + AbstractImagePrototype.create(images.pithosLogo()).getHTML() + "
"); + logos.addStyleName("pithos-logo"); inner.add(logos); MenuBar username = new MenuBar(); diff --git a/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeView.java b/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeView.java index 39706bd..9a6cc61 100644 --- a/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeView.java +++ b/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeView.java @@ -145,9 +145,12 @@ public class FolderTreeView extends Composite implements TreeView { static interface Templates extends SafeHtmlTemplates { public Templates INSTANCE = GWT.create(Templates.class); - @Template("{0}") + @Template("{0}") public SafeHtml nameSpan(String name); - } + + @Template("{0}") + public SafeHtml imageSpan(String name); + } private FolderTreeViewModel model; diff --git a/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeViewModel.java b/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeViewModel.java index 0c6efc2..085b496 100644 --- a/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeViewModel.java +++ b/web_client/src/gr/grnet/pithos/web/client/foldertree/FolderTreeViewModel.java @@ -58,6 +58,7 @@ import com.google.gwt.safehtml.shared.SafeHtml; import com.google.gwt.safehtml.shared.SafeHtmlBuilder; import com.google.gwt.user.client.Command; import com.google.gwt.user.client.ui.AbstractImagePrototype; +import com.google.gwt.user.client.ui.HTML; import com.google.gwt.view.client.AsyncDataProvider; import com.google.gwt.view.client.HasData; import com.google.gwt.view.client.ListDataProvider; @@ -86,7 +87,7 @@ public class FolderTreeViewModel implements TreeViewModel { html = AbstractImagePrototype.create(FolderTreeView.images.folderYellow()).getHTML(); name = Templates.INSTANCE.nameSpan(folder.getName()); } - safeHtmlBuilder.appendHtmlConstant(html); + safeHtmlBuilder.appendHtmlConstant(html).appendHtmlConstant(" "); safeHtmlBuilder.append(name); } diff --git a/web_client/src/gr/grnet/pithos/web/client/grouptree/GroupTreeViewModel.java b/web_client/src/gr/grnet/pithos/web/client/grouptree/GroupTreeViewModel.java index b127c89..bf70121 100644 --- a/web_client/src/gr/grnet/pithos/web/client/grouptree/GroupTreeViewModel.java +++ b/web_client/src/gr/grnet/pithos/web/client/grouptree/GroupTreeViewModel.java @@ -65,7 +65,7 @@ public class GroupTreeViewModel implements TreeViewModel { @Override public void render(@SuppressWarnings("unused") Context context, String value, SafeHtmlBuilder sb) { String html = AbstractImagePrototype.create(GroupTreeView.images.groups()).getHTML(); - sb.appendHtmlConstant(html); + sb.appendHtmlConstant(html).appendHtmlConstant(" "); sb.append(Templates.INSTANCE.nameSpan(value)); } @@ -85,7 +85,7 @@ public class GroupTreeViewModel implements TreeViewModel { @Override public void render(@SuppressWarnings("unused") Context context, Group value, SafeHtmlBuilder sb) { String html = AbstractImagePrototype.create(GroupTreeView.images.group()).getHTML(); - sb.appendHtmlConstant(html); + sb.appendHtmlConstant(html).appendHtmlConstant(" "); sb.append(Templates.INSTANCE.nameSpan(value.getName())); } @@ -105,7 +105,7 @@ public class GroupTreeViewModel implements TreeViewModel { @Override public void render(@SuppressWarnings("unused") Context context, User value, SafeHtmlBuilder sb) { String html = AbstractImagePrototype.create(GroupTreeView.images.user()).getHTML(); - sb.appendHtmlConstant(html); + sb.appendHtmlConstant(html).appendHtmlConstant(" "); sb.append(Templates.INSTANCE.nameSpan(value.getName())); } diff --git a/web_client/src/gr/grnet/pithos/web/client/mysharedtree/MysharedTreeViewModel.java b/web_client/src/gr/grnet/pithos/web/client/mysharedtree/MysharedTreeViewModel.java index a78748c..ca584f9 100644 --- a/web_client/src/gr/grnet/pithos/web/client/mysharedtree/MysharedTreeViewModel.java +++ b/web_client/src/gr/grnet/pithos/web/client/mysharedtree/MysharedTreeViewModel.java @@ -79,7 +79,7 @@ public class MysharedTreeViewModel implements TreeViewModel { @Override public void render(@SuppressWarnings("unused") Context context, Folder folder, SafeHtmlBuilder safeHtmlBuilder) { String html = AbstractImagePrototype.create(MysharedTreeView.images.folderYellow()).getHTML(); - safeHtmlBuilder.appendHtmlConstant(html); + safeHtmlBuilder.appendHtmlConstant(html).appendHtmlConstant(" "); safeHtmlBuilder.append(Templates.INSTANCE.nameSpan(folder.getName())); } @@ -136,7 +136,7 @@ public class MysharedTreeViewModel implements TreeViewModel { @Override public void render(String object, SafeHtmlBuilder builder) { String html = AbstractImagePrototype.create(MysharedTreeView.images.myShared()).getHTML(); - builder.appendHtmlConstant(html); + builder.appendHtmlConstant(html).appendHtmlConstant(" "); builder.append(MysharedTreeView.Templates.INSTANCE.nameSpan(object)); } }), selectionModel2, null); diff --git a/web_client/src/gr/grnet/pithos/web/client/othersharedtree/OtherSharedTreeViewModel.java b/web_client/src/gr/grnet/pithos/web/client/othersharedtree/OtherSharedTreeViewModel.java index e6dd0a2..d71cbe9 100644 --- a/web_client/src/gr/grnet/pithos/web/client/othersharedtree/OtherSharedTreeViewModel.java +++ b/web_client/src/gr/grnet/pithos/web/client/othersharedtree/OtherSharedTreeViewModel.java @@ -81,7 +81,7 @@ public class OtherSharedTreeViewModel implements TreeViewModel { @Override public void render(@SuppressWarnings("unused") Context context, Folder folder, SafeHtmlBuilder safeHtmlBuilder) { String html = AbstractImagePrototype.create(OtherSharedTreeView.images.folderYellow()).getHTML(); - safeHtmlBuilder.appendHtmlConstant(html); + safeHtmlBuilder.appendHtmlConstant(html).appendHtmlConstant(" "); safeHtmlBuilder.append(Templates.INSTANCE.nameSpan(folder.getName())); } @@ -139,7 +139,7 @@ public class OtherSharedTreeViewModel implements TreeViewModel { @Override public void render(String object, SafeHtmlBuilder builder) { String html = AbstractImagePrototype.create(OtherSharedTreeView.images.othersShared()).getHTML(); - builder.appendHtmlConstant(html); + builder.appendHtmlConstant(html).appendHtmlConstant(" "); builder.append(OtherSharedTreeView.Templates.INSTANCE.nameSpan(object)); } }), selectionModel2, null); @@ -176,7 +176,7 @@ public class OtherSharedTreeViewModel implements TreeViewModel { @Override public void render(String object, SafeHtmlBuilder builder) { String html = AbstractImagePrototype.create(OtherSharedTreeView.images.user()).getHTML(); - builder.appendHtmlConstant(html); + builder.appendHtmlConstant(html).appendHtmlConstant(" "); builder.append(OtherSharedTreeView.Templates.INSTANCE.nameSpan(object)); } }), selectionModel3, null); diff --git a/web_client/src/gr/grnet/pithos/web/public/pithos.css b/web_client/src/gr/grnet/pithos/web/public/pithos.css index 6028342..98c7e5b 100644 --- a/web_client/src/gr/grnet/pithos/web/public/pithos.css +++ b/web_client/src/gr/grnet/pithos/web/public/pithos.css @@ -1,8 +1,12 @@ body { color: black; - font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; + font-family: Verdana, 'PT Sans', sans-serif; + font-size: 16px; margin: 8px; margin-top: 3px; +} + +.pithos-outer { background: url(images/background.png) repeat-x; } @@ -154,8 +158,8 @@ table.pithos-permList.props-labels { .pithos-topPanel { background-color: #4085a5; - font-size: 80%; - height: 60px; + font-size: 75%; + height: 59px; border-bottom: 1px solid white; } @@ -260,7 +264,7 @@ table.pithos-permList.props-labels { font-size: 90%; vertical-align: middle; font-weight: normal; - height:145px; + height:119px; color: white; } @@ -269,6 +273,7 @@ table.pithos-permList.props-labels { border-collapse: collapse; /* prevents selecting text in table with shift and ctrl*/ -moz-user-select: none; + margin-left: 10px; } .pithos-errorMessage { @@ -313,10 +318,17 @@ table.pithos-permList.props-labels { .pithos-treeHeader { background-color: #74aec9; + height: 25px; +} + +.pithos-statistics { + color: white; + ; } .pithos-splitPanel { background: url(images/white50.png); + margin-bottom: 34px; } /* Use the background color for the splitter. */ @@ -332,16 +344,22 @@ table.pithos-permList.props-labels { .pithos-uploadButton { background: none; - background-color: #ff6600; - font-size: 120%; + background-color: #ff7f2a; + font-size: 100%; text-align: center; - height: 40px; - width: 300px; + height: 32px; + width: 146px; + border: none; +} + +.pithos-uploadButton:HOVER { + background-color: #f95; } .pithos-rightSide { vertical-align: middle; width: 100%; + padding-left: 7px; } .pithos-parentButton { background: none; @@ -352,6 +370,7 @@ table.pithos-permList.props-labels { background-color: #a1c8da; text-align: center; color: white; + height: 32px; } .pithos-credentialsText { @@ -361,3 +380,14 @@ table.pithos-permList.props-labels { .grnet-sign { color: #72ADC8; } + +.pithos-logo { + position: absolute; + top: 25; +} + +.pithos-header { + width: 75%; + background: url(images/white50.png); + margin-top: 34; +} \ No newline at end of file -- 1.7.10.4