diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less index b1e6f105bf16e..8a7d01859a6ac 100644 --- a/client/stylesheets/base.less +++ b/client/stylesheets/base.less @@ -6,7 +6,7 @@ @import url(http://fonts.googleapis.com/css?family=Muli:400,300,500); @footer-min-height: 70px; @header-min-height: 60px; -@rooms-box-width: 220px; +@rooms-box-width: 260px; @primary-background-color: #0b1628; @secondary-background-color: #F4F4F4; @tertiary-background-color: #E9E9E9; @@ -993,6 +993,78 @@ a.github-fork { direction: ltr; padding-left: 8px; } + .nav-flex { + background-color: lighten(@primary-background-color, 15%); + position: fixed; + top: 0; + left: 0; + z-index: 1000; + // padding-top: 15px; + width: @rooms-box-width; + // .calc(width, @rooms-box-width ~' - 10px'); + .calc(height, ~'100% - ' @footer-min-height); + .transition(transform .3s cubic-bezier(.5, 0, .1, 1)); + &._hidden { + .transform(translateX(-100%)); + } + &.private-group-flex { + // background-color: #FFFFFF; + } + .close-nav-flex { + background-color: transparent; + border: none; + float: right; + color: #FFFFFF; + cursor: pointer; + line-height: @header-min-height; + } + h4 { + color: #FFFFFF; + text-align: center; + line-height: @header-min-height; + background-color: lighten(@primary-background-color, 10%); + } + .wrapper { + padding: 1em; + + label { + color: #FFFFFF; + margin-top: 1em; + display: inline-block; + } + + .selected-users { + min-height: 1em; + li { + background-color: #FFF; + display: inline-block; + border-radius: 3px; + padding: 4px; + margin: 1px 0; + i { + color: #000000; + cursor: pointer; + } + } + } + + .buttons { + text-align: center; + margin-top: 1em; + } + } + } + h3 { + &.add-room { + &:hover { + color: #AAA; + } + i { + float: right; + margin-right: 0.5em; + } + } + } } .header { position: absolute; diff --git a/client/views/app/asideNav/channels.coffee b/client/views/app/asideNav/channels.coffee new file mode 100644 index 0000000000000..1ddb1b990a735 --- /dev/null +++ b/client/views/app/asideNav/channels.coffee @@ -0,0 +1,89 @@ +Template.channels.helpers + tRoomMembers: -> + return t('chatRooms.Members_placeholder') + + rooms: -> + return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['c']}, f: { $ne: true } }, { sort: 'rn': 1 } + + selectedUsers: -> + return Template.instance().selectedUsers.get() + + name: -> + return Template.instance().selectedUserNames[this.valueOf()] + + autocompleteSettings: -> + return { + limit: 10 + # inputDelay: 300 + rules: [ + { + # @TODO maybe change this 'collection' and/or template + collection: 'UserAndRoom' + subscription: 'roomSearch' + field: 'name' + template: Template.roomSearch + noMatchTemplate: Template.roomSearchEmpty + matchAll: true + filter: + type: 'u' + $and: [ + { _id: { $ne: Meteor.userId() } } + { _id: { $nin: Template.instance().selectedUsers.get() } } + ] + sort: 'name' + } + ] + } + +Template.channels.events + 'click .add-room': (e, instance) -> + $('.channel-flex').removeClass('_hidden') + + instance.clearForm() + $('#channel-name').focus() + + 'click .close-nav-flex': -> + $('.channel-flex').addClass('_hidden') + + 'autocompleteselect #channel-members': (event, instance, doc) -> + instance.selectedUsers.set instance.selectedUsers.get().concat doc._id + + instance.selectedUserNames[doc._id] = doc.name + + event.currentTarget.value = '' + event.currentTarget.focus() + + 'click .remove-room-member': (e, instance) -> + self = @ + + users = Template.instance().selectedUsers.get() + users = _.reject Template.instance().selectedUsers.get(), (_id) -> + return _id is self.valueOf() + + Template.instance().selectedUsers.set(users) + + $('#channel-members').focus() + + 'click .cancel-channel': (e, instance) -> + $('.channel-flex').addClass('_hidden') + + 'click .save-channel': (e, instance) -> + Meteor.call 'createChannel', instance.find('#channel-name').value, instance.selectedUsers.get(), (err, result) -> + if err + return toastr.error err.reason + + $('.channel-flex').addClass('_hidden') + + instance.clearForm() + + Router.go 'room', { _id: result.rid } + +Template.channels.onCreated -> + instance = this + instance.selectedUsers = new ReactiveVar [] + instance.selectedUserNames = {} + + instance.clearForm = -> + instance.selectedUsers.set([]) + instance.find('#channel-name').value = '' + instance.find('#channel-members').value = '' diff --git a/client/views/app/asideNav/channels.html b/client/views/app/asideNav/channels.html new file mode 100644 index 0000000000000..dc940455d3152 --- /dev/null +++ b/client/views/app/asideNav/channels.html @@ -0,0 +1,37 @@ + diff --git a/client/views/app/asideNav/chatRoomItem.coffee b/client/views/app/asideNav/chatRoomItem.coffee index c79899370f51f..f327b2ba53b89 100644 --- a/client/views/app/asideNav/chatRoomItem.coffee +++ b/client/views/app/asideNav/chatRoomItem.coffee @@ -21,7 +21,8 @@ Template.chatRoomItem.helpers roomIcon: -> switch this.t when 'd' then return 'icon-at' - when 'g' then return 'icon-hash' + when 'c' then return 'icon-hash' + when 'p' then return 'icon-lock' active: -> return 'active' if Router.current().params._id? and Router.current().params._id is this.rid diff --git a/client/views/app/asideNav/chatRoomItem.html b/client/views/app/asideNav/chatRoomItem.html index 348ef065994bb..75931d6fcc80d 100644 --- a/client/views/app/asideNav/chatRoomItem.html +++ b/client/views/app/asideNav/chatRoomItem.html @@ -7,7 +7,7 @@ {{name}} - + {{!-- --}} {{#if canLeave}} {{/if}} diff --git a/client/views/app/asideNav/chatRooms.coffee b/client/views/app/asideNav/chatRooms.coffee deleted file mode 100644 index 17b1e2ce6688d..0000000000000 --- a/client/views/app/asideNav/chatRooms.coffee +++ /dev/null @@ -1,26 +0,0 @@ -Template.chatRooms.helpers - roomData: -> - return Session.get('roomData' + this.rid) - - recentRooms: -> - filter = - uid: Meteor.userId() - t: { $in: ['d', 'g'] } - f: { $not: true } - $or: [ - { unread: { $gte: 1 } } - { ts: { $gte: moment().subtract(1, 'days').startOf('day').toDate() } } - ] - return ChatSubscription.find filter, { sort: 'rn': 1 } - - favoriteRooms: -> - return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['d', 'g']}, f: true }, { sort: 'rn': 1 } - -Template.chatRooms.events - - "click .rooms-box h3": (event)-> - ul = $(event.currentTarget).next('ul') - if ul.is(":visible") then ul.hide() else ul.show() - - "click .rooms-box a": -> - $("#rocket-chat").addClass("menu-closed").removeClass("menu-opened") diff --git a/client/views/app/asideNav/directMessages.coffee b/client/views/app/asideNav/directMessages.coffee new file mode 100644 index 0000000000000..94cb6bf4bb51c --- /dev/null +++ b/client/views/app/asideNav/directMessages.coffee @@ -0,0 +1,3 @@ +Template.directMessages.helpers + rooms: -> + return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['d']}, f: { $ne: true } }, { sort: 'rn': 1 } diff --git a/client/views/app/asideNav/directMessages.html b/client/views/app/asideNav/directMessages.html new file mode 100644 index 0000000000000..1f6ce4722ca95 --- /dev/null +++ b/client/views/app/asideNav/directMessages.html @@ -0,0 +1,12 @@ + diff --git a/client/views/app/asideNav/privateGroups.coffee b/client/views/app/asideNav/privateGroups.coffee new file mode 100644 index 0000000000000..750fb60c8cf87 --- /dev/null +++ b/client/views/app/asideNav/privateGroups.coffee @@ -0,0 +1,89 @@ +Template.privateGroups.helpers + tRoomMembers: -> + return t('chatRooms.Members_placeholder') + + rooms: -> + return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['p']}, f: { $ne: true } }, { sort: 'rn': 1 } + + selectedUsers: -> + return Template.instance().selectedUsers.get() + + name: -> + return Template.instance().selectedUserNames[this.valueOf()] + + autocompleteSettings: -> + return { + limit: 10 + # inputDelay: 300 + rules: [ + { + # @TODO maybe change this 'collection' and/or template + collection: 'UserAndRoom' + subscription: 'roomSearch' + field: 'name' + template: Template.roomSearch + noMatchTemplate: Template.roomSearchEmpty + matchAll: true + filter: + type: 'u' + $and: [ + { _id: { $ne: Meteor.userId() } } + { _id: { $nin: Template.instance().selectedUsers.get() } } + ] + sort: 'name' + } + ] + } + +Template.privateGroups.events + 'click .add-room': (e, instance) -> + $('.private-group-flex').removeClass('_hidden') + + instance.clearForm() + $('#pvt-group-name').focus() + + 'click .close-nav-flex': -> + $('.private-group-flex').addClass('_hidden') + + 'autocompleteselect #pvt-group-members': (event, instance, doc) -> + instance.selectedUsers.set instance.selectedUsers.get().concat doc._id + + instance.selectedUserNames[doc._id] = doc.name + + event.currentTarget.value = '' + event.currentTarget.focus() + + 'click .remove-room-member': (e, instance) -> + self = @ + + users = Template.instance().selectedUsers.get() + users = _.reject Template.instance().selectedUsers.get(), (_id) -> + return _id is self.valueOf() + + Template.instance().selectedUsers.set(users) + + $('#pvt-group-members').focus() + + 'click .cancel-pvt-group': (e, instance) -> + $('.private-group-flex').addClass('_hidden') + + 'click .save-pvt-group': (e, instance) -> + Meteor.call 'createPrivateGroup', instance.find('#pvt-group-name').value, instance.selectedUsers.get(), (err, result) -> + if err + return toastr.error err.reason + + $('.private-group-flex').addClass('_hidden') + + instance.clearForm() + + Router.go 'room', { _id: result.rid } + +Template.privateGroups.onCreated -> + instance = this + instance.selectedUsers = new ReactiveVar [] + instance.selectedUserNames = {} + + instance.clearForm = -> + instance.selectedUsers.set([]) + instance.find('#pvt-group-name').value = '' + instance.find('#pvt-group-members').value = '' diff --git a/client/views/app/asideNav/privateGroups.html b/client/views/app/asideNav/privateGroups.html new file mode 100644 index 0000000000000..35d20188361e8 --- /dev/null +++ b/client/views/app/asideNav/privateGroups.html @@ -0,0 +1,37 @@ + diff --git a/client/views/app/asideNav/chatRooms.html b/client/views/app/asideNav/sideNav.html similarity index 50% rename from client/views/app/asideNav/chatRooms.html rename to client/views/app/asideNav/sideNav.html index e6649da0d3c87..27787ccec2320 100644 --- a/client/views/app/asideNav/chatRooms.html +++ b/client/views/app/asideNav/sideNav.html @@ -1,4 +1,4 @@ -