public SafeHtml spanWithIdAndClass(String id, String cssClass, String content);
}
- private String showingStats = "";
-
- private int startIndex = 0;
-
- /**
- * A constant that denotes the completion of an IncrementalCommand.
- */
- public static final boolean DONE = false;
-
private final DateTimeFormat formatter = DateTimeFormat.getFormat("d/M/yyyy h:mm a");
/**
SortableHeader nameHeader;
- GssSimplePager pagerBottom;
-
- GssSimplePager pagerTop;
-
- Button uploadButtonBottom;
-
- Button uploadButtonTop;
-
FolderTreeView treeView;
private Pithos app;
celltable.redrawHeaders();
- Column<File,String> aColumn = new Column<File, String>(new TextCell()) {
- @Override
- public String getValue(File object) {
- return object.getOwner();
- }
- };
- SortableHeader aheader = new SortableHeader("Owner");
- celltable.addColumn(aColumn, aheader);
- allHeaders.add(aheader);
- aheader.setUpdater(new FileValueUpdater(aheader, "owner"));
-
- aColumn = new Column<File,String>(new TextCell()) {
- @Override
- public String getValue(File object) {
- return object.getPath();
- }
- };
- aheader = new SortableHeader("Path");
- celltable.addColumn(aColumn, aheader);
- allHeaders.add(aheader);
- aheader.setUpdater(new FileValueUpdater(aheader, "path"));
-
- aColumn = new Column<File,String>(new TextCell()) {
- @Override
- public String getValue(File object) {
- return String.valueOf(object.getVersion());
- }
- };
- aheader = new SortableHeader("Version");
- celltable.addColumn(aColumn, aheader);
- allHeaders.add(aheader);
- aheader.setUpdater(new FileValueUpdater(aheader, "version"));
-
- aColumn = new Column<File,String>(new TextCell()) {
+ Column<File,String> aColumn = new Column<File,String>(new TextCell()) {
@Override
public String getValue(File object) {
// TODO Auto-generated method stub
return object.getSizeAsString();
}
};
- aheader = new SortableHeader("Size");
+ SortableHeader aheader = new SortableHeader("Size");
celltable.addColumn(aColumn, aheader);
allHeaders.add(aheader);
aheader.setUpdater(new FileValueUpdater(aheader, "size"));
VerticalPanel vp = new VerticalPanel();
vp.setWidth("100%");
- pagerTop = new GssSimplePager(GssSimplePager.TextLocation.CENTER);
- pagerTop.setVisible(false);
- pagerTop.setDisplay(celltable);
- uploadButtonTop = new Button("<span id='topMenu.file.upload'>" + AbstractImagePrototype.create(images.fileUpdate()).getHTML() + " Upload</span>");
- uploadButtonTop.addClickHandler(new ClickHandler() {
-
- @Override
- public void onClick(ClickEvent event) {
- new UploadFileCommand(app, null, treeView.getSelection()).execute();
- }
- });
- HorizontalPanel topPanel = new HorizontalPanel();
- topPanel.add(pagerTop);
- topPanel.add(uploadButtonTop);
- vp.add(topPanel);
-
vp.add(celltable);
- pagerBottom = new GssSimplePager(GssSimplePager.TextLocation.CENTER);
- pagerBottom.setVisible(false);
- pagerBottom.setDisplay(celltable);
- uploadButtonBottom=new Button("<span id='topMenu.file.upload'>" + AbstractImagePrototype.create(images.fileUpdate()).getHTML() + " Upload</span>");
- uploadButtonBottom.addClickHandler(new ClickHandler() {
-
- @Override
- public void onClick(ClickEvent event) {
- new UploadFileCommand(app, null, treeView.getSelection()).execute();
- }
- });
- HorizontalPanel bottomPanel = new HorizontalPanel();
- bottomPanel.add(pagerBottom);
- bottomPanel.add(uploadButtonBottom);
-
- vp.add(bottomPanel);
vp.setCellWidth(celltable, "100%");
vp.addHandler(new ContextMenuHandler() {
@Override
* Update the display of the file list.
*/
void update(boolean sort) {
- int count = folderFileCount;
- int max = startIndex + Pithos.VISIBLE_FILE_COUNT;
- if (max > count)
- max = count;
- folderTotalSize = 0;
-
- for(File f : files){
- folderTotalSize += f.getBytes();
- }
- if (folderFileCount == 0) {
- showingStats = "no files";
- } else if (folderFileCount < Pithos.VISIBLE_FILE_COUNT) {
- if (folderFileCount == 1)
- showingStats = "1 file";
- else
- showingStats = folderFileCount + " files";
-// showingStats += " (" + FileResource.getFileSizeAsString(folderTotalSize) + ")";
- } else {
-// showingStats = "" + (startIndex + 1) + " - " + max + " of " + count + " files" + " (" + FileResource.getFileSizeAsString(folderTotalSize) + ")";
- }
showCellTable();
}
}
}
- if(files.size() > Pithos.VISIBLE_FILE_COUNT){
- pagerBottom.setVisible(true);
- pagerTop.setVisible(true);
- }
- else{
- pagerTop.setVisible(false);
- pagerBottom.setVisible(false);
- }
- Folder selectedItem = treeView.getSelection();
-
provider.setList(files);
selectionModel.clear();
}
* Shows the files in the cellTable
*/
private void showCellTable(){
- if(files.size()> Pithos.VISIBLE_FILE_COUNT){
- pagerBottom.setVisible(true);
- pagerTop.setVisible(true);
- }
- else{
- pagerTop.setVisible(false);
- pagerBottom.setVisible(false);
- }
provider.setList(files);
provider.refresh();
//celltable.redraw();
celltable.redrawHeaders();
}
-
- public void showTrash() {
- uploadButtonBottom.setVisible(false);
- uploadButtonTop.setVisible(false);
- }
-
- public void showFiles() {
- uploadButtonBottom.setVisible(true);
- uploadButtonTop.setVisible(true);
- }
}
// Create a panel to hold all of the form widgets.
VerticalPanel panel = new VerticalPanel();
form.setWidget(panel);
- final HTML info = new HTML("You may select a file to upload. Install" +
- " <a href='http://gears.google.com/' target='_blank'>Google " +
- "Gears</a><br> for uploading multiple files simultaneously.");
- info.addStyleName("pithos-uploadNote");
- panel.add(info);
final Hidden auth = new Hidden("X-Auth-Token", "");
panel.add(auth);
buttons.add(cancel);
buttons.setCellHorizontalAlignment(cancel, HasHorizontalAlignment.ALIGN_CENTER);
buttons.setSpacing(8);
- buttons.addStyleName("pithos-DialogBox");
panel.add(buttons);
panel.setCellHorizontalAlignment(buttons, HasHorizontalAlignment.ALIGN_CENTER);
}
});
-
- panel.addStyleName("pithos-DialogBox");
- addStyleName("pithos-DialogBox");
setWidget(form);
}
}
.cellTableHeader {
- /*padding: 3px 9px;*/
- border:none;
- background-color: #E0EDFE;
+ border:none;
font-weight: bold;
cursor: pointer;
+ color: white;
}
.cellTableCell {
.cellTableEvenRow {
cursor: hand;
cursor: pointer;
+ background: none;
}
.cellTableOddRow {
cursor: hand;
cursor: pointer;
+ background: none;
}
.cellTableSelectedRow {
- background: #628cd5;
- color: white;
+ color: #d45500;
height: auto;
overflow: auto;
}
- .cellTableHoveredRow {
-
- /*background-color: #E0EDFE;
- color: white;
- height: auto;
- overflow: auto;*/
+.cellTableHoveredRow {
+ background: none;
}
\ No newline at end of file
}
.cellTreeKeyboardSelectedItem {
- background-color: #ffc;
outline: none;
}
.cellTreeSelectedItem {
- background-color: #628cd5;
- color: white;
+ color: #d45500;
height: auto;
overflow: visible;
}
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.json.client.JSONString;
import com.google.gwt.json.client.JSONValue;
import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.HasHorizontalAlignment.HorizontalAlignmentConstant;
+import com.google.gwt.user.client.ui.HasVerticalAlignment;
+import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.Image;
+import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SelectionChangeEvent.Handler;
import com.google.gwt.view.client.SingleSelectionModel;
+import gr.grnet.pithos.web.client.commands.UploadFileCommand;
import gr.grnet.pithos.web.client.foldertree.AccountResource;
import gr.grnet.pithos.web.client.foldertree.File;
import gr.grnet.pithos.web.client.foldertree.Folder;
/**
* The tab panel that occupies the right side of the screen.
*/
- private TabPanel inner = new DecoratedTabPanel(){
-
-// public void onBrowserEvent(com.google.gwt.user.client.Event event) {
-// if (DOM.eventGetType(event) == Event.ONCONTEXTMENU){
-// if(isFileListShowing()){
-// getFileList().showContextMenu(event);
-// }
-// }
-// };
- };
+ private VerticalPanel inner = new VerticalPanel();
/**
}
private void initialize() {
+ VerticalPanel outer = new VerticalPanel();
+ outer.setWidth("100%");
+
topPanel = new TopPanel(this, Pithos.images);
topPanel.setWidth("100%");
+ outer.add(topPanel);
messagePanel.setWidth("100%");
messagePanel.setVisible(false);
+ outer.add(messagePanel);
+ outer.setCellHorizontalAlignment(messagePanel, HasHorizontalAlignment.ALIGN_CENTER);
// Inner contains the various lists.
inner.sinkEvents(Event.ONCONTEXTMENU);
- inner.setAnimationEnabled(true);
- inner.getTabBar().addStyleName("pithos-MainTabBar");
- inner.getDeckPanel().addStyleName("pithos-MainTabPanelBottom");
-
inner.setWidth("100%");
- inner.addSelectionHandler(new SelectionHandler<Integer>() {
+ HorizontalPanel rightside = new HorizontalPanel();
+ rightside.addStyleName("pithos-rightSide");
+ rightside.setSpacing(5);
+ PushButton parentButton = new PushButton(new Image(images.asc()), new ClickHandler() {
@Override
- public void onSelection(SelectionEvent<Integer> event) {
- int tabIndex = event.getSelectedItem();
- switch (tabIndex) {
- case 0:
- break;
- }
+ public void onClick(ClickEvent event) {
+
}
});
+ parentButton.addStyleName("pithos-parentButton");
+ rightside.add(parentButton);
+
+ HTML folderStatistics = new HTML("5 Files (size: 1.1GB)");
+ folderStatistics.addStyleName("pithos-folderStatistics");
+ rightside.add(folderStatistics);
+ inner.add(rightside);
+ inner.setCellHorizontalAlignment(rightside, HasHorizontalAlignment.ALIGN_RIGHT);
+ inner.setCellVerticalAlignment(rightside, HasVerticalAlignment.ALIGN_MIDDLE);
+ inner.setCellHeight(rightside, "60px");
folderTreeSelectionModel = new SingleSelectionModel<Folder>();
folderTreeSelectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
folderTreeView = new FolderTreeView(folderTreeViewModel);
fileList = new FileList(this, images, folderTreeView);
- inner.add(fileList, createHeaderHTML(AbstractImagePrototype.create(images.folders()), "Files"), true);
+ inner.add(fileList);
tagTreeSelectionModel = new SingleSelectionModel<Tag>();
tagTreeSelectionModel.addSelectionChangeHandler(new Handler() {
tagTreeView = new TagTreeView(tagTreeViewModel);
VerticalPanel trees = new VerticalPanel();
+
+ Button upload = new Button("Upload File", new ClickHandler() {
+ @Override
+ public void onClick(ClickEvent event) {
+ new UploadFileCommand(Pithos.this, null, folderTreeView.getSelection()).execute();
+ }
+ });
+ upload.addStyleName("pithos-uploadButton");
+ trees.add(upload);
+
+ HorizontalPanel treeHeader = new HorizontalPanel();
+ treeHeader.addStyleName("pithos-treeHeader");
+ treeHeader.add(new HTML("Total Files: 6 | Used: 2.1 of 50 GB (4.2%)"));
+ trees.add(treeHeader);
+
trees.add(folderTreeView);
trees.add(tagTreeView);
// Add the left and right panels to the split panel.
splitPanel.setSplitPosition("25%");
splitPanel.setSize("100%", "100%");
splitPanel.addStyleName("pithos-splitPanel");
-
- // Create a dock panel that will contain the menu bar at the top,
- // the shortcuts to the left, the status bar at the bottom and the
- // right panel taking the rest.
- VerticalPanel outer = new VerticalPanel();
- outer.add(topPanel);
- outer.add(messagePanel);
outer.add(splitPanel);
+
statusPanel = new StatusPanel();
outer.add(statusPanel);
- outer.setWidth("100%");
- outer.setCellHorizontalAlignment(messagePanel, HasHorizontalAlignment.ALIGN_CENTER);
+
// Hook the window resize event, so that we can adjust the UI.
Window.addResizeHandler(this);
}
public void showFiles(Folder f) {
- inner.selectTab(0);
- if (f.isTrash()) {
- fileList.showTrash();
- }
- else
- fileList.showFiles();
Set<File> files = f.getFiles();
showFiles(files);
}
@Override
public void onSuccess(AccountResource result) {
account = result;
- inner.selectTab(0);
if (account.getContainers().isEmpty())
createHomeContainers();
else
// Create the text and set a style name so we can style it with CSS.
HTML text = new HTML("<p>Your session has expired. You will have to reauthenticate with your Identity Provider.</p> ");
- text.setStyleName("pithos-AboutText");
+ text.setStyleName("pithos-sessionExpired");
outer.add(text);
// Create the 'OK' button, along with a listener that hides the dialog
HorizontalPanel secondLine = new HorizontalPanel();
secondLine.add(new HTML("Copyright (C) 2011 Greek Research and Technology Network"));
inner.add(secondLine);
-
outer.add(inner);
+ outer.addStyleName("pithos-statusbar");
+
initWidget(outer);
}
}
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.MenuBar;
+import com.google.gwt.user.client.ui.MenuItem;
/**
* The top panel, which contains the menu bar icons and the user name.
// outer.setSpacing(2);
outer.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
- outer.setStyleName("toolbar");
+ outer.setStyleName("pithos-topPanel");
HTML logos = new HTML("<table><tr><td>" + AbstractImagePrototype.create(images.pithosLogo()).getHTML() + "</td></tr></table>");
outer.add(logos);
-// outer.setCellHorizontalAlignment(logos, HasHorizontalAlignment.ALIGN_RIGHT);
+ MenuBar username = new MenuBar();
+ username.setStyleName("pithos-usernameMenu");
+ MenuItem userItem = new MenuItem(_app.getUsername(), new MenuBar(true));
+ userItem.addStyleName("pithos-usernameMenu");
+ username.addItem(userItem);
+ outer.add(username);
+ outer.setCellHorizontalAlignment(username, HasHorizontalAlignment.ALIGN_RIGHT);
initWidget(outer);
}
@Source("gr/grnet/pithos/resources/folder_home.png")
ImageResource home();
- @Source("gr/grnet/pithos/resources/folder_yellow.png")
+ @Source("gr/grnet/pithos/resources/2folder22.png")
public ImageResource folderYellow();
@Source("gr/grnet/pithos/resources/mimetypes/document.png")
ImageResource document();
- @Source("gr/grnet/pithos/resources/internet.png")
+ @Source("gr/grnet/pithos/resources/othersshared.png")
ImageResource othersShared();
- @Source("gr/grnet/pithos/resources/edit_user.png")
+ @Source("gr/grnet/pithos/resources/myshared22.png")
ImageResource myShared();
@Source("gr/grnet/pithos/resources/folder_user.png")
ImageResource sharedFolder();
- @Source("gr/grnet/pithos/resources/trashcan_empty.png")
+ @Source("gr/grnet/pithos/resources/trash.png")
ImageResource trash();
}
public void render(Context context, Folder folder, SafeHtmlBuilder safeHtmlBuilder) {
String html;
if (folder.isTrash())
- html = AbstractImagePrototype.create(FolderTreeView.images.emptyTrash()).getHTML();
+ html = AbstractImagePrototype.create(FolderTreeView.images.trash()).getHTML();
else
html = AbstractImagePrototype.create(FolderTreeView.images.folderYellow()).getHTML();
safeHtmlBuilder.appendHtmlConstant(html);
body {
- background-color: #4085a5;
color: black;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
- font-size: small;
margin: 8px;
margin-top: 3px;
}
color: darkblue;
}
-.hidden-link {
- text-decoration: none !important;
- color: black !important;
+a.info {
+ position: relative; /*this is the key*/
+ z-index: 24;
+ color: black;
+ text-decoration: none
}
-.hidden-link:visited {
- text-decoration: none !important;
- color: black !important;
+a.info:hover {
+ z-index: 25;
+ background-color: yellow;
}
-.pithos-TopPanel {
- font-size: 100%;
+a.info div {
+ display: none
}
-.pithos-TopPanelLinks {
- font-size: 100%;
+a.info:hover span {
+ cursor: pointer;
}
-.pithos-AboutText {
- width: 24em;
- /* Restore the padding we remove when overriding the gwt-DialogBox style */
- padding: 3px;
+/* The span will only display on :hover state. */
+a.info:hover div {
+ display: block;
+ position: absolute;
+ bottom: 2em;
+ right: 1em;
+ width: 10em;
+ border: 1px solid lightblue;
+ background-color: #D0E4F6;
+ color: black;
+ text-align: center
}
-.pithos-Groups {
- background-color: white;
- font-size: 80%;
+/*
+ * Remove the padding inside the dialog boxes so that our background color
+ * appears uniform in warnings and errors.
+ */
+.gwt-DialogBox .dialogMiddleCenter {
+ background:none repeat scroll 0 0 white;
+ padding: 0;
}
-.toolbar {
- font-size: 80%;
+table.pithos-permList {
+ border-spacing: 3px;
+ border-collapse: collapse;
+
}
-.toolbarmenu {
- font-size: 80%;
- cursor: pointer;
+table.pithos-permList td {
+ padding: 5px 5px 5px 5px;
+ font-size:80%;
}
-.statusbar-inner {
- border: none;
- font-size: 90%;
- vertical-align: middle;
- font-weight: normal;
+table.pithos-permList.props-labels {
+ font-weight: bold;
}
-.pithos-List {
- background-color: white;
+.props-labels {
font-size: 80%;
- cursor: default;
- border-collapse: collapse;
- /* prevents selecting text in table with shift and ctrl*/
- -moz-user-select: none;
-}
-.pithos-List thead tr{
- border: 1px lightblue solid;
- }
-
- .GK31MSKBKG{
- border-bottom:none;
- }
-.pithos-ListHeader {
-
- background-color: #E0EDFE;
font-weight: bold;
- cursor: pointer;
}
-.pithos-searchLabel {
+.props-toplabels {
+ font-size: 80%;
font-weight: bold;
font-style: italic;
- font-size: 90%;
- padding:5px;
}
-.pithos-ListNavBar {
+.props-values {
font-size: 80%;
}
-.pithos-SelectedRow {
- background-color: #E0EDFE;
-}
-.pithos-fileRow{
- cursor: pointer;
+.hidden-link {
+ text-decoration: none !important;
+ color: black !important;
}
-.pithos-Toolbar {
+.hidden-link:visited {
+ text-decoration: none !important;
+ color: black !important;
}
-.pithos-ToolButton {
+.pithos-topPanel {
+ background-color: #4085a5;
font-size: 80%;
- width: 10em;
}
-.props-labels {
- font-size: 80%;
- font-weight: bold;
+.pithos-usernameMenu {
+ cursor: pointer;
+ color: white;
}
-.props-toplabels {
- font-size: 80%;
- font-weight: bold;
- font-style: italic;
+.pithos-usernameMenuItem {
+ cursor: pointer;
}
-.props-values {
- font-size: 80%;
+.pithos-sessionExpired {
+ width: 24em;
+ /* Restore the padding we remove when overriding the gwt-DialogBox style */
+ padding: 3px;
+}
+
+.pithos-statusbar {
+ background-color: #4085a5;
+ border: none;
+ font-size: 90%;
+ vertical-align: middle;
+ font-weight: normal;
+}
+
+.pithos-List {
+ cursor: default;
+ border-collapse: collapse;
+ /* prevents selecting text in table with shift and ctrl*/
+ -moz-user-select: none;
}
.pithos-errorMessage {
color: black;
}
-.pithos-search {
- color: black;
-}
-
-.pithos-search-empty {
- color: #d3d3d3;
-}
-
-.pithos-DialogBox {
-}
-
.pithos-readForAllNote {
width: 240px;
text-align: justify;
padding-left: 4;
}
-/* Tooltips */
-a.info {
- position: relative; /*this is the key*/
- z-index: 24;
- color: black;
- text-decoration: none
-}
-
-a.info:hover {
- z-index: 25;
- background-color: yellow;
-}
-
-a.info div {
- display: none
-}
-
-a.info:hover span {
- cursor: pointer;
-}
-
-/* The span will only display on :hover state. */
-a.info:hover div {
- display: block;
- position: absolute;
- bottom: 2em;
- right: 1em;
- width: 10em;
- border: 1px solid lightblue;
- background-color: #D0E4F6;
- color: black;
- text-align: center
-}
-
-table.pithos-permList.props-labels {
- font-weight: bold;
-}
-
-table.pithos-permList {
- border-spacing: 3px;
- border-collapse: collapse;
-
-}
-
-table.pithos-permList td {
- padding: 5px 5px 5px 5px;
- font-size:80%;
-}
-
-.progressbar-text {
- font-weight: bold;
-}
-
-.progressbar-remaining {
- font-size: 12px;
- font-style: italic;
-}
-
-.progressbar-outer {
-}
-
-.progressbar-inner {
- border: 1px solid darkgrey;
- margin: 1px;
-}
-
-.progressbar-bar {
- width: 5px;
- height: 15px;
- margin: 0px;
-}
-
-.progressbar-fullbar {
- background: #E0EDFE;
-}
-
-.progressbar-blankbar {
- background: white;
-}
-
-.pithos-uploadNote {
- text-align: justify;
- font-style: italic;
- font-size: 12px;
- padding-top: 16;
- padding-bottom: 16;
- padding-right: 4;
- padding-left: 4;
-}
-
-.pithos-MainTabBar {
- padding-top: 4px;
-}
-
-.pithos-MainTabPanelBottom {
- border-bottom: none;
- border-left: none;
- border-right: none;
- overflow: hidden;
- padding: 6px;
-}
-
.pithos-TabPanelBottom {
border-color: darkgrey;
border-width: 1px 1px 1px;
.pithos-splitPanel {
border: 1px solid white;
- background: url(resources/background.png) repeat-x;
-}
-
-.pithos-tag {
- display:inline;
+ background: url(images/background.png) repeat-x;
}
/* Use the background color for the splitter. */
.gwt-HorizontalSplitPanel .hsplitter {
cursor: move;
- border: 0px;
+ border: 0px;
background: #bec8e6;
}
-/* Avoid extended background color in tree nodes. */
-.gwt-TreeItem-selected .gwt-HTML {
- display: inline;
+.pithos-tag {
+ display:inline;
}
-/*
- * Remove the padding inside the dialog boxes so that our background color
- * appears uniform in warnings and errors.
- */
-.gwt-DialogBox .dialogMiddleCenter {
- background:none repeat scroll 0 0 white;
- padding: 0;
+.pithos-uploadButton {
+ background: none;
+ background-color: #ff6600;
+ font-size: 120%;
+ text-align: center;
+ height: 40px;
+ width: 100%;
+}
+
+.pithos-rightSide {
+ vertical-align: middle;
+}
+.pithos-parentButton {
+ background: none;
+ background-color: #a1c8da;
}
-.droppableHover {
- background-color: #C1DEFD;
+.pithos-folderStatistics {
+ background-color: #a1c8da;
+ text-align: center;
+ color: white;
}