Commit c832291043e90838b8656aef72999e78f04099cc
issue #69: style and coding fixes as proposed by @mixmix and a new mixin for preventing text selection.
andre alves garzia committed on 1/24/2018, 12:59:02 PMParent: 3de6deea99de778ea8784164b9e0976c92e6bfef
Files changed
| app/html/lightbox.js | changed |
| app/html/lightbox.mcss | changed |
| contact/html/block.js | changed |
| styles/mixins.js | changed |
| app/html/lightbox.js | ||
|---|---|---|
| @@ -5,15 +5,20 @@ | ||
| 5 | 5 | |
| 6 | 6 | exports.create = (api) => { |
| 7 | 7 | return nest('app.html.lightbox', (content, isOpen) => { |
| 8 | 8 | |
| 9 | - function closeMe() { | |
| 10 | - isOpen.set(false) | |
| 11 | - } | |
| 9 | + if (typeof isOpen !== 'function') isOpen = Value(false) | |
| 12 | 10 | |
| 13 | - return h('Lightbox', {className: when(isOpen, '-open', '-close'), 'ev-click': () => closeMe() }, | |
| 14 | - h('Content', [ | |
| 11 | + const closeMe = () => isOpen.set(false) | |
| 12 | + | |
| 13 | + | |
| 14 | + const lb = h('Lightbox', { className: when(isOpen, '-open', '-close'), 'ev-click': closeMe }, | |
| 15 | + h('div.content', {'ev-click': (ev) => ev.stopPropagation()},[ | |
| 15 | 16 | content |
| 16 | 17 | ])) |
| 18 | + | |
| 19 | + lb.close = closeMe | |
| 20 | + | |
| 21 | + return lb | |
| 17 | 22 | }) |
| 18 | 23 | } |
| 19 | 24 | |
| app/html/lightbox.mcss | ||
|---|---|---|
| @@ -1,46 +1,47 @@ | ||
| 1 | 1 | Lightbox { |
| 2 | - display: flex; | |
| 3 | - flex-direction: row; | |
| 4 | - position: fixed; | |
| 5 | - z-index: 999; | |
| 6 | - width: 100%; | |
| 7 | - height: 100%; | |
| 8 | - text-align: center; | |
| 9 | - top: 0; | |
| 10 | - left: 0; | |
| 11 | - background: rgba(0,0,0,0.8); | |
| 2 | + display: flex | |
| 3 | + flex-direction: row | |
| 4 | + position: fixed | |
| 5 | + z-index: 999 | |
| 6 | + width: 100% | |
| 7 | + height: 100% | |
| 8 | + text-align: center | |
| 9 | + top: 0 | |
| 10 | + left: 0 | |
| 11 | + background: rgba(0,0,0,0.8) | |
| 12 | 12 | |
| 13 | - div.Content { | |
| 14 | - margin: auto; | |
| 15 | - padding: 30px; | |
| 16 | - border-radius: 5px; | |
| 17 | - $backgroundPrimary | |
| 13 | + div.content { | |
| 14 | + margin: auto | |
| 15 | + padding: 30px | |
| 16 | + border-radius: 5px | |
| 17 | + $backgroundPrimary | |
| 18 | + $dontSelect | |
| 18 | 19 | |
| 19 | - div.dialog { | |
| 20 | - div.message { | |
| 21 | - $colorFontPrimary | |
| 22 | - } | |
| 20 | + div.dialog { | |
| 21 | + div.message { | |
| 22 | + $colorFontPrimary | |
| 23 | + } | |
| 23 | 24 | |
| 24 | - div.actions { | |
| 25 | - display: flex | |
| 26 | - padding-top: 15px; | |
| 25 | + div.actions { | |
| 26 | + display: flex | |
| 27 | + padding-top: 15px | |
| 27 | 28 | |
| 28 | - div.Button { | |
| 29 | - margin: auto; | |
| 29 | + div.Button { | |
| 30 | + margin: auto | |
| 30 | 31 | |
| 31 | - -primary { | |
| 32 | - $backgroundPrimary | |
| 33 | - } | |
| 34 | - } | |
| 35 | - } | |
| 32 | + -primary { | |
| 33 | + $backgroundPrimary | |
| 34 | + } | |
| 36 | 35 | } |
| 36 | + } | |
| 37 | 37 | } |
| 38 | + } | |
| 38 | 39 | |
| 39 | - -open { | |
| 40 | - display: flex; | |
| 41 | - } | |
| 40 | + -open { | |
| 41 | + display: flex; | |
| 42 | + } | |
| 42 | 43 | |
| 43 | - -close { | |
| 44 | - display: none; | |
| 45 | - } | |
| 44 | + -close { | |
| 45 | + display: none; | |
| 46 | + } | |
| 46 | 47 | } |
| contact/html/block.js | ||
|---|---|---|
| @@ -27,17 +27,23 @@ | ||
| 27 | 27 | const youBlockThem = computed(theirBlockers, blockers => blockers.includes(myId)) |
| 28 | 28 | const { unblock, block } = api.contact.async |
| 29 | 29 | const className = when(youBlockThem, '-blocking') |
| 30 | 30 | |
| 31 | + const isOpen = Value(false) | |
| 32 | + | |
| 33 | + const blockAndClose = (feed) => { | |
| 34 | + block(feed) | |
| 35 | + isOpen.set(false) | |
| 36 | + } | |
| 37 | + | |
| 31 | 38 | const confirmationDialog = h("div.dialog", [ |
| 32 | 39 | h("div.message",strings.userShow.action.blockConfirmationMessage), |
| 33 | 40 | h("div.actions", [ |
| 34 | - h('Button', strings.userShow.action.cancel), | |
| 35 | - h('Button -primary',{'ev-click': () => block(feed)}, strings.userShow.action.block) | |
| 41 | + h('Button', {'ev-click': () => isOpen.set(false)}, strings.userShow.action.cancel), | |
| 42 | + h('Button -primary', {'ev-click': () => blockAndClose(feed)}, strings.userShow.action.block) | |
| 36 | 43 | ]) |
| 37 | 44 | ]) |
| 38 | 45 | |
| 39 | - const isOpen = Value(false) | |
| 40 | 46 | const lb = api.app.html.lightbox(confirmationDialog, isOpen) |
| 41 | 47 | |
| 42 | 48 | return h('Block', { className }, [ |
| 43 | 49 | when(theirBlockers.sync, |
Built with git-ssb-web