wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added bubble style, applied to file actions menu

Browse source
This commit is contained in:
Vincent Petry 2015-08-06 10:58:59 +02:00
parent 9454e9043a
commit b142fbe6d7
3 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/files/css/files.css
View file

@ -691,6 +691,7 @@ table.dragshadow td.size {
.fileActionsMenu { .fileActionsMenu {
/* FIXME: should be variable width, but default one is too big */ /* FIXME: should be variable width, but default one is too big */
width: 100px; width: 100px;
padding: 10px;
} }
.fileActionsMenu.hidden { .fileActionsMenu.hidden {

2
apps/files/js/fileactionsmenu.js
View file

@ -43,7 +43,7 @@
* @private * @private
*/ */
initialize: function() { initialize: function() {
this.$el = $('<div class="fileActionsMenu dropdown hidden menu"></div>'); this.$el = $('<div class="fileActionsMenu bubble hidden open menu"></div>');
this._template = Handlebars.compile(TEMPLATE_MENU); this._template = Handlebars.compile(TEMPLATE_MENU);
this.$el.on('click', 'a.action', _.bind(this._onClickAction, this)); this.$el.on('click', 'a.action', _.bind(this._onClickAction, this));

11
core/css/apps.css
View file

@ -292,8 +292,8 @@
list-style-type: none; list-style-type: none;
} }
.bubble,
#app-navigation .app-navigation-entry-menu { #app-navigation .app-navigation-entry-menu {
display: none;
position: absolute; position: absolute;
background-color: #eee; background-color: #eee;
color: #333; color: #333;
@ -310,11 +310,17 @@
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
} }
#app-navigation .app-navigation-entry-menu {
display: none;
}
#app-navigation .app-navigation-entry-menu.open { #app-navigation .app-navigation-entry-menu.open {
display: block; display: block;
} }
/* miraculous border arrow stuff */ /* miraculous border arrow stuff */
.bubble:after,
.bubble:before,
#app-navigation .app-navigation-entry-menu:after, #app-navigation .app-navigation-entry-menu:after,
#app-navigation .app-navigation-entry-menu:before { #app-navigation .app-navigation-entry-menu:before {
bottom: 100%; bottom: 100%;
@ -327,12 +333,15 @@
pointer-events: none; pointer-events: none;
} }
.bubble:after,
#app-navigation .app-navigation-entry-menu:after { #app-navigation .app-navigation-entry-menu:after {
border-color: rgba(238, 238, 238, 0); border-color: rgba(238, 238, 238, 0);
border-bottom-color: #eee; border-bottom-color: #eee;
border-width: 10px; border-width: 10px;
margin-left: -10px; margin-left: -10px;
} }
.bubble:before,
#app-navigation .app-navigation-entry-menu:before { #app-navigation .app-navigation-entry-menu:before {
border-color: rgba(187, 187, 187, 0); border-color: rgba(187, 187, 187, 0);
border-bottom-color: #bbb; border-bottom-color: #bbb;