diff --git a/css/style.css b/css/style.css index c04facba049..336695ebea5 100644 --- a/css/style.css +++ b/css/style.css @@ -63,6 +63,7 @@ display: block !important; } +#participantTabView .avatar, #app-navigation .avatar, #app-navigation .icon-contacts-dark, #app-navigation .app-navigation-entry-link .icon-public { @@ -71,6 +72,7 @@ top: 6px; } +#participantTabView li > a:first-child img, #app-navigation li > a:first-child img { width: 32px !important; height: 32px !important; @@ -491,6 +493,7 @@ video { display: none; } +#participantTabView li > a, #app-navigation li > a { padding-right: 44px !important; } @@ -625,11 +628,70 @@ video { display: inline-block; } -#app-sidebar #shareWithList .participant-moderator-indicator { +#participantTabView .participant-moderator-indicator { opacity: .5; font-weight: 300; + padding-left: 5px; } -#app-sidebar #shareWithList .participant-offline { +#participantTabView .participant-offline { opacity: .5; } + +#participantTabView li { + position: relative; + width: 100%; + box-sizing: border-box; +} + +#participantTabView .with-icon a, #participantTabView a { + padding-left: 44px; + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; +} + +#participantTabView li > a { + display: block; + width: 100%; + line-height: 44px; + min-height: 44px; + padding: 0 12px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.57; +} + + + +/** + * App navigation utils, buttons and counters for drop down menu + */ +#participantTabView .participant-entry-utils { + position: absolute; + top: 0; + right: 0; + z-index: 105; +} + +#participantTabView .active > .participant-entry-utils li { + display: inline-block; +} + +#participantTabView .participant-entry-utils button { + height: 100%; + width: 100%; + margin: 0; + box-shadow: none; +} + +#participantTabView .participant-entry-utils-menu-button button { + border: 0; + opacity: .5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-image: url('../../../core/img/actions/more.svg?v=1'); +} diff --git a/js/views/participantview.js b/js/views/participantview.js index 899d3ef10c7..68b1984a769 100644 --- a/js/views/participantview.js +++ b/js/views/participantview.js @@ -29,43 +29,47 @@ var uiChannel = Backbone.Radio.channel('ui'); - var ITEM_TEMPLATE = '
  • ' + - '
    ' + - '' + - '{{displayName}}' + - '{{#if participantIsOwner}}(' + t('spreed', 'owner') + '){{/if}}' + + var ITEM_TEMPLATE = '' + + '' + + '
    ' + + ' {{displayName}}' + + '{{#if participantIsOwner}}(' + t('spreed', 'moderator') + '){{/if}}' + '{{#if participantIsModerator}}(' + t('spreed', 'moderator') + '){{/if}}' + - '    ' + + ''+ '{{#if canModerate}}' + - '' + - '' + - '
    ' + - '
    ' + + '{{/if}}'; OCA.SpreedMe.Views.ParticipantView = Marionette.CollectionView.extend({ tagName: 'ul', @@ -92,7 +96,7 @@ if (!this.$el.is(target.closest('.participant'))) { // Click was not triggered by this element -> close menu this.menuShown = false; - //this.toggleMenuClass(); + this.toggleMenuClass(); } }); }, @@ -116,16 +120,25 @@ element.avatar(element.data('user-id'), 32); } }); + + this.$el.attr('data-session-id', this.model.get('sessionId')); + this.$el.attr('data-participant', this.model.get('userId')); + this.$el.addClass('participant'); + if (this.model.get('pariticipantIsOffline')) { + this.$el.addClass('participant-offline'); + } + + this.toggleMenuClass(); }, events: { - 'click .actionOptionsGroup .icon-more': 'toggleMenu', - 'click .actionOptionsGroup .action-promote': 'promoteToModerator', - 'click .actionOptionsGroup .action-demote': 'demoteFromModerator', - 'click .actionOptionsGroup .action-remove': 'removeParticipant' + 'click .participant-entry-utils-menu-button button': 'toggleMenu', + 'click .popovermenu .promote-moderator': 'promoteToModerator', + 'click .popovermenu .demote-moderator': 'demoteFromModerator', + 'click .popovermenu .remove-participant': 'removeParticipant' }, ui: { 'participant': 'li.participant', - 'menu': 'li.participant .actionOptionsGroup .menu' + 'menu': '.popovermenu' }, template: Handlebars.compile(ITEM_TEMPLATE), menuShown: false, @@ -135,8 +148,6 @@ this.toggleMenuClass(); }, toggleMenuClass: function() { - console.log(this.ui.participant.data('participant')); - console.log(this.menuShown); this.ui.menu.toggleClass('open', this.menuShown); }, promoteToModerator: function() { diff --git a/templates/index.php b/templates/index.php index 8cd0ff4e26d..465c0af51dd 100644 --- a/templates/index.php +++ b/templates/index.php @@ -58,62 +58,7 @@
    -
      -
    • -
      U
      - - User One - (moderator) - - - - - - - -
      • -
    • -
      U
      - - User Two - - - - - - - -
      • +