From c1be9fce4e1d5d7ede71b6b0e1a39236c3a724f9 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 3 Apr 2018 17:51:39 +0200 Subject: [PATCH] [added] side-menu + works with dynamic room buffer --- public_html/index.html | 1 + webpack/lib/room-controller.js | 3 +- webpack/scss/constants.scss | 10 ++-- webpack/scss/container.scss | 2 +- webpack/scss/side-menu.scss | 95 ++++++++++++++++++++++++++++++++++ webpack/vue/auth/side-menu.vue | 26 ++++++++++ webpack/vue/auth/wrapper.vue | 17 ++++-- 7 files changed, 144 insertions(+), 10 deletions(-) create mode 100644 webpack/scss/side-menu.scss create mode 100644 webpack/vue/auth/side-menu.vue diff --git a/public_html/index.html b/public_html/index.html index b1d1499..50b42b6 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -14,6 +14,7 @@ + diff --git a/webpack/lib/room-controller.js b/webpack/lib/room-controller.js index 9df7f3b..1d97654 100644 --- a/webpack/lib/room-controller.js +++ b/webpack/lib/room-controller.js @@ -118,7 +118,8 @@ export default class RoomController{ id: r.rid, name: r.name, type: r.type, - messages: r.messages + messages: r.messages, + members: r.members }); // {7} redirect if first element diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss index 01b3a90..5ee3e03 100644 --- a/webpack/scss/constants.scss +++ b/webpack/scss/constants.scss @@ -1,9 +1,10 @@ /* (1) Dimensions */ -$menu-width: 4.3em; -$dialog-width: 15.2em; -$header-height: 3em; -$input-height: 5em; +$menu-width: 4.3em; +$dialog-width: 15.2em; +$header-height: 3em; +$input-height: 5em; +$side-menu-width: 14em; /* (2) Main colors */ $menu-bg: #202225; @@ -13,6 +14,7 @@ $container-bg: #36393e; $header-bg: #36393f; $main: #7289da; $input-bg: #36393f; +$side-menu-bg: #2f3136; /* (1) Header specific diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index f8492c0..e0fa869 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -61,7 +61,7 @@ position: absolute; top: calc( #{$header-height} + #{$bb-offset} ); left: 0; - width: 100%; + width: calc( 100% - #{$side-menu-width} ); height: calc( 100% - #{$header-height} - #{$bb-offset} ); background-color: $input-bg; diff --git a/webpack/scss/side-menu.scss b/webpack/scss/side-menu.scss new file mode 100644 index 0000000..b251705 --- /dev/null +++ b/webpack/scss/side-menu.scss @@ -0,0 +1,95 @@ +@import 'constants'; + +#WRAPPER > div.side-menu{ + + display: flex; + position: absolute; + top: $header-height; + left: calc( 100% - #{$side-menu-width} ); + width: $side-menu-width; + height: calc( 100% - #{$header-height} ); + + background-color: $side-menu-bg; + + flex-flow: row wrap; + justify-content: flex-start; + align-items: center; + align-content: flex-start; + + & > div.user{ + + flex: 80%; + + display: flex; + position: relative; + + margin: .2em 1em; + padding: .5em 1em; + + border-radius: 5px; + + background-color: transparent; + + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + + transition: background-color .1s ease-in-out; + + overflow: hidden; + + cursor: pointer; + + &:hover{ background-color: #36393f; } + + & > div.icon{ + + display: block; + position: relative; + width: 2em; + height: 2em; + + margin-right: .5em; + + border-radius: 50% / 50%; + + background-color: #fff; + + cursor: pointer; + + transition: opacity .2s ease-in-out; + background: url() center center no-repeat; + background-size: cover; + + + // icon "pastille" + &:after{ + content: ''; + + display: block; + position: absolute; + top: calc( 100% - .9em + .1em ); + left: calc( 100% - .9em + .1em ); + width: .7em; + height: .7em; + + border-radius: 50% / 50%; + border: .2em solid #{$side-menu-bg}; + + background-color: #eb7719; + + transition: background-color .1s ease-in-out; + } + + } + // icon border invisible even on hover + &:hover > div.icon:after{ + border-color: #36393f; + } + + &[data-online='1'] > div.icon:after{ + background-color: #19eb69; + } + } + +} \ No newline at end of file diff --git a/webpack/vue/auth/side-menu.vue b/webpack/vue/auth/side-menu.vue new file mode 100644 index 0000000..2064de5 --- /dev/null +++ b/webpack/vue/auth/side-menu.vue @@ -0,0 +1,26 @@ + \ No newline at end of file diff --git a/webpack/vue/auth/wrapper.vue b/webpack/vue/auth/wrapper.vue index f69c8ff..eadb8d2 100644 --- a/webpack/vue/auth/wrapper.vue +++ b/webpack/vue/auth/wrapper.vue @@ -13,6 +13,13 @@ + + + + + + + @@ -151,8 +158,9 @@