зеркало из https://github.com/nextcloud/spreed.git
Fixed popover style and fit guidelines
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
Родитель
0aac0521f1
Коммит
1064a3b394
|
|
@ -114,28 +114,11 @@
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.password-input,
|
||||
.editable-text-label input {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.icon-confirm.password-confirm,
|
||||
.icon-confirm.confirm-button {
|
||||
background-size: 16px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
padding: 16px;
|
||||
opacity: .5;
|
||||
}
|
||||
.icon-confirm.password-confirm:hover,
|
||||
.icon-confirm.confirm-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-clippy.public-room {
|
||||
background-position-y: 8px !important;
|
||||
}
|
||||
|
|
@ -805,8 +788,7 @@ video {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.tabHeaders,
|
||||
#app-sidebar .icon {
|
||||
.tabHeaders {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -909,54 +891,40 @@ video {
|
|||
* Sidebar details view
|
||||
*/
|
||||
|
||||
.detailCallInfoContainer .room-name {
|
||||
display: inline-block;
|
||||
.detailCallInfoContainer {
|
||||
.room-name {
|
||||
display: inline-block;
|
||||
}
|
||||
.guest-name p {
|
||||
display: inline-block;
|
||||
padding: 9px 0;
|
||||
}
|
||||
.editable-text-label {
|
||||
.edit-button {
|
||||
display: none;
|
||||
}
|
||||
&:hover .edit-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.share-link-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.link-checkbox-label {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.button {
|
||||
cursor: pointer;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: block;
|
||||
}
|
||||
.password-button {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailCallInfoContainer h3,
|
||||
.detailCallInfoContainer .guest-name p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer .guest-name p {
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer .editable-text-label .edit-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer .clipboard-button,
|
||||
.detailCallInfoContainer .password-button,
|
||||
.detailCallInfoContainer .editable-text-label:hover .edit-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer .clipboard-button .icon,
|
||||
.detailCallInfoContainer .password-button .icon,
|
||||
.detailCallInfoContainer .editable-text-label .edit-button .icon {
|
||||
cursor: pointer;
|
||||
padding: 22px;
|
||||
vertical-align: middle;
|
||||
margin-left: -5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer .editable-text-label .input-wrapper,
|
||||
.detailCallInfoContainer .password-option {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer .editable-text-label input,
|
||||
.detailCallInfoContainer .password-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detailCallInfoContainer #link-checkbox+label {
|
||||
display: inline-block;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cascade parent element height to the chat view in the sidebar to limit the
|
||||
|
|
|
|||
|
|
@ -49,23 +49,27 @@
|
|||
'{{/if}}' +
|
||||
'{{#if canModerate}}' +
|
||||
' <div class="share-link-options">' +
|
||||
' <input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
|
||||
' <label for="link-checkbox">' + t('spreed', 'Share link') + '</label>' +
|
||||
' {{#if isPublic}}' +
|
||||
' <div class="clipboard-button"><span class="icon icon-clippy"></span></div>' +
|
||||
' <div class="app-navigation-entry-utils password-button"><span class="icon {{#if hasPassword}}icon-password"{{else}}icon-no-password{{/if}}"></span></div>' +
|
||||
' <div class="app-navigation-entry-menu">' +
|
||||
' <ul class="app-navigation-entry-menu-list">' +
|
||||
' <li>' +
|
||||
' <div class="password-option">' +
|
||||
' <input class="password-input" maxlength="200" type="password"' +
|
||||
' placeholder="{{#if hasPassword}}' + t('spreed', 'Change password') + '{{else}}' + t('spreed', 'Set password') + '{{/if}}">'+
|
||||
' <div class="icon icon-confirm password-confirm"></div>'+
|
||||
' </div>' +
|
||||
' </li>' +
|
||||
' </ul>' +
|
||||
' <div class="clipboard-button"><span class="button icon-clippy"></span></div>' +
|
||||
' <div class="password-button">' +
|
||||
' <span class="button {{#if hasPassword}}icon-password"{{else}}icon-no-password{{/if}}"></span>' +
|
||||
' <div class="popovermenu password-menu menu-left">' +
|
||||
' <ul>' +
|
||||
' <li>' +
|
||||
' <span class="menuitem icon-triangle-e password-option">' +
|
||||
' <form class="password-form">' +
|
||||
' <input class="password-input" required maxlength="200" type="password"' +
|
||||
' placeholder="{{#if hasPassword}}' + t('spreed', 'Change password') + '{{else}}' + t('spreed', 'Set password') + '{{/if}}">'+
|
||||
' <input type="submit" value="" class="icon icon-confirm password-confirm"></input>'+
|
||||
' </form>' +
|
||||
' </span>' +
|
||||
' </li>' +
|
||||
' </ul>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' {{/if}}' +
|
||||
' <input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
|
||||
' <label for="link-checkbox" class="link-checkbox-label">' + t('spreed', 'Share link') + '</label>' +
|
||||
' </div>' +
|
||||
'{{/if}}';
|
||||
|
||||
|
|
@ -98,12 +102,14 @@
|
|||
'joinCallButton': 'button.join-call',
|
||||
'leaveCallButton': 'button.leave-call',
|
||||
|
||||
'passwordButton': '.password-button',
|
||||
'passwordButton': '.password-button .button',
|
||||
'passwordForm': '.password-form',
|
||||
'passwordMenu': '.password-menu',
|
||||
'passwordOption': '.password-option',
|
||||
'passwordInput': '.password-input',
|
||||
'passwordConfirm': '.password-confirm',
|
||||
|
||||
'menu': '.app-navigation-entry-menu',
|
||||
'menu': '.password-menu',
|
||||
},
|
||||
|
||||
regions: {
|
||||
|
|
@ -117,10 +123,9 @@
|
|||
'keyup @ui.passwordInput': 'keyUpPassword',
|
||||
'click @ui.passwordButton': 'showPasswordInput',
|
||||
'click @ui.passwordConfirm': 'confirmPassword',
|
||||
'submit @ui.passwordForm': 'confirmPassword',
|
||||
'click @ui.joinCallButton': 'joinCall',
|
||||
'click @ui.leaveCallButton': 'leaveCall',
|
||||
|
||||
'click .password-button': 'toggleMenu'
|
||||
},
|
||||
|
||||
modelEvents: {
|
||||
|
|
@ -180,29 +185,6 @@
|
|||
buttonTitle: t('spreed', 'Rename')
|
||||
});
|
||||
|
||||
this.listenTo(uiChannel, 'document:click', function(event) {
|
||||
var target = $(event.target);
|
||||
if (!this.ui.shareLinkOptions.is(target.closest('.share-link-options'))) {
|
||||
// Click was not triggered by this element -> close menu
|
||||
this.menuShown = false;
|
||||
this.toggleMenuClass();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
menuShown: false,
|
||||
|
||||
toggleMenu: function(e) {
|
||||
e.preventDefault();
|
||||
this.menuShown = !this.menuShown;
|
||||
this.toggleMenuClass();
|
||||
},
|
||||
|
||||
toggleMenuClass: function() {
|
||||
this.ui.menu.toggleClass('open', this.menuShown);
|
||||
if (this.menuShown) {
|
||||
this.ui.passwordInput.focus();
|
||||
}
|
||||
},
|
||||
|
||||
renderWhenInactive: function() {
|
||||
|
|
@ -257,7 +239,11 @@
|
|||
title: (this.model.get('hasPassword')) ? t('spreed', 'Change password') : t('spreed', 'Set password')
|
||||
});
|
||||
|
||||
this.toggleMenuClass();
|
||||
var self = this;
|
||||
OC.registerMenu($(this.ui.passwordButton), $(this.ui.passwordMenu), function() {
|
||||
$(self.ui.passwordInput).focus();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
_canModerate: function() {
|
||||
|
|
@ -313,7 +299,8 @@
|
|||
/**
|
||||
* Password
|
||||
*/
|
||||
confirmPassword: function() {
|
||||
confirmPassword: function(event) {
|
||||
event.preventDefault();
|
||||
var newPassword = this.ui.passwordInput.val().trim();
|
||||
$.ajax({
|
||||
url: OC.linkToOCS('apps/spreed/api/v1/room', 2) + this.model.get('token') + '/password',
|
||||
|
|
@ -323,8 +310,7 @@
|
|||
},
|
||||
success: function() {
|
||||
this.ui.passwordInput.val('');
|
||||
this.menuShown = false;
|
||||
this.toggleMenuClass();
|
||||
OC.hideMenus();
|
||||
OCA.SpreedMe.app.syncRooms();
|
||||
}.bind(this),
|
||||
error: function() {
|
||||
|
|
@ -334,13 +320,13 @@
|
|||
},
|
||||
|
||||
keyUpPassword: function(e) {
|
||||
e.preventDefault();
|
||||
if (e.keyCode === 13) {
|
||||
// Enter
|
||||
this.confirmPassword();
|
||||
this.confirmPassword(e);
|
||||
} else if (e.keyCode === 27) {
|
||||
// ESC
|
||||
this.menuShown = false;
|
||||
this.toggleMenuClass();
|
||||
OC.hideMenus();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче