mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #3286 from nextcloud/popover-backport 

[stable11] popovermenu backport
This commit is contained in:
Lukas Reschke 2017-02-10 11:27:03 +01:00 committed by GitHub
parent 0cb59ad3f5 9e7afbf6cb
commit 020bf77dde
5 changed files with 234 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/files/css/files.css
View File

@ -768,46 +768,20 @@ html.ie8 #controls .button.new {
}
.newFileMenu {
width: 200px;
margin-left: -56px;
margin-top: 25px;
font-weight: 300;
top: 100%;
margin-top: 4px;
min-width: 100px;
margin-left: 7px;
z-index: 1001;
}
.newFileMenu .menuitem {
white-space: nowrap;
overflow: hidden;
}
.newFileMenu.popovermenu a.menuitem,
.newFileMenu.popovermenu label.menuitem,
.newFileMenu.popovermenu .menuitem {
padding: 0;
margin: 0;
}
.newFileMenu.popovermenu a.menuitem.active {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
.newFileMenu.bubble:after {
left: 75px;
right: auto;
}
.newFileMenu.bubble:before {
left: 75px;
right: auto;
}
.newFileMenu .filenameform {
display: inline-block;
}
.newFileMenu .filenameform input {
width: 100%;
box-sizing: border-box;
margin: -2px 0;
margin: 2px 0;
}
#fileList .popovermenu .action {
@ -835,6 +809,9 @@ html.ie8 #controls .button.new {
height: 15px;
}
.app-files .actions .button.new {
position: relative;
}
.app-files .actions .button.new .icon {
margin-bottom: 2px;
}

2
apps/files/js/filelist.js
View File

@ -2947,7 +2947,7 @@
this._newFileMenu = new OCA.Files.NewFileMenu({
fileList: this
});
$('body').append(this._newFileMenu.$el);
$('.actions').append(this._newFileMenu.$el);
}
this._newFileMenu.showAt($target);

10
apps/files/js/newfilemenu.js
View File

@ -38,7 +38,8 @@
*/
var NewFileMenu = OC.Backbone.View.extend({
tagName: 'div',
className: 'newFileMenu popovermenu bubble hidden open menu',
// Menu is opened by default because it's rendered on "add-button" click
className: 'newFileMenu popovermenu bubble menu open menu-left',
events: {
'click .menuitem': '_onClickAction'
@ -235,13 +236,6 @@
*/
showAt: function($target) {
this.render();
var targetOffset = $target.offset();
this.$el.css({
left: targetOffset.left,
top: targetOffset.top + $target.height()
});
this.$el.removeClass('hidden');
OC.showMenu(null, this.$el);
}
});

330
core/css/apps.css
View File

@ -284,66 +284,6 @@
list-style-type: none;
}
/* menu bubble / popover */
.bubble,
#app-navigation .app-navigation-entry-menu {
position: absolute;
background-color: #fff;
color: #333;
border-radius: 3px;
border-top-right-radius: 0;
z-index: 110;
margin: 5px;
margin-top: -5px;
right: 0;
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
}
.ie .bubble,
.ie #app-navigation .app-navigation-entry-menu,
.ie .bubble:after,
.ie #app-navigation .app-navigation-entry-menu:after,
.edge .bubble,
.edge #app-navigation .app-navigation-entry-menu,
.edge .bubble:after,
.edge #app-navigation .app-navigation-entry-menu:after {
border: 1px solid #eee;
}
/* miraculous border arrow stuff */
.bubble:after,
#app-navigation .app-navigation-entry-menu:after {
bottom: 100%;
right: 6px; /* change this to adjust the arrow position */
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after,
#app-navigation .app-navigation-entry-menu:after {
border-color: rgba(238, 238, 238, 0);
border-bottom-color: #fff;
border-width: 10px;
}
.bubble .action {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important;
opacity: .5 !important;
}
.bubble .action:hover,
.bubble .action:focus,
.bubble .action.active {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
}
#app-navigation .app-navigation-entry-menu {
display: none;
}
@ -639,62 +579,234 @@ em {
padding: 0 15px 15px;
}
/* popover menu styles (use together with "bubble" class) */
.popovermenu .menuitem,
.popovermenu .menuitem>span {
cursor: pointer;
vertical-align: middle;
/* POPOVER MENU ------------------------------------------------------------- */
.ie .bubble, .ie .bubble:after,
.ie .popovermenu, .ie .popovermenu:after,
.ie #app-navigation .app-navigation-entry-menu,
.ie #app-navigation .app-navigation-entry-menu:after,
.edge .bubble,
.edge .bubble:after,
.edge .popovermenu,
.edge .popovermenu:after,
.edge #app-navigation .app-navigation-entry-menu,
.edge #app-navigation .app-navigation-entry-menu:after {
border: 1px solid #eee;
}
.popovermenu .menuitem {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
.popovermenu .menuitem:hover,
.popovermenu .menuitem:focus,
.popovermenu .menuitem.active {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.popovermenu .menuitem img {
padding: initial;
}
.popovermenu a.menuitem,
.popovermenu label.menuitem,
.popovermenu .menuitem {
padding: 10px !important;
width: auto;
}
.popovermenu.hidden {
.bubble,
.app-navigation-entry-menu,
.popovermenu {
position: absolute;
background-color: #fff;
color: #333;
border-radius: 3px;
border-top-right-radius: 0;
z-index: 110;
margin: 5px;
margin-top: -5px;
right: 0;
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
display: none;
}
.popovermenu .menuitem {
.bubble:after,
.app-navigation-entry-menu:after,
.popovermenu:after {
bottom: 100%;
/* Min-width of popover is 36px and arrow width is 20px
wich leaves us 8px right and 8px left */
right: 8px; /* change this to adjust the arrow position */
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(238, 238, 238, 0);
border-bottom-color: #fff;
border-width: 10px;
}
/* Center the popover */
.bubble.menu-center,
.app-navigation-entry-menu.menu-center,
.popovermenu.menu-center {
transform: translateX(50%);
right: 50%;
margin-right: 0;
border-top-right-radius: 3px;
}
.bubble.menu-center:after,
.app-navigation-entry-menu.menu-center:after,
.popovermenu.menu-center:after {
right: 50%;
transform: translateX(50%);
}
/* Align the popover to the left */
.bubble.menu-left,
.app-navigation-entry-menu.menu-left,
.popovermenu.menu-left {
right: auto;
left: 0;
margin-right: 0;
border-top-left-radius: 0;
border-top-right-radius: 3px;
}
.bubble.menu-left:after,
.app-navigation-entry-menu.menu-left:after,
.popovermenu.menu-left:after {
left: 6px;
right: auto;
}
.bubble.open,
.app-navigation-entry-menu.open,
.popovermenu.open {
display: block;
}
.bubble ul,
.app-navigation-entry-menu ul,
.popovermenu ul {
/* Overwrite #app-navigation > ul ul */
display: flex !important;
line-height: 30px;
color: #000;
flex-direction: column;
}
.bubble li,
.app-navigation-entry-menu li,
.popovermenu li {
display: flex;
}
.bubble li > button,
.bubble li > a,
.bubble li > .menuitem,
.app-navigation-entry-menu li > button,
.app-navigation-entry-menu li > a,
.app-navigation-entry-menu li > .menuitem,
.popovermenu li > button,
.popovermenu li > a,
.popovermenu li > .menuitem {
cursor: pointer;
line-height: 36px;
border: 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
filter: alpha(opacity=50) !important;
opacity: .5 !important;
background-color: transparent;
display: flex;
align-items: center;
width: auto;
height: auto;
margin: 0;
font-weight: inherit;
box-shadow: none;
}
.popovermenu .menuitem .icon,
.popovermenu .menuitem .no-icon {
display: inline-block;
.bubble li > button.action,
.bubble li > a.action,
.bubble li > .menuitem.action,
.app-navigation-entry-menu li > button.action,
.app-navigation-entry-menu li > a.action,
.app-navigation-entry-menu li > .menuitem.action,
.popovermenu li > button.action,
.popovermenu li > a.action,
.popovermenu li > .menuitem.action {
padding: inherit !important;
}
.bubble li > button:hover, .bubble li > button:focus,
.bubble li > a:hover,
.bubble li > a:focus,
.bubble li > .menuitem:hover,
.bubble li > .menuitem:focus,
.app-navigation-entry-menu li > button:hover,
.app-navigation-entry-menu li > button:focus,
.app-navigation-entry-menu li > a:hover,
.app-navigation-entry-menu li > a:focus,
.app-navigation-entry-menu li > .menuitem:hover,
.app-navigation-entry-menu li > .menuitem:focus,
.popovermenu li > button:hover,
.popovermenu li > button:focus,
.popovermenu li > a:hover,
.popovermenu li > a:focus,
.popovermenu li > .menuitem:hover,
.popovermenu li > .menuitem:focus {
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
background-color: transparent;
}
.bubble li > button > span,
.bubble li > a > span,
.bubble li > .menuitem > span,
.app-navigation-entry-menu li > button > span,
.app-navigation-entry-menu li > a > span,
.app-navigation-entry-menu li > .menuitem > span,
.popovermenu li > button > span,
.popovermenu li > a > span,
.popovermenu li > .menuitem > span {
cursor: pointer;
white-space: nowrap;
}
.bubble li > button > p,
.bubble li > a > p,
.bubble li > .menuitem > p,
.app-navigation-entry-menu li > button > p,
.app-navigation-entry-menu li > a > p,
.app-navigation-entry-menu li > .menuitem > p,
.popovermenu li > button > p,
.popovermenu li > a > p,
.popovermenu li > .menuitem > p {
width: 150px;
line-height: 1.6em;
padding: 8px 0;
}
.bubble li > button > p > span,
.bubble li > a > p > span,
.bubble li > .menuitem > p > span,
.app-navigation-entry-menu li > button > p > span,
.app-navigation-entry-menu li > a > p > span,
.app-navigation-entry-menu li > .menuitem > p > span,
.popovermenu li > button > p > span,
.popovermenu li > a > p > span,
.popovermenu li > .menuitem > p > span {
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
filter: alpha(opacity=70) !important;
opacity: .7 !important;
}
.bubble li > button:not(:empty),
.bubble li > a:not(:empty),
.bubble li > .menuitem:not(:empty),
.app-navigation-entry-menu li > button:not(:empty),
.app-navigation-entry-menu li > a:not(:empty),
.app-navigation-entry-menu li > .menuitem:not(:empty),
.popovermenu li > button:not(:empty),
.popovermenu li > a:not(:empty),
.popovermenu li > .menuitem:not(:empty) {
padding: 0 !important;
padding-right: 10px !important;
}
.bubble li > button > img,
.bubble li > a > img,
.bubble li > .menuitem > img,
.app-navigation-entry-menu li > button > img,
.app-navigation-entry-menu li > a > img,
.app-navigation-entry-menu li > .menuitem > img,
.popovermenu li > button > img,
.popovermenu li > a > img,
.popovermenu li > .menuitem > img {
width: 16px;
height: 16px;
margin-right: 10px;
vertical-align: middle;
padding: 0 10px;
}
.popovermenu .menuitem {
opacity: 0.5;
}
.popovermenu li:hover .menuitem {
opacity: 1;
.bubble li [class^='icon-'],
.bubble li [class*=' icon-'],
.app-navigation-entry-menu li [class^='icon-'],
.app-navigation-entry-menu li [class*=' icon-'],
.popovermenu li [class^='icon-'],
.popovermenu li [class*=' icon-'] {
/* Keep padding to define the width to
assure correct position of a possible text */
padding: 18px 0 18px 36px;
min-width: 0;
/* Overwrite icons*/
min-height: 0;
background-position: 10px center;
}

2
settings/js/federationscopemenu.js
View File

@ -37,7 +37,7 @@
*/
var FederationScopeMenu = OC.Backbone.View.extend({
tagName: 'div',
className: 'federationScopeMenu popovermenu bubble hidden open menu',
className: 'federationScopeMenu popovermenu bubble hidden menu',
field: undefined,
_scopes: undefined,