Merge pull request #9374 from nextcloud/federation-share-popover-fix
Federation share popover fix
This commit is contained in:
Morris Jobke
GitHub
commit
8b0616347c
|
|
@ -38,10 +38,6 @@ input {
|
|||
.avatardiv {
|
||||
margin: 10px auto;
|
||||
}
|
||||
.federationScopeMenu {
|
||||
/* popover magic fix */
|
||||
margin-right: calc(-50% - 7px);
|
||||
}
|
||||
.warning {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -110,23 +106,6 @@ input {
|
|||
grid-template-rows: 1fr 2fr 1fr;
|
||||
}
|
||||
|
||||
|
||||
.icon-federation-menu {
|
||||
padding-left: 16px;
|
||||
background-size: 16px;
|
||||
background-position: left 8px;
|
||||
opacity: .3;
|
||||
margin-top: -2px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-triangle-s {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.personal-show-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -322,29 +301,37 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
.federationScopeMenu {
|
||||
top: 44px;
|
||||
margin-right: calc(-50% + 30px); /* half - the triangle icon width - borders */
|
||||
&.bubble::after {
|
||||
right: 50%;
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
&.popovermenu {
|
||||
a.menuitem, label.menuitem {
|
||||
font-size: 12.8px;
|
||||
line-height: 1.6em;
|
||||
.federation-menu {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
.icon-federation-menu {
|
||||
padding-left: 16px;
|
||||
background-size: 16px;
|
||||
background-position: left center;
|
||||
opacity: .3;
|
||||
cursor: inherit;
|
||||
.icon-triangle-s {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: inherit;
|
||||
}
|
||||
.menuitem {
|
||||
font-size: 12.8px;
|
||||
line-height: 1.6em;
|
||||
.menuitem-text-detail {
|
||||
opacity: .75;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: inset 2px 0 $color-primary;
|
||||
|
||||
.menuitem-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
.federationScopeMenu {
|
||||
top: 44px;
|
||||
&.popovermenu {
|
||||
.menuitem {
|
||||
// override h2 heading font size
|
||||
font-size: 12.8px;
|
||||
line-height: 1.6em;
|
||||
.menuitem-text-detail {
|
||||
opacity: .75;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: inset 2px 0 $color-primary;
|
||||
.menuitem-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
*/
|
||||
var FederationScopeMenu = OC.Backbone.View.extend({
|
||||
tagName: 'div',
|
||||
className: 'federationScopeMenu popovermenu bubble hidden menu',
|
||||
className: 'federationScopeMenu popovermenu bubble menu menu-center',
|
||||
field: undefined,
|
||||
_scopes: undefined,
|
||||
|
||||
|
|
@ -129,10 +129,6 @@
|
|||
break;
|
||||
}
|
||||
|
||||
var $el = $(context.target);
|
||||
var offsetIcon = $el.offset();
|
||||
var offsetHeading = $el.closest('h2').offset();
|
||||
|
||||
this.render();
|
||||
this.$el.removeClass('hidden');
|
||||
|
||||
|
|
|
|||
|
|
@ -62,14 +62,13 @@
|
|||
render: function() {
|
||||
var self = this;
|
||||
_.each(this._inputFields, function(field) {
|
||||
var $heading = self.$('#' + field + 'form h2');
|
||||
var $icon = self.$('#' + field + 'form h2 > span');
|
||||
var $icon = self.$('#' + field + 'form h2 > .federation-menu');
|
||||
var scopeMenu = new OC.Settings.FederationScopeMenu({field: field});
|
||||
|
||||
self.listenTo(scopeMenu, 'select:scope', function(scope) {
|
||||
self._onScopeChanged(field, scope);
|
||||
});
|
||||
$heading.append(scopeMenu.$el);
|
||||
$icon.append(scopeMenu.$el);
|
||||
$icon.on('click', _.bind(scopeMenu.show, scopeMenu));
|
||||
|
||||
// Restore initial state
|
||||
|
|
@ -190,7 +189,7 @@
|
|||
},
|
||||
|
||||
_setFieldScopeIcon: function(field, scope) {
|
||||
var $icon = this.$('#' + field + 'form > h2 > span');
|
||||
var $icon = this.$('#' + field + 'form > h2 .icon-federation-menu');
|
||||
|
||||
$icon.removeClass('icon-password');
|
||||
$icon.removeClass('icon-contacts-dark');
|
||||
|
|
|
|||
|
|
@ -42,9 +42,12 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<div>
|
||||
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
|
||||
<h2>
|
||||
<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<label><?php p($l->t('Profile picture')); ?></label>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="displayavatar">
|
||||
<div class="avatardiv"></div>
|
||||
|
|
@ -102,9 +105,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="displaynameform" class="section">
|
||||
<h2>
|
||||
<label for="displayname"><?php p($l->t('Full name')); ?></label>
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<input type="text" id="displayname" name="displayname"
|
||||
<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
|
||||
|
|
@ -124,9 +129,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="emailform" class="section">
|
||||
<h2>
|
||||
<label for="email"><?php p($l->t('Email')); ?></label>
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') p('hidden'); ?>">
|
||||
<img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src="
|
||||
|
|
@ -165,9 +172,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="phoneform" class="section">
|
||||
<h2>
|
||||
<label for="phone"><?php p($l->t('Phone number')); ?></label>
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
|
||||
value="<?php p($_['phone']) ?>"
|
||||
|
|
@ -185,9 +194,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="addressform" class="section">
|
||||
<h2>
|
||||
<label for="address"><?php p($l->t('Address')); ?></label>
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
|
||||
placeholder="<?php p($l->t('Your postal address')); ?>"
|
||||
|
|
@ -205,9 +216,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="websiteform" class="section">
|
||||
<h2>
|
||||
<label for="website"><?php p($l->t('Website')); ?></label>
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') p('hidden'); ?>">
|
||||
|
|
@ -252,9 +265,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="twitterform" class="section">
|
||||
<h2>
|
||||
<label for="twitter"><?php p($l->t('Twitter')); ?></label>
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
<div class="federation-menu">
|
||||
<span class="icon-federation-menu icon-password">
|
||||
<span class="icon-triangle-s"></span>
|
||||
</span>
|
||||
</div>
|
||||
</h2>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') p('hidden'); ?>">
|
||||
|
|
|
|||
Loading…
Reference in New Issue