From 2dbea30842ec63a68055245fe26633bb7913daf3 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Tue, 12 May 2015 19:20:58 +0200 Subject: Renaissance _,,ad8888888888bba,_ ,ad88888I888888888888888ba, ,88888888I88888888888888888888a, ,d888888888I8888888888888888888888b, d88888PP"""" ""YY88888888888888888888b, ,d88"'__,,--------,,,,.;ZZZY8888888888888, ,8IIl'" ;;l"ZZZIII8888888888, ,I88l;' ;lZZZZZ888III8888888, ,II88Zl;. ;llZZZZZ888888I888888, ,II888Zl;. .;;;;;lllZZZ888888I8888b ,II8888Z;; `;;;;;''llZZ8888888I8888, II88888Z;' .;lZZZ8888888I888b II88888Z; _,aaa, .,aaaaa,__.l;llZZZ88888888I888 II88888IZZZZZZZZZ, .ZZZZZZZZZZZZZZ;llZZ88888888I888, II88888IZZ<'(@@>Z| |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I ,II88888; `""" ;| |ZZ; `""" ;;llZ8888888888I888 II888888l `;; .;llZZ8888888888I888, ,II888888Z; ;;; .;;llZZZ8888888888I888I III888888Zl; .., `;; ,;;lllZZZ88888888888I888 II88888888Z;;...;(_ _) ,;;;llZZZZ88888888888I888, II88888888Zl;;;;;' `--'Z;. .,;;;;llZZZZ88888888888I888b ]I888888888Z;;;;' ";llllll;..;;;lllZZZZ88888888888I8888, II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888 II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888 `II8888888888888Zl;. ,;;lllZZZZZZZZWMZ88888888888I88888 II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888, `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888 `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888, II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b, ,II8888888888888888b .;;lllllll;;;.;..88888888I88888888b, II888888888888888PZI;. .`;;;.;;;..; ...88888888I8888888888, II888888888888PZ;;';;. ;. .;. .;. .. Y8888888I88888888888b, ,II888888888PZ;;' `8888888I8888888888888b, II888888888' 888888I8888888888888888 ,II888888888 ,888888I8888888888888888 ,d88888888888 d888888I8888888888ZZZZZZ ,ad888888888888I 8888888I8888ZZZZZZZZZZZZ 888888888888888' 888888IZZZZZZZZZZZZZZZZZ 8888888888P'8P' Y888ZZZZZZZZZZZZZZZZZZZZ 888888888, " ,ZZZZZZZZZZZZZZZZZZZZZZZ 8888888888, ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ 888888888888a, _ ,ZZZZZZZZZZZZZZZZZZZZ88888888 888888888888888ba,_d' ,ZZZZZZZZZZZZZZZZZ8888888888888 8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888 88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888 8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888 888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888 8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888 88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888 8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand 8 88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8 8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888 --- client/components/users/avatar.jade | 7 ++ client/components/users/events.js | 59 +++++++++++++++ client/components/users/form.styl | 50 ++++++++++++ client/components/users/headerButtons.jade | 27 +++++++ client/components/users/headerButtons.js | 5 ++ client/components/users/helpers.js | 27 +++++++ client/components/users/member.styl | 107 ++++++++++++++++++++++++++ client/components/users/router.js | 29 +++++++ client/components/users/templates.html | 118 +++++++++++++++++++++++++++++ 9 files changed, 429 insertions(+) create mode 100644 client/components/users/avatar.jade create mode 100644 client/components/users/events.js create mode 100644 client/components/users/form.styl create mode 100644 client/components/users/headerButtons.jade create mode 100644 client/components/users/headerButtons.js create mode 100644 client/components/users/helpers.js create mode 100644 client/components/users/member.styl create mode 100644 client/components/users/router.js create mode 100644 client/components/users/templates.html (limited to 'client/components/users') diff --git a/client/components/users/avatar.jade b/client/components/users/avatar.jade new file mode 100644 index 00000000..70ef69e0 --- /dev/null +++ b/client/components/users/avatar.jade @@ -0,0 +1,7 @@ +template(name="userAvatar") + .member(class="{{class}} {{# if draggable }}js-member{{else}}js-member-on-card-menu{{/if}}" + title="{{userData.profile.name}} ({{userData.username}})") + +avatar(user=userData size=size) + if showBadges + span.member-status(class="{{# if userData.profile.status}}active{{/if}}") + span.member-type(class=memberType) diff --git a/client/components/users/events.js b/client/components/users/events.js new file mode 100644 index 00000000..14df9717 --- /dev/null +++ b/client/components/users/events.js @@ -0,0 +1,59 @@ +// XXX This should be handled by default (and in a better way) by useraccounts. +// See https://github.com/meteor-useraccounts/core/issues/384 +Template.atForm.onRendered(function() { + this.find('input').focus(); +}); + +Template.memberMenuPopup.events({ + 'click .js-language': Popup.open('setLanguage'), + 'click .js-logout': function(evt) { + evt.preventDefault(); + + Meteor.logout(function() { + Router.go('Home'); + }); + } +}); + +Template.setLanguagePopup.events({ + 'click .js-set-language': function(evt) { + Users.update(Meteor.userId(), { + $set: { + 'profile.language': this.tag + } + }); + evt.preventDefault(); + } +}); + +Template.profileEditForm.events({ + 'click .js-edit-profile': function() { + Session.set('ProfileEditForm', true); + }, + 'click .js-cancel-edit-profile': function() { + Session.set('ProfileEditForm', false); + }, + 'submit #ProfileEditForm': function(evt, t) { + var name = t.find('#name').value; + var bio = t.find('#bio').value; + + // trim and update + if ($.trim(name)) { + Users.update(this.profile()._id, { + $set: { + 'profile.name': name, + 'profile.bio': bio + } + }, function() { + + // update complete close profileEditForm + Session.set('ProfileEditForm', false); + }); + } + evt.preventDefault(); + } +}); + +Template.memberName.events({ + 'click .js-show-mem-menu': Popup.open('user') +}); diff --git a/client/components/users/form.styl b/client/components/users/form.styl new file mode 100644 index 00000000..845c810d --- /dev/null +++ b/client/components/users/form.styl @@ -0,0 +1,50 @@ +.at-form-landing-logo + width: 275px + margin: auto + margin-top: 50px + margin-top: 17vh + + img + width: 275px + + +.at-form + margin: auto + width: 275px + padding: 25px + margin-top: 20px + padding-bottom: 10px + background: #fff + border-radius: 3px + border: 1px solid #dbdbdb + border-bottom-color: #c2c2c2 + box-shadow: 0 1px 6px rgba(0, 0, 0, .3) + + .at-link + color: darken(#27AE60, 40%) + + label + margin-bottom: 3px + + input + width: 100% + + .at-title + background: #F7F7F7 + margin: -25px + padding: 15px 25px 5px + margin-bottom: 20px + border-bottom: 1px solid #dcdcdc + color: darken(white, 70%) + font-weight: bold + + .at-signup-link, + .at-signin-link, + .at-forgotPwd + font-size: 0.9em + margin-top: 15px + color: darken(white, 70%) + + .at-signUp, + .at-signIn + font-weight: bold diff --git a/client/components/users/headerButtons.jade b/client/components/users/headerButtons.jade new file mode 100644 index 00000000..74c24ad5 --- /dev/null +++ b/client/components/users/headerButtons.jade @@ -0,0 +1,27 @@ +template(name="headerUserBar") + #header-user-bar + if currentUser + a.js-open-header-member-menu + if currentUser.profile.name + = currentUser.profile.name + else + = currentUser.username + i.fa.fa-chevron-down + else + a(href="{{pathFor route='signUp'}}") Sign in + span.separator - + a(href="{{pathFor route='signIn'}}") Log in + +template(name="memberHeader") + a.header-member.js-open-header-member-menu + span= currentUser.profile.name + +userAvatar(user=currentUser size="small") + +template(name="memberMenuPopup") + ul.pop-over-list + li: a(href="{{pathFor route='Profile' username=currentUser.username}}") {{_ 'profile'}} + li: a.js-language {{_ 'language'}} + li: a(href = "{{pathFor route='Settings'}}") {{_ 'settings'}} + hr + ul.pop-over-list + li: a.js-logout {{_ 'log-out'}} diff --git a/client/components/users/headerButtons.js b/client/components/users/headerButtons.js new file mode 100644 index 00000000..70594fb5 --- /dev/null +++ b/client/components/users/headerButtons.js @@ -0,0 +1,5 @@ +Template.headerUserBar.events({ + 'click .js-sign-in': Popup.open('signup'), + 'click .js-log-in': Popup.open('login'), + 'click .js-open-header-member-menu': Popup.open('memberMenu') +}); diff --git a/client/components/users/helpers.js b/client/components/users/helpers.js new file mode 100644 index 00000000..33867298 --- /dev/null +++ b/client/components/users/helpers.js @@ -0,0 +1,27 @@ +Template.userAvatar.helpers({ + userData: function() { + if (! this.user) { + this.user = Users.findOne(this.userId); + } + return this.user; + }, + memberType: function() { + var userId = this.userId || this.user._id; + var user = Users.findOne(userId); + return user && user.isBoardAdmin() ? 'admin' : 'normal'; + } +}); + +Template.setLanguagePopup.helpers({ + languages: function() { + return _.map(TAPi18n.getLanguages(), function(lang, tag) { + return { + tag: tag, + name: lang.name + }; + }); + }, + isCurrentLanguage: function() { + return this.tag === TAPi18n.getLanguage(); + } +}); diff --git a/client/components/users/member.styl b/client/components/users/member.styl new file mode 100644 index 00000000..3dfdaa37 --- /dev/null +++ b/client/components/users/member.styl @@ -0,0 +1,107 @@ +@import 'nib' + +avatar-radius = 50% + +.member + border-radius: 3px + display: block + float: left + height: 30px + width: @height + margin: 0 4px 4px 0 + position: relative + cursor: pointer + user-select: none + z-index: 1 + text-decoration: none + border-radius: avatar-radius + + .avatar + height: 100% + width: @height + display: flex + align-items: center + justify-content: center + overflow: hidden + border-radius: avatar-radius + + .avatar-initials + font-weight: bold + max-width: 100% + max-height: 100% + font-size: 14px + line-height: 200% + background-color: #dbdbdb + color: #444444 + + .avatar-image + max-width: 100% + max-height: 100% + + .member-status + background-color: #b3b3b3 + border: 1px solid #fff + border-radius: 50% + height: 8px + width: @height + position: absolute + right: 0px + bottom: 0px + border: 1px solid white + + &.active + background: #64c464 + border-color: #daf1da + + &.idle + background: #e4e467 + border-color: #f7f7d4 + + &.disconnected + background: #bdbdbd + border-color: #ededed + + &.extra-small + .avatar-initials + font-size: 9px + width: 18px + height: 18px + line-height: 18px + + .avatar-image + width: 18px + height: 18px + + &.small + width: 30px + height: 30px + + .avatar-initials + font-size: 12px + line-height: 30px + + &.large + height: 85px + line-height: 85px + width: 85px + + .avatar + width: 85px + height: 85px + + .avatar-initials + font-size: 16px + font-weight: 700 + line-height: 85px + width: 85px + +.atMention + background: #dbdbdb + border-radius: 3px + padding: 1px 4px + margin: -1px 0 + display: inline-block + + &.me + background: #cfdfe8 + diff --git a/client/components/users/router.js b/client/components/users/router.js new file mode 100644 index 00000000..d59e174d --- /dev/null +++ b/client/components/users/router.js @@ -0,0 +1,29 @@ + +_.each(['signIn', 'signUp', 'resetPwd', + 'forgotPwd', 'enrollAccount', 'changePwd'], function(routeName) { + AccountsTemplates.configureRoute(routeName, { + layoutTemplate: 'userFormsLayout' + }); +}); + +Router.route('/profile/:username', { + name: 'Profile', + template: 'profile', + waitOn: function() { + return Meteor.subscribe('profile', this.params.username); + }, + data: function() { + var params = this.params; + return { + profile: function() { + return Users.findOne({ username: params.username }); + } + }; + } +}); + +Router.route('/settings', { + name: 'Settings', + template: 'settings', + layoutTemplate: 'AuthLayout' +}); diff --git a/client/components/users/templates.html b/client/components/users/templates.html new file mode 100644 index 00000000..5783eebf --- /dev/null +++ b/client/components/users/templates.html @@ -0,0 +1,118 @@ + + + + + + + + + + + + -- cgit v1.2.3-1-g7c22