Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor header CSS for composability

This commit is contained in:
Robin Ward 2017-09-06 11:29:43 -04:00
parent 777f024b8c
commit 825452df76
3 changed files with 135 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/assets/javascripts/discourse/widgets/header.js.es6
View File

@ -28,23 +28,23 @@ createWidget('header-notifications', {
},
html(attrs) {
const { currentUser } = this;
const { user } = attrs;
const contents = [ avatarImg(this.settings.avatarSize, {
template: currentUser.get('avatar_template'),
username: currentUser.get('username')
template: user.get('avatar_template'),
username: user.get('username')
}) ];
const unreadNotifications = currentUser.get('unread_notifications');
const unreadNotifications = user.get('unread_notifications');
if (!!unreadNotifications) {
contents.push(this.attach('link', { action: attrs.action,
className: 'badge-notification unread-notifications',
rawLabel: unreadNotifications }));
}
const unreadPMs = currentUser.get('unread_private_messages');
const unreadPMs = user.get('unread_private_messages');
if (!!unreadPMs) {
if (!currentUser.get('read_first_notification')) {
if (!user.get('read_first_notification')) {
contents.push(h('span.ring'));
if (!attrs.active && attrs.ringBackdrop) {
contents.push(h('span.ring-backdrop-spotlight'));
@ -72,9 +72,7 @@ createWidget('user-dropdown', jQuery.extend({
},
html(attrs) {
const { currentUser } = this;
return h('a.icon', { attributes: { href: currentUser.get('path'), 'data-auto-route': true } },
return h('a.icon', { attributes: { href: attrs.user.get('path'), 'data-auto-route': true } },
this.attach('header-notifications', attrs));
}
}, dropdown));
@ -106,7 +104,7 @@ createWidget('header-dropdown', jQuery.extend({
}, dropdown));
createWidget('header-icons', {
tagName: 'ul.icons.clearfix',
tagName: 'ul.icons.d-header-icons.clearfix',
buildAttributes() {
return { role: 'navigation' };
@ -139,10 +137,13 @@ createWidget('header-icons', {
});
const icons = [search, hamburger];
if (this.currentUser) {
icons.push(this.attach('user-dropdown', { active: attrs.userVisible,
action: 'toggleUserMenu',
ringBackdrop: attrs.ringBackdrop }));
if (attrs.user) {
icons.push(this.attach('user-dropdown', {
active: attrs.userVisible,
action: 'toggleUserMenu',
ringBackdrop: attrs.ringBackdrop,
user: attrs.user
}));
}
return icons;
@ -204,7 +205,8 @@ export default createWidget('header', {
userVisible: state.userVisible,
searchVisible: state.searchVisible,
ringBackdrop: state.ringBackdrop,
flagCount: attrs.flagCount })];
flagCount: attrs.flagCount,
user: this.currentUser })];
if (state.searchVisible) {
const contextType = this.searchContextType();

203
app/assets/stylesheets/common/base/header.scss
View File

@ -46,106 +46,117 @@
margin-left: 7px;
}
.icons {
.d-header-icons {
float: right;
text-align: center;
margin: 0 0 0 5px;
list-style: none;
> li {
float: left;
}
.icon {
display: block;
padding: 3px;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
text-decoration: none;
cursor: pointer;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
transition: all linear .15s;
&:hover {
color: $primary;
background-color: $primary-low;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
&:active {
color: $primary;
background-color: $primary-low;
}
}
.drop-down-visible & {
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $secondary;
cursor: default;
border-top: 1px solid $primary-low;
border-left: 1px solid $primary-low;
border-right: 1px solid $primary-low;
.badge-notification {
top: -10px;
}
.flagged-posts {
right: 24px;
}
&:after {
display: block;
position: absolute;
top: 100%;
left: 0;
z-index: 1101;
width: 100%;
height: 0;
content: "";
border-top: 1px solid $secondary;
}
&:hover {
border-bottom: none;
}
}
}
.d-icon {
width: 32px;
height: 32px;
font-size: 1.714em;
line-height: 32px;
display: inline-block;
}
.notifications {
position: relative;
}
.badge-notification, .ring {
position: absolute;
top: -9px;
z-index: 1;
margin-left: 0;
}
.unread-notifications {
right: 0;
background-color: scale-color($tertiary, $lightness: 50%);
}
.unread-private-messages, .ring {
right: 25px;
}
.flagged-posts {
right: 65px;
}
}
.flagged-posts, .queued-posts {
background: $danger;
}
}
.d-header-icons {
text-align: center;
margin: 0 0 0 5px;
list-style: none;
.flagged-posts, .queued-posts {
background: $danger;
}
> li {
float: left;
}
.icon {
display: block;
padding: 3px;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
text-decoration: none;
cursor: pointer;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
transition: all linear .15s;
&:hover {
color: $primary;
background-color: $primary-low;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
&:active {
color: $primary;
background-color: $primary-low;
}
}
.drop-down-visible & {
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $secondary;
cursor: default;
border-top: 1px solid $primary-low;
border-left: 1px solid $primary-low;
border-right: 1px solid $primary-low;
.badge-notification {
top: -10px;
}
.flagged-posts {
right: 24px;
}
&:after {
display: block;
position: absolute;
top: 100%;
left: 0;
z-index: 1101;
width: 100%;
height: 0;
content: "";
border-top: 1px solid $secondary;
}
&:hover {
border-bottom: none;
}
}
}
.d-icon {
width: 32px;
height: 32px;
font-size: 1.714em;
line-height: 32px;
display: inline-block;
}
.notifications {
position: relative;
}
.ring {
position: absolute;
top: -9px;
z-index: 1;
margin-left: 0;
}
.header-dropdown-toggle {
position: relative;
}
.badge-notification {
position: absolute;
z-index: 1;
left: 0;
top: -9px;
}
.unread-notifications {
left: auto;
right: 0;
background-color: scale-color($tertiary, $lightness: 50%);
}
.unread-private-messages, .ring {
left: auto;
right: 25px;
}
}
.highlight-strong {
background-color: $highlight-medium;

22
app/assets/stylesheets/mobile/header.scss
View File

@ -28,22 +28,22 @@
}
}
.icons {
.badge-notification {
top: -5px;
color: $secondary;
}
.active .icon {
&:after { margin-top: -1px; }
}
}
button.sign-up-button {
display:none;
}
}
.d-header-icons {
.badge-notification {
top: -5px;
color: $secondary;
}
.active .icon {
&:after { margin-top: -1px; }
}
}
#main-outlet {
padding-top: 60px;
}