diff options
| -rw-r--r-- | css/style.scss | 71 | ||||
| -rw-r--r-- | js/views/callinfoview.js | 8 | ||||
| -rw-r--r-- | js/views/templates.js | 44 | ||||
| -rw-r--r-- | js/views/templates/callinfoview.handlebars | 23 |
4 files changed, 91 insertions, 55 deletions
diff --git a/css/style.scss b/css/style.scss index 8b9779fe6..493f12761 100644 --- a/css/style.scss +++ b/css/style.scss @@ -937,6 +937,7 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g .call-controls-container { display: flex; + align-items: center; .call-button, .share-link-options { @@ -972,40 +973,32 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g } } + .room-moderation-button { + /* Needed for proper positioning of the menu. */ + position: relative; + } + + .share-link-options .button, + .room-moderation-button .button { + cursor: pointer; + width: 44px; + height: 44px; + display: block; + background-color: transparent; + border: none; + margin: 0; + opacity: .5; + + &:hover, + &:focus, + &:active { + opacity: 1; + } + } + .share-link-options { 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; - } - } - .button { - cursor: pointer; - width: 44px; - height: 44px; - display: block; - background-color: transparent; - border: none; - margin: 0; - opacity: .5; - &:hover, - &:focus, - &:active { - opacity: 1; - } - } .password-button { position: relative; @@ -1034,6 +1027,22 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g } } } + + /* 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; + } + } } /** diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 43071ecc7..0da9ff4ca 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -45,12 +45,14 @@ templateContext: function() { var canModerate = this._canModerate(); + var canFullModerate = this._canFullModerate(); 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'), + showRoomModerationMenu: canModerate && canFullModerate, canModerate: canModerate, - canFullModerate: this._canFullModerate(), + canFullModerate: canFullModerate, linkCheckboxLabel: t('spreed', 'Share link'), isPublic: this.model.get('type') === 3, passwordInputPlaceholder: this.model.get('hasPassword')? t('spreed', 'Change password'): t('spreed', 'Set password'), @@ -77,6 +79,9 @@ 'passwordConfirm': '.password-confirm', 'passwordLoading': '.password-loading', + 'roomModerationButton': '.room-moderation-button .button', + 'roomModerationMenu': '.room-moderation-button .menu', + 'menu': '.password-menu', }, @@ -205,6 +210,7 @@ $(self.ui.passwordInput).focus(); }); + OC.registerMenu(this.ui.roomModerationButton, this.ui.roomModerationMenu); }, _canModerate: function() { diff --git a/js/views/templates.js b/js/views/templates.js index 2ff1e34a0..426f116ff 100644 --- a/js/views/templates.js +++ b/js/views/templates.js @@ -48,38 +48,43 @@ templates['callinfoview'] = template({"1":function(container,depth0,helpers,part + alias4(((helper = (helper = helpers.fileLinkTitle || (depth0 != null ? depth0.fileLinkTitle : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"fileLinkTitle","hash":{},"data":data}) : helper))) + "\">\n <span class=\"icon icon-file\"></span>\n </a>\n"; },"3":function(container,depth0,helpers,partials,data) { - var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}); + var stack1; return " <div class=\"share-link-options\">\n" - + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.canFullModerate : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") - + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isPublic : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.isPublic : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + " </div>\n"; },"4":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}); - return " <input name=\"link-checkbox\" id=\"link-checkbox\" class=\"checkbox link-checkbox\" value=\"1\" " - + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isPublic : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") - + " type=\"checkbox\">\n <label for=\"link-checkbox\" class=\"link-checkbox-label\">" - + container.escapeExpression(((helper = (helper = helpers.linkCheckboxLabel || (depth0 != null ? depth0.linkCheckboxLabel : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"linkCheckboxLabel","hash":{},"data":data}) : helper))) - + "</label>\n"; -},"5":function(container,depth0,helpers,partials,data) { - return " checked=\"checked\""; -},"7":function(container,depth0,helpers,partials,data) { - var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}); - return " <div class=\"clipboard-button\"><button class=\"button icon-clippy\"></button></div>\n <div class=\"password-button\">\n <div class=\"menutoggle\"><button class=\"button " - + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasPassword : depth0),{"name":"if","hash":{},"fn":container.program(8, data, 0),"inverse":container.program(10, data, 0),"data":data})) != null ? stack1 : "") + + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasPassword : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.program(7, data, 0),"data":data})) != null ? stack1 : "") + "\"></button></div>\n <div class=\"popovermenu password-menu menu-right\">\n <ul>\n <li>\n <span class=\"menuitem " - + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasPassword : depth0),{"name":"if","hash":{},"fn":container.program(8, data, 0),"inverse":container.program(10, data, 0),"data":data})) != null ? stack1 : "") + + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasPassword : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.program(7, data, 0),"data":data})) != null ? stack1 : "") + " password-option\">\n <form class=\"password-form\">\n <input class=\"password-input\" maxlength=\"200\" type=\"password\"\n placeholder=\"" + container.escapeExpression(((helper = (helper = helpers.passwordInputPlaceholder || (depth0 != null ? depth0.passwordInputPlaceholder : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"passwordInputPlaceholder","hash":{},"data":data}) : helper))) + "\">\n <input type=\"submit\" value=\"\" autocomplete=\"new-password\" class=\"icon icon-confirm password-confirm\"></input>\n <span class=\"icon icon-loading-small password-loading hidden\"/>\n </form>\n </span>\n </li>\n </ul>\n </div>\n </div>\n"; -},"8":function(container,depth0,helpers,partials,data) { +},"5":function(container,depth0,helpers,partials,data) { return "icon-password"; -},"10":function(container,depth0,helpers,partials,data) { +},"7":function(container,depth0,helpers,partials,data) { return "icon-no-password"; -},"12":function(container,depth0,helpers,partials,data) { +},"9":function(container,depth0,helpers,partials,data) { return " <div class=\"share-link-options\">\n <div class=\"clipboard-button\"><button class=\"button icon-clippy\"></button></div>\n </div>\n"; +},"11":function(container,depth0,helpers,partials,data) { + var stack1; + + return " <div class=\"room-moderation-button\">\n <div class=\"menutoggle\">\n <button class=\"button icon-more\"></button>\n </div>\n <div class=\"popovermenu bubble menu\">\n <ul>\n" + + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.canFullModerate : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + + " </ul>\n </div>\n </div>\n"; +},"12":function(container,depth0,helpers,partials,data) { + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}); + + return " <li>\n <span class=\"menuitem\">\n <input name=\"link-checkbox\" id=\"link-checkbox\" class=\"checkbox link-checkbox\" value=\"1\" " + + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isPublic : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + + " type=\"checkbox\">\n <label for=\"link-checkbox\" class=\"link-checkbox-label\">" + + container.escapeExpression(((helper = (helper = helpers.linkCheckboxLabel || (depth0 != null ? depth0.linkCheckboxLabel : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"linkCheckboxLabel","hash":{},"data":data}) : helper))) + + "</label>\n </span>\n </li>\n"; +},"13":function(container,depth0,helpers,partials,data) { + return " checked=\"checked\""; },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}); @@ -87,7 +92,8 @@ templates['callinfoview'] = template({"1":function(container,depth0,helpers,part + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isRoomForFile : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + "</div>\n<div class=\"call-controls-container\">\n <div class=\"call-button\"></div>\n" + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.canModerate : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") - + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.showShareLink : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.showShareLink : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.showRoomModerationMenu : depth0),{"name":"if","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + "</div>\n"; },"useData":true}); templates['chatview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { diff --git a/js/views/templates/callinfoview.handlebars b/js/views/templates/callinfoview.handlebars index a4648ce64..6d9551207 100644 --- a/js/views/templates/callinfoview.handlebars +++ b/js/views/templates/callinfoview.handlebars @@ -10,10 +10,6 @@ <div class="call-button"></div> {{#if canModerate}} <div class="share-link-options"> - {{#if canFullModerate}} - <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">{{linkCheckboxLabel}}</label> - {{/if}} {{#if isPublic}} <div class="clipboard-button"><button class="button icon-clippy"></button></div> <div class="password-button"> @@ -41,4 +37,23 @@ <div class="clipboard-button"><button class="button icon-clippy"></button></div> </div> {{/if}} + {{#if showRoomModerationMenu}} + <div class="room-moderation-button"> + <div class="menutoggle"> + <button class="button icon-more"></button> + </div> + <div class="popovermenu bubble menu"> + <ul> + {{#if canFullModerate}} + <li> + <span class="menuitem"> + <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">{{linkCheckboxLabel}}</label> + </span> + </li> + {{/if}} + </ul> + </div> + </div> + {{/if}} </div> |