Skip to content

Commit

Permalink
VHX-1429 : Adding default avatar functionality to quartz (#99)
Browse files Browse the repository at this point in the history
  • Loading branch information
@erikmoldovan
erikmoldovan authored Feb 27, 2018
1 parent 52deff4 commit 5bd8c0b
Show file tree
Hide file tree
Showing 13 changed files with 3,189 additions and 2,260 deletions.
28 changes: 18 additions & 10 deletions app/public/app.js
View file

Large diffs are not rendered by default.

150 changes: 98 additions & 52 deletions app/public/components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,90 +106,136 @@
/*.....................................
AVATARS
......................................*/
.avatar {
width: 35px;
height: 35px;
.avatar,
.new-avatar {
width: 36px;
height: 36px;
position: relative;
display: inline-block;
background-color: rgba(0, 20, 43, 0.5);
border-radius: 50%;
overflow: hidden;
z-index: 1; }
.avatar .avatar-img {
line-height: 35px; }
.avatar.color-blue {
.avatar .avatar-img,
.avatar .default-avatar,
.new-avatar .avatar-img,
.new-avatar .default-avatar {
line-height: 36px; }
.avatar.color-blue,
.new-avatar.color-blue {
background-color: #0F4E7B; }
.avatar.color-purple {
.avatar.color-purple,
.new-avatar.color-purple {
background-color: #783479; }
.avatar.color-pink {
.avatar.color-pink,
.new-avatar.color-pink {
background-color: #fde5ec; }
.avatar.color-orange {
.avatar.color-orange,
.new-avatar.color-orange {
background-color: #D06B5E; }
.avatar.color-green {
.avatar.color-green,
.new-avatar.color-green {
background-color: #fafcf4; }
.avatar.color-forest {
.avatar.color-forest,
.new-avatar.color-forest {
background-color: #9DBB36; }
.avatar.color-light-blue {
.avatar.color-light-blue,
.new-avatar.color-light-blue {
background-color: #2b8eff; }
.avatar.color-gray {
.avatar.color-gray,
.new-avatar.color-gray {
background-color: #233741; }
.avatar.color-teal {
.avatar.color-teal,
.new-avatar.color-teal {
background-color: #22B9B0; }
.avatar.avatar--border .avatar-img {
.avatar.avatar--border .avatar-img,
.new-avatar.avatar--border .avatar-img {
border: 2px solid #fff; }
.avatar .avatar-user {
.avatar .avatar-user,
.new-avatar .avatar-user {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover; }
.avatar:before {
color: red;
content: ' ';
display: block;
position: absolute;
-webkit-background-clip: padding-box;
background-clip: padding-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M7.1%2011c1.8%200%201.8-2.8%200-2.8S5.3%2011%207.1%2011zM15.9%2011c1.8%200%201.8-2.8%200-2.8s-1.8%202.8%200%202.8z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4.2%2012.9c.3%200%20.5.2.5.5v1.4h13.6v-1.4c0-.3.2-.5.5-.5h3.8V4.6c0-.4-.3-.8-.8-.8H1.2c-.4%200-.8.4-.8.8v8.3h3.8zm11.7-5.7c3.1%200%203.1%204.8%200%204.8s-3.1-4.8%200-4.8zm-8.8%200c3.1%200%203.1%204.8%200%204.8S4%207.2%207.1%207.2z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19.3%2013.9v1.4c0%20.3-.2.5-.5.5H4.2c-.3%200-.5-.2-.5-.5v-1.4H.4v4.5c0%20.4.3.8.8.8h20.7c.4%200%20.8-.4.8-.8v-4.5h-3.4z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20d%3D%22M7.1%208.2c-1.8%200-1.8%202.8%200%202.8s1.8-2.8%200-2.8zM15.9%208.2c-1.8%200-1.8%202.8%200%202.8s1.8-2.8%200-2.8z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50%; }
.avatar.avatar--xsmall {
width: 25px;
height: 25px; }
.avatar.avatar--xsmall .avatar-img {
line-height: 25px; }
.avatar.avatar--small {
width: 35px;
height: 35px; }
.avatar.avatar--small .avatar-img {
line-height: 35px; }
.avatar.avatar--medium {
width: 45px;
height: 45px; }
.avatar.avatar--medium .avatar-img {
line-height: 45px; }
.avatar.avatar--large {
.avatar.avatar--xsmall,
.new-avatar.avatar--xsmall {
width: 24px;
height: 24px; }
.avatar.avatar--xsmall .avatar-img,
.avatar.avatar--xsmall .default-avatar,
.new-avatar.avatar--xsmall .avatar-img,
.new-avatar.avatar--xsmall .default-avatar {
line-height: 24px; }
.avatar.avatar--small,
.new-avatar.avatar--small {
width: 36px;
height: 36px; }
.avatar.avatar--small .avatar-img,
.avatar.avatar--small .default-avatar,
.new-avatar.avatar--small .avatar-img,
.new-avatar.avatar--small .default-avatar {
line-height: 36px; }
.avatar.avatar--medium,
.new-avatar.avatar--medium {
width: 46px;
height: 46px; }
.avatar.avatar--medium .avatar-img,
.avatar.avatar--medium .default-avatar,
.new-avatar.avatar--medium .avatar-img,
.new-avatar.avatar--medium .default-avatar {
line-height: 46px; }
.avatar.avatar--large,
.new-avatar.avatar--large {
width: 60px;
height: 60px; }
.avatar.avatar--large .avatar-img {
.avatar.avatar--large .avatar-img,
.avatar.avatar--large .default-avatar,
.new-avatar.avatar--large .avatar-img,
.new-avatar.avatar--large .default-avatar {
line-height: 60px; }
.avatar.avatar--xlarge {
.avatar.avatar--xlarge,
.new-avatar.avatar--xlarge {
width: 80px;
height: 80px; }
.avatar.avatar--xlarge .avatar-img {
.avatar.avatar--xlarge .avatar-img,
.avatar.avatar--xlarge .default-avatar,
.new-avatar.avatar--xlarge .avatar-img,
.new-avatar.avatar--xlarge .default-avatar {
line-height: 80px; }
.avatar.avatar--xxlarge {
.avatar.avatar--xxlarge,
.new-avatar.avatar--xxlarge {
width: 100px;
height: 100px; }
.avatar.avatar--xxlarge .avatar-img {
.avatar.avatar--xxlarge .avatar-img,
.avatar.avatar--xxlarge .default-avatar,
.new-avatar.avatar--xxlarge .avatar-img,
.new-avatar.avatar--xxlarge .default-avatar {
line-height: 100px; }

.new-avatar {
text-align: center; }
.new-avatar .default-avatar {
color: #fff;
font-weight: bold; }

.avatar:before {
color: red;
content: ' ';
display: block;
position: absolute;
-webkit-background-clip: padding-box;
background-clip: padding-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M7.1%2011c1.8%200%201.8-2.8%200-2.8S5.3%2011%207.1%2011zM15.9%2011c1.8%200%201.8-2.8%200-2.8s-1.8%202.8%200%202.8z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4.2%2012.9c.3%200%20.5.2.5.5v1.4h13.6v-1.4c0-.3.2-.5.5-.5h3.8V4.6c0-.4-.3-.8-.8-.8H1.2c-.4%200-.8.4-.8.8v8.3h3.8zm11.7-5.7c3.1%200%203.1%204.8%200%204.8s-3.1-4.8%200-4.8zm-8.8%200c3.1%200%203.1%204.8%200%204.8S4%207.2%207.1%207.2z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19.3%2013.9v1.4c0%20.3-.2.5-.5.5H4.2c-.3%200-.5-.2-.5-.5v-1.4H.4v4.5c0%20.4.3.8.8.8h20.7c.4%200%20.8-.4.8-.8v-4.5h-3.4z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20d%3D%22M7.1%208.2c-1.8%200-1.8%202.8%200%202.8s1.8-2.8%200-2.8zM15.9%208.2c-1.8%200-1.8%202.8%200%202.8s1.8-2.8%200-2.8z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50%; }

/* .....................................
Fonts
..................................... */
Expand Down
11 changes: 7 additions & 4 deletions app/public/quartz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ vhxm.components.shared.autosuggest.ui.container = {
};
vhxm.components.shared.avatar.ui = {
view: function view(ctrl, opts) {
return m('span.avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [m('span.avatar-user.user-avatar', {
return m('span.new-avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [m('span.default-avatar', opts.initial), m('span.avatar-user.user-avatar', {
style: {
backgroundImage: 'url(' + opts.image + ')'
}
Expand Down Expand Up @@ -1183,16 +1183,18 @@ vhxm.components.shared.sidebar.controller = function (opts) {

self.animatorOut = function (elem, isInit) {
$(elem).velocity('stop', true);
vhxm.components.shared.sidebar.state.skipTransition(false);
$(elem).velocity({
right: '-470'
}, {
duration: 500,
easing: [0.19, 1, 0.22, 1],
complete: function complete() {
begin: function begin() {
vhxm.components.shared.sidebar.state.onClose();
},
complete: function complete() {
$(document).off('keyup', self.esc);
$(document).off('click', self.documentClickHandler);
vhxm.components.shared.sidebar.state.skipTransition(false);
}
});
};
Expand All @@ -1202,7 +1204,8 @@ vhxm.components.shared.sidebar.controller = function (opts) {
vhxm.components.shared.sidebar.toggle('close');
}
};
};vhxm.components.shared.sidebar.toggle = function (state, route) {
};
vhxm.components.shared.sidebar.toggle = function (state, route) {
state = state === 'open' ? true : false;

var done = function done() {
Expand Down
Loading

0 comments on commit 5bd8c0b

Please sign in to comment.