From 8102ceae6fee13b5292f51863cd29c7a776470da Mon Sep 17 00:00:00 2001 From: Diego Sampaio Date: Wed, 27 May 2015 00:40:50 -0300 Subject: [PATCH 1/7] new room types --- client/stylesheets/base.less | 76 ++++++++++++++++++- client/views/app/asideNav/channels.html | 6 ++ client/views/app/asideNav/directMessages.html | 6 ++ .../views/app/asideNav/privateGroups.coffee | 71 +++++++++++++++++ client/views/app/asideNav/privateGroups.html | 39 ++++++++++ .../asideNav/{chatRooms.html => sideNav.html} | 22 ++---- client/views/app/asideNav/starredRooms.html | 9 +++ client/views/app/layout.html | 2 +- i18n/en.i18n.json | 5 +- 9 files changed, 219 insertions(+), 17 deletions(-) create mode 100644 client/views/app/asideNav/channels.html create mode 100644 client/views/app/asideNav/directMessages.html create mode 100644 client/views/app/asideNav/privateGroups.coffee create mode 100644 client/views/app/asideNav/privateGroups.html rename client/views/app/asideNav/{chatRooms.html => sideNav.html} (50%) create mode 100644 client/views/app/asideNav/starredRooms.html diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less index 042dfd5ebafba..930564dd40db6 100644 --- a/client/stylesheets/base.less +++ b/client/stylesheets/base.less @@ -7,7 +7,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; @@ -992,6 +992,80 @@ 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: 5px; + padding: 4px; + float: left; + margin-right: 4px; + i { + color: #000000; + cursor: pointer; + } + } + } + + .buttons { + text-align: center; + margin-top: 2em; + } + } + } + h3 { + button.add-room { + background-color: transparent; + border: none; + float: right; + color: #666; + + i:hover { + color: #CCC; + } + } + } } .header { position: absolute; diff --git a/client/views/app/asideNav/channels.html b/client/views/app/asideNav/channels.html new file mode 100644 index 0000000000000..d1be3a16ede9f --- /dev/null +++ b/client/views/app/asideNav/channels.html @@ -0,0 +1,6 @@ + diff --git a/client/views/app/asideNav/directMessages.html b/client/views/app/asideNav/directMessages.html new file mode 100644 index 0000000000000..924e51dfa39d4 --- /dev/null +++ b/client/views/app/asideNav/directMessages.html @@ -0,0 +1,6 @@ + diff --git a/client/views/app/asideNav/privateGroups.coffee b/client/views/app/asideNav/privateGroups.coffee new file mode 100644 index 0000000000000..f2b0a139c00af --- /dev/null +++ b/client/views/app/asideNav/privateGroups.coffee @@ -0,0 +1,71 @@ +Template.privateGroups.helpers + tRoomMembers: -> + 'User' + + selectedUsers: -> + console.log 'selected ->',Template.instance().selectedUsers.get() + return Template.instance().selectedUsers.get() + + name: -> + console.log 'dado ->',this.valueOf() + return Template.instance().selectedUserNames[this.valueOf()] + + autocompleteSettingsRoomSearch: -> + console.log 'nin ->',Template.instance().selectedUsers.get() + return { + limit: 10 + # inputDelay: 300 + rules: [ + { + 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) -> + instance.selectedUsers.set([]) + + $('.private-group-flex').removeClass('_hidden') + + $('#pvt-room-name').focus() + + 'click .close-nav-flex': -> + $('.private-group-flex').addClass('_hidden') + + 'autocompleteselect #pvt-room-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() + + console.log doc, instance.selectedUsers.get() + + '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-room-members').focus() + +Template.privateGroups.onCreated -> + this.selectedUsers = new ReactiveVar [] + this.selectedUserNames = {} diff --git a/client/views/app/asideNav/privateGroups.html b/client/views/app/asideNav/privateGroups.html new file mode 100644 index 0000000000000..5266119eb5909 --- /dev/null +++ b/client/views/app/asideNav/privateGroups.html @@ -0,0 +1,39 @@ + 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 @@ -