From 1dd2db9d793ec3f9fd921a10864ba032eeaa1a6d Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 22 Mar 2018 18:15:57 +0100 Subject: [PATCH] [scss.popup] popup layout --- public_html/asset/svg/checked.svg | 55 +++++ public_html/asset/svg/dialog.add.svg | 44 ++++ public_html/asset/svg/dialog.add@hover.svg | 44 ++++ public_html/asset/svg/dialog.text@active.svg | 56 +++++ public_html/asset/svg/dialog.voice@active.svg | 55 +++++ public_html/index.html | 4 +- webpack/scss/constants.scss | 1 + webpack/scss/dialog.scss | 42 +++- webpack/scss/global.scss | 25 ++ webpack/scss/pop-up.scss | 215 ++++++++++++++++++ webpack/vue/dialog.vue | 6 +- webpack/vue/wrapper.vue | 23 +- 12 files changed, 558 insertions(+), 12 deletions(-) create mode 100644 public_html/asset/svg/checked.svg create mode 100644 public_html/asset/svg/dialog.add.svg create mode 100644 public_html/asset/svg/dialog.add@hover.svg create mode 100644 public_html/asset/svg/dialog.text@active.svg create mode 100644 public_html/asset/svg/dialog.voice@active.svg create mode 100644 webpack/scss/global.scss create mode 100644 webpack/scss/pop-up.scss diff --git a/public_html/asset/svg/checked.svg b/public_html/asset/svg/checked.svg new file mode 100644 index 0000000..74a7804 --- /dev/null +++ b/public_html/asset/svg/checked.svg @@ -0,0 +1,55 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/public_html/asset/svg/dialog.add.svg b/public_html/asset/svg/dialog.add.svg new file mode 100644 index 0000000..862bfe7 --- /dev/null +++ b/public_html/asset/svg/dialog.add.svg @@ -0,0 +1,44 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/asset/svg/dialog.add@hover.svg b/public_html/asset/svg/dialog.add@hover.svg new file mode 100644 index 0000000..586229f --- /dev/null +++ b/public_html/asset/svg/dialog.add@hover.svg @@ -0,0 +1,44 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/asset/svg/dialog.text@active.svg b/public_html/asset/svg/dialog.text@active.svg new file mode 100644 index 0000000..57e6ffd --- /dev/null +++ b/public_html/asset/svg/dialog.text@active.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/public_html/asset/svg/dialog.voice@active.svg b/public_html/asset/svg/dialog.voice@active.svg new file mode 100644 index 0000000..ced1ab5 --- /dev/null +++ b/public_html/asset/svg/dialog.voice@active.svg @@ -0,0 +1,55 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/public_html/index.html b/public_html/index.html index 48ce9eb..c47c030 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -11,12 +11,14 @@ + + - + diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss index 73818a4..8cde35b 100644 --- a/webpack/scss/constants.scss +++ b/webpack/scss/constants.scss @@ -10,6 +10,7 @@ $dialog-header-bg: #2f3136; $dialog-bg: #2f3136; $container-bg: #36393e; $header-bg: #36393f; +$main: #7289da; /* (1) Header specific diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss index 6ca0012..bc4c213 100644 --- a/webpack/scss/dialog.scss +++ b/webpack/scss/dialog.scss @@ -11,7 +11,7 @@ background-color: $dialog-bg; - /* (1) Container HEADER */ + /* (2) Container HEADER */ & > div.header{ display: block; position: absolute; @@ -29,9 +29,16 @@ padding: #{$header-height/4} 1em; + background: url('../asset/svg/arrow.down@hover.svg') right .7em center no-repeat; + background-size: auto 1.2em; + + cursor: pointer; + + z-index: 100; + } - /* (2) Container BODY */ + /* (3) Container BODY */ & > div.body{ display: block; position: absolute; @@ -50,9 +57,8 @@ /* (3) Toggle label */ & div.toggle{ - display: block; - width: calc( 100% - 2*.5em ); - + display: inline-block; + width: calc( 100% - 2*.5em - 3em ); margin: 0 .5em; margin-top: 2em; @@ -88,9 +94,27 @@ } - /* (4) UL after toggle label */ - & div.toggle + ul, - & div.toggle:not([data-toggle='1']) + ul{ + /* (4) Add button */ + & div.add{ + display: inline-block; + position: relative; + top: .15em; + left: -.5em; + width: 1em; + height: 1em; + + background: url('../asset/svg/dialog.add.svg') center center no-repeat; + background-size: auto 100%; + + cursor: pointer; + + &:hover{ background-image: url('../asset/svg/dialog.add@hover.svg'); } + } + + + /* (5) UL after toggle label */ + & div.toggle ~ ul, + & div.toggle:not([data-toggle='1']) ~ ul{ display: none; @@ -149,7 +173,7 @@ } // when visible - & div.toggle[data-toggle='1'] + ul{ display: block; } + & div.toggle[data-toggle='1'] ~ ul{ display: block; } diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss new file mode 100644 index 0000000..dfbc6a8 --- /dev/null +++ b/webpack/scss/global.scss @@ -0,0 +1,25 @@ +@import 'constants'; + + +/* (1) Title box +---------------------------------------------------------*/ +// [data-title]:before{ content: 'test'; } + +// [data-title]:before{ + +// content: attr(data-title); + +// display: block; +// position: absolute; + +// padding: .8em 1em; + +// border-radius: 5px / 5px; + +// color: #ddd; + +// background-color: #000; + +// transform: translateY(-75%) translateX(80%); + +// } \ No newline at end of file diff --git a/webpack/scss/pop-up.scss b/webpack/scss/pop-up.scss new file mode 100644 index 0000000..d25c81b --- /dev/null +++ b/webpack/scss/pop-up.scss @@ -0,0 +1,215 @@ +@import 'constants'; + + +/* (1) Popup box +---------------------------------------------------------*/ +.popup{ + display: flex; + position: fixed; + top: 50%; + left: 50%; + width: 440px; + min-height: 200px; + + flex-direction: column; + + + border-radius: 5px / 5px; + + box-shadow: 0 0 0 100vw rgba(0,0,0,.8); + + background-color: #36393f; + + overflow: hidden; + + z-index: 800; + + transform: translateX(-50%) translateY(-50%); + +} + + +/* (2) Popup HEADER +---------------------------------------------------------*/ +.popup > .header{ + + display: block; + + margin: 1em 1.3em; + + font-size: .9em; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + +} + + +/* (3) Popup BODY +---------------------------------------------------------*/ +.popup > .body{ + + flex: 1; + + display: flex; + + margin: 0 1.2em; + padding-bottom: 1em; + + flex-direction: column; + align-items: stretch; + flex-wrap: nowrap; + + label{ + display: block; + + margin-top: 2em; + margin-bottom: .7em; + + font-size: .7em; + text-transform: uppercase; + letter-spacing: 1px; + } + + input, + .select-box{ + display: block; + + padding: .7em 1em; + margin-bottom: .5em; + + border: 1px solid #222; + border-radius: 3px / 3px; + + background-color: #313339; + + color: #fff; + + transition: border-color .1s ease-in-out; + + &:hover{ border-color: #111; } + &:focus{ border-color: #7289da; } + + } + + .select-box[data-type]{ + padding-left: 4em; + + cursor: pointer; + + transition: background-color .1s ease-in-out, + border-color 0s; + + // {1} Trailing icon // + &:before{ + content: ''; + + display: inline-block; + position: absolute; + margin-top: .1em; + margin-left: -1.65em; + width: 1.3em; + height: 1.3em; + + background: center center no-repeat; + background-size: auto 80%; + } + + // specific images + &[data-type='text']:before{ background-image: url('../asset/svg/dialog.text@active.svg'); } + &[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); } + + + // {2} Checkbox // + &:after{ + content: ''; + + display: block; + position: absolute; + margin-top: -1.4em; + margin-left: -3.4em; + width: 1.3em; + height: 1.3em; + + border: 1px solid #888; + border-radius: 3px / 3px; + + background: center center no-repeat; + background-size: auto 80%; + + } + + + // {3} Active item // + &[data-selected='1']{ + background-color: $main; + border-color: $main; + &:hover{ border-color: $main; } + + &:after{ + border-color: #fff; + background-color: #fff; + background-image: url('../asset/svg/checked.svg'); + } + + } + + + } + +} + + +/* (4) Popup Footer +---------------------------------------------------------*/ +.popup > .footer{ + + display: flex; + position: relative; + + padding: 1.2em 1em; + + flex-direction: row; + justify-content: flex-end; + align-items: center; + flex-wrap: nowrap; + + background-color: #2f3136; + + & > button:first-child{ + + margin: 0 2em; + + border: 0; + background-color: transparent; + + color: #fff; + font-size: .8em; + font-weight: normal; + + &:hover{ text-decoration: underline; } + + cursor: pointer; + } + + & > button:nth-child(2){ + + padding: .8em 1.5em; + + border: 0; + border-radius: 3px / 3px; + + background-color: $main; + + color: #fff; + font-size: .8em; + font-weight: normal; + + cursor: pointer; + + transition: background-color .1s ease-in-out; + + &:hover{ background-color: darken($main, 5%);} + &:active{ background-color: darken($main, 10%);} + } +} diff --git a/webpack/vue/dialog.vue b/webpack/vue/dialog.vue index 4722bd3..df2a55f 100644 --- a/webpack/vue/dialog.vue +++ b/webpack/vue/dialog.vue @@ -4,6 +4,7 @@
+
{{ 'blabla' }}
@@ -13,7 +14,10 @@
{{ type }} rooms
+ @click='rooms.visible=!rooms.visible'> + {{ type }} rooms +
+
@@ -25,7 +46,7 @@ name: 'wrapper-', - data(){ return { gs: gs.get }; }, + data(){ return { gs: gs.get, selected: 1}; }, components: { 'MenuComp': menu_vue,