From 8ae6abe603571839b74f3106ba53922a849d1125 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Thu, 20 Aug 2015 15:54:50 +0200 Subject: Switch the font to roboto --- client/components/cards/labels.jade | 4 ++-- client/components/cards/labels.styl | 6 ++++++ client/components/cards/minicard.styl | 11 ----------- client/components/main/fonts.styl | 17 +++++++++++++++++ client/components/main/header.styl | 4 ++-- client/components/main/layouts.styl | 8 ++++---- client/components/mixins/perfectScrollbar.js | 10 +++++++++- client/components/sidebar/sidebar.jade | 13 ++++++------- client/components/sidebar/sidebar.styl | 5 +++++ client/components/users/userAvatar.styl | 4 ++++ 10 files changed, 55 insertions(+), 27 deletions(-) create mode 100644 client/components/main/fonts.styl (limited to 'client/components') diff --git a/client/components/cards/labels.jade b/client/components/cards/labels.jade index 5742969f..a868627c 100644 --- a/client/components/cards/labels.jade +++ b/client/components/cards/labels.jade @@ -30,8 +30,8 @@ template(name="cardLabelsPopup") li a.card-label-edit-button.fa.fa-pencil.js-edit-label span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}" - class="{{# if isLabelSelected ../_id }}active{{/ if }}") + class="{{# if isLabelSelected ../_id }}active{{/if}}") = name - if isLabelSelected ../_id + if(isLabelSelected ../_id) i.card-label-selectable-icon.fa.fa-check a.quiet-button.full.js-add-label {{_ 'label-create'}} diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl index 0d731e33..db82fd7c 100644 --- a/client/components/cards/labels.styl +++ b/client/components/cards/labels.styl @@ -25,6 +25,12 @@ &.add-label box-shadow: 0 0 0 2px darken(white, 25%) inset + &:hover, &.is-active + box-shadow: 0 0 0 2px darken(white, 60%) inset + + i.fa-plus + margin-top: 3px + .palette-colors display: flex flex-wrap: wrap diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 1cf87beb..d886cd6f 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -67,17 +67,6 @@ height: 100% width: 100% - .minicard-title - display: block - font-weight: 400 - overflow: hidden - margin-bottom: 2px - text-decoration: none - word-wrap: break-word - - &::selection - background: transparent - .minicard-labels float: right display: flex diff --git a/client/components/main/fonts.styl b/client/components/main/fonts.styl new file mode 100644 index 00000000..fc8c8f00 --- /dev/null +++ b/client/components/main/fonts.styl @@ -0,0 +1,17 @@ +@font-face + font-family: 'Roboto' + font-style: normal + font-weight: 400 + src: local('Roboto'), + local('Roboto-Regular'), + url('/fonts/roboto-regular.woff2') format('woff2'), + url('/fonts/roboto-regular.woff') format('woff') + +@font-face + font-family: 'Roboto' + font-style: normal + font-weight: 700 + src: local('Roboto Bold'), + local('Roboto-Bold'), + url('/fonts/roboto-bold.woff2') format('woff2'), + url('/fonts/roboto-bold.woff') format('woff') diff --git a/client/components/main/header.styl b/client/components/main/header.styl index 76a1bc8c..1840becb 100644 --- a/client/components/main/header.styl +++ b/client/components/main/header.styl @@ -3,7 +3,7 @@ #header color: white transition: background-color 0.4s - background: #27AE60 + background: #2980B9 #header-quick-access background-color: rgba(0, 0, 0, 0.2) @@ -117,7 +117,7 @@ .board-header-btn, h1.is-clickable &.is-active, - &:hover + &:hover:not(.is-disabled) background: rgba(0, 0, 0, .15) .separator diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl index e998b389..a6512574 100644 --- a/client/components/main/layouts.styl +++ b/client/components/main/layouts.styl @@ -3,13 +3,14 @@ global-reset() html, body, input, select, textarea, button - font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif + font: 14px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif line-height: 18px color: #4d4d4d html font-size: 100% max-height: 100% + user-select: none -webkit-text-size-adjust: 100% body @@ -29,9 +30,6 @@ body position: relative flex: 1 -div::selection - background: transparent - h1 font-size: 22px line-height: 1.2em @@ -81,6 +79,8 @@ strong font-weight: bold p + user-select: text + a text-decoration: underline word-wrap: break-word diff --git a/client/components/mixins/perfectScrollbar.js b/client/components/mixins/perfectScrollbar.js index 06e8aedd..510a4563 100644 --- a/client/components/mixins/perfectScrollbar.js +++ b/client/components/mixins/perfectScrollbar.js @@ -1,6 +1,14 @@ Mixins.PerfectScrollbar = BlazeComponent.extendComponent({ onRendered: function() { var component = this.mixinParent(); - Ps.initialize(component.find('.js-perfect-scrollbar')); + var domElement = component.find('.js-perfect-scrollbar'); + Ps.initialize(domElement); + + // XXX We should create an event map to be consistent with other components + // but since BlazeComponent doesn't merge Mixins events transparently I + // prefered to use a jQuery event (which is what an event map ends up doing) + component.$(domElement).on('mouseenter', function() { + Ps.update(domElement); + }); } }); diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 9616e1df..9c15c4f1 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -51,10 +51,9 @@ template(name="memberPopup") .miniprofile-header +userAvatar(userId=user._id) .info - h3.bottom - .js-profile - = user.profile.fullname - p.quiet.bottom @#{user.username} + h3 + .js-profile= user.profile.fullname + p.quiet @#{user.username} if currentUser.isBoardMember ul.pop-over-list @@ -73,7 +72,7 @@ template(name="memberPopup") template(name="removeMemberPopup") - p {{_ 'remove-member-pop' name=user.profile.fullname username=user.username boardTitle=board.title}} + p {{_ 'remove-member-pop' name=user.profile.name username=user.username boardTitle=board.title}} button.js-confirm.negate.full(type="submit") {{_ 'remove-member'}} template(name="addMemberPopup") @@ -83,10 +82,10 @@ template(name="addMemberPopup") ul.pop-over-member-list +esEach(index="users") li.item.js-member-item(class="{{#if isBoardMember }}disabled{{/if}}") - a.name.js-select-member(title="{{ profile.fullname }} ({{ username }})") + a.name.js-select-member(title="{{ profile.name }} ({{ username }})") +userAvatar(userId=_id) span.full-name - = profile.fullname + = profile.name | ({{ username }}) if isBoardMember .extra-text.quiet ({{_ 'joined'}}) diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index a5b695e9..cda15ba5 100644 --- a/client/components/sidebar/sidebar.styl +++ b/client/components/sidebar/sidebar.styl @@ -21,6 +21,11 @@ h3 color: darken(white, 50%) + font-size: 1em + margin-bottom: 10px + + i.fa + margin-right: 3px hr margin: 13px 0 diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl index e2a66d1e..83257792 100644 --- a/client/components/users/userAvatar.styl +++ b/client/components/users/userAvatar.styl @@ -81,6 +81,9 @@ avatar-radius = 50% justify-content: center box-shadow: 0 0 0 2px darken(white, 25%) inset + &:hover, &.is-active + box-shadow: 0 0 0 2px darken(white, 60%) inset + .atMention background: #dbdbdb border-radius: 3px @@ -99,6 +102,7 @@ avatar-radius = 50% h3, p margin-bottom: 0 + padding-left: 0 p padding-top: 0 -- cgit v1.2.3-1-g7c22