Skip to content

Move room moderation actions to a menu #2123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nickvergessen merged 9 commits into from
Aug 28, 2019
Merged

Move room moderation actions to a menu #2123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2683811
Move checkbox to change between public and group room to a menu
danxuliu Aug 25, 2019
452a46f
Remove unused UI locators
danxuliu Aug 25, 2019
039a0e8
Do not defer rendering CallInfoView again until the menu is inactive
danxuliu Aug 25, 2019
7a2e195
Move password from its own menu to the room moderation menu
danxuliu Aug 25, 2019
7dc9653
Reorder flex CSS rules for call button
danxuliu Aug 25, 2019
4425b04
Unify "Copy link" button for all participant types
danxuliu Aug 25, 2019
7dec802
Remove no longer needed parent element of "Copy link" button
danxuliu Aug 25, 2019
b88d53d
Remove unneeded CSS rules
danxuliu Aug 26, 2019
3e3506b
Replace "Copy link" tooltip with explicit label
danxuliu Aug 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 112 additions & 57 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,15 +937,11 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g

.call-controls-container {
display: flex;

.call-button,
.share-link-options {
flex-grow: 1;
flex-basis: 50%;
}
align-items: center;

.call-button {
flex-grow: 0;
flex-basis: 50%;

.join-call,
.leave-call {
Expand All @@ -972,68 +968,127 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g
}
}

.share-link-options {
.room-moderation-button {
/* Needed for proper positioning of the menu. */
position: relative;

/* Position the button to the right end of its flex parent. */
margin-left: auto;
}

.clipboard-button button {
display: flex;
align-items: center;
.link-checkbox-label {
white-space: nowrap;
padding: 12px;

/* If ".icon-loading-small" is set hide the checkbox and show a
* loading icon instead */
&.icon-loading-small:before {
background-image: none !important;
background-color: transparent !important;
border-color: transparent !important;
}
&.icon-loading-small:after {
top: 21px;
left: 23px;

> span {
cursor: pointer;

/* Override reduced opacity set for button icons in server, as the
* button is already dimmed. */
opacity: 1;
}

/* Override appearance set for button text in server, as this button has
* no background. */
padding: 0;

> span {
color: var(--color-main-text);
font-weight: normal;
}
}

.clipboard-button button,
.room-moderation-button .button {
background-color: transparent;
border: none;
margin: 0;
opacity: .5;

&:hover,
&:focus,
&:active {
opacity: 1;
}
}

.clipboard-button .icon,
.room-moderation-button .button {
width: 44px;
height: 44px;
}

.room-moderation-button .menu {
/* Values copied from apps.scss in server. */
$popoveritem-height: 44px;
$popovericon-size: 16px;
$outter-margin: ($popoveritem-height - $popovericon-size) / 2;

/* The server sets a top/bottom margin to forms and inputs of the
* first/last item in a menu, but that misaligns the left icon; this
* sets the top/bottom margin to the whole item instead of only to the
* forms or inputs. */
li:first-of-type {
> .menuitem.password-option {

margin-top: $outter-margin - 2px; // minus the input margin

> form, > input {
margin-top: 0;
}
}
}
.button {
cursor: pointer;
width: 44px;
height: 44px;
display: block;
background-color: transparent;
border: none;
margin: 0;
opacity: .5;
&:hover,
&:focus,
&:active {
opacity: 1;
li:last-of-type {
> .menuitem.password-option {

margin-bottom: $outter-margin - 2px; // minus the input margin

> form, > input {
margin-bottom: 0;
}
}
}
.password-button {
position: relative;

.menuitem {
/* Override rule for menu items from server, as in this case
* only the button in the password field is clickable, so the
* pointer cursor should not be used for the whole item. */
cursor: default;

.password-form {
position: relative;

.password-confirm,
.password-loading {
/* Inputs in menu items do not have a right margin, so
* it does not need to be compensated. */
right: 0;
}

.password-confirm {
/* Needed to override an important rule set in the
* server. */
background-color: transparent !important;
}
.menuitem.password-option {
/* Override rule for menu items from server, as in this case
* only the button in the password field is clickable, so the
* pointer cursor should not be used for the whole item. */
cursor: default;

.password-form {
position: relative;

.password-confirm,
.password-loading {
/* Inputs in menu items do not have a right margin, so
* it does not need to be compensated. */
right: 0;
}

.password-confirm {
/* Needed to override an important rule set in the
* server. */
background-color: transparent !important;
}
}
}
}

/* The specific locator is needed to have higher priority than other
* important rules set in the server. */
input.checkbox + label.link-checkbox-label {
/* If ".icon-loading-small" is set hide the checkbox and show a
* loading icon instead. */
&.icon-loading-small:before {
background-image: none !important;
background-color: transparent !important;
border-color: transparent !important;
}
&.icon-loading-small:after {
top: 22px;
left: 21px;
}
}
}

/**
Expand Down
66 changes: 16 additions & 50 deletions js/views/callinfoview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,39 +45,38 @@

templateContext: function() {
var canModerate = this._canModerate();
var canFullModerate = this._canFullModerate();
var isPublic = this.model.get('type') === OCA.SpreedMe.app.ROOM_TYPE_PUBLIC;
return $.extend(this.model.toJSON(), {
isRoomForFile: this.model.get('objectType') === 'file',
fileLink: OC.generateUrl('/f/{fileId}', { fileId: this.model.get('objectId') }),
fileLinkTitle: t('spreed', 'Go to file'),
canModerate: canModerate,
canFullModerate: this._canFullModerate(),
showRoomModerationMenu: canModerate && (canFullModerate || isPublic),
canFullModerate: canFullModerate,
linkCheckboxLabel: t('spreed', 'Share link'),
isPublic: this.model.get('type') === 3,
copyLinkLabel: t('spreed', 'Copy link'),
isPublic: isPublic,
passwordInputPlaceholder: this.model.get('hasPassword')? t('spreed', 'Change password'): t('spreed', 'Set password'),
showShareLink: !canModerate && this.model.get('type') === 3,
isDeletable: canModerate && (Object.keys(this.model.get('participants')).length > 2 || this.model.get('numGuests') > 0)
});
},

ui: {
'roomName': 'div.room-name',
'fileLink': '.file-link',
'shareLinkOptions': '.share-link-options',
'clipboardButton': '.clipboard-button',
'linkCheckbox': '.link-checkbox',
'linkCheckboxLabel': '.link-checkbox-label',

'callButton': 'div.call-button',

'passwordButton': '.password-button .button',
'passwordForm': '.password-form',
'passwordMenu': '.password-menu',
'passwordOption': '.password-option',
'passwordInput': '.password-input',
'passwordConfirm': '.password-confirm',
'passwordLoading': '.password-loading',

'menu': '.password-menu',
'roomModerationButton': '.room-moderation-button .button',
'roomModerationMenu': '.room-moderation-button .menu',
},

regions: {
Expand All @@ -88,14 +87,13 @@
events: {
'change @ui.linkCheckbox': 'toggleLinkCheckbox',

'keyup @ui.passwordInput': 'keyUpPassword',
'click @ui.passwordConfirm': 'confirmPassword',
'submit @ui.passwordForm': 'confirmPassword',
},

modelEvents: {
'change:hasPassword': function() {
this.renderWhenInactive();
this.render();
},
'change:participantType': function() {
this._updateNameEditability();
Expand All @@ -107,7 +105,7 @@
'change:type': function() {
this._updateNameEditability();

this.renderWhenInactive();
this.render();
}
},

Expand Down Expand Up @@ -144,15 +142,6 @@
this._updateNameEditability();
},

renderWhenInactive: function() {
if (!OC._currentMenu || !OC._currentMenu.hasClass('password-menu') || this.ui.passwordInput.length === 0 || this.ui.passwordInput.val() === '') {
this.render();
return;
}

this.renderTimeout = setTimeout(_.bind(this.renderWhenInactive, this), 500);
},

onBeforeRender: function() {
// During the rendering the regions of this view are reset, which
// destroys its child views. If a child view has to be detached
Expand Down Expand Up @@ -185,26 +174,16 @@
this.ui.clipboardButton.attr('data-clipboard-text', completeURL);
this.ui.clipboardButton.tooltip({
placement: 'bottom',
trigger: 'hover',
title: t('spreed', 'Copy link')
trigger: 'manual',
title: t('core', 'Link copied!')
});
this.initClipboard();

this.ui.passwordButton.tooltip({
placement: 'bottom',
trigger: 'hover',
title: (this.model.get('hasPassword')) ? t('spreed', 'Change password') : t('spreed', 'Set password')
});

// Set the body as the container to show the tooltip in front of the
// header.
this.ui.fileLink.tooltip({container: $('body')});

var self = this;
OC.registerMenu($(this.ui.passwordButton), $(this.ui.passwordMenu), function() {
$(self.ui.passwordInput).focus();
});

OC.registerMenu(this.ui.roomModerationButton, this.ui.roomModerationMenu);
},

_canModerate: function() {
Expand Down Expand Up @@ -295,7 +274,7 @@
this.ui.passwordInput.val('');
restoreState();
OC.hideMenus();
this.ui.passwordButton.focus();
this.ui.roomModerationButton.focus();
}.bind(this),
error: function() {
restoreState();
Expand All @@ -305,15 +284,6 @@
});
},

keyUpPassword: function(e) {
e.preventDefault();
if (e.keyCode === 27) {
// ESC
OC.hideMenus();
this.ui.passwordButton.focus();
}
},

/**
* Clipboard
*/
Expand All @@ -336,9 +306,7 @@
.tooltip({placement: 'bottom', trigger: 'manual'})
.tooltip('show');
_.delay(function() {
$input.tooltip('hide')
.attr('data-original-title', t('core', 'Copy link'))
.tooltip('_fixTitle');
$input.tooltip('hide');
}, 3000);
});
this._clipboard.on('error', function (e) {
Expand All @@ -358,9 +326,7 @@
.tooltip({placement: 'bottom', trigger: 'manual'})
.tooltip('show');
_.delay(function () {
$input.tooltip('hide')
.attr('data-original-title', t('spreed', 'Copy link'))
.tooltip('_fixTitle');
$input.tooltip('hide');
}, 3000);
});
}
Expand Down
Loading