Commit fa8ed712ab5bde9f525c730497fbd46de5a352c9
Merge pull request #223 from ssbc/dark_crystal
Dark crystalmix irving authored on 8/10/2018, 10:34:35 AM
GitHub committed on 8/10/2018, 10:34:35 AM
Parent: cab191d64bed1ac52369366942b9d15937f5d785
Parent: 9929e33226632ad0d354876b6c73513d1e305a25
Files changed
app/html/modal.mcss | changed |
app/html/scroller.js | changed |
app/html/search-bar.js | changed |
app/page/imageSearch.js | changed |
app/page/imageSearch.mcss | changed |
app/page/query.js | changed |
app/styles/css/global.js | changed |
app/styles/mcss/button.mcss | changed |
app/styles/mcss/hypertabs.mcss | changed |
app/sync/catch-keyboard-shortcut.js | changed |
main.js | changed |
package-lock.json | changed |
package.json | changed |
app/html/modal.mcss | ||
---|---|---|
@@ -2,13 +2,13 @@ | ||
2 | 2 … | display: flex |
3 | 3 … | flex-direction: row |
4 | 4 … | position: fixed |
5 | 5 … | z-index: 90 |
6 | - text-align: center | |
7 | - top: 2.5rem | |
8 | - right: 0 | |
9 | - bottom: 0 | |
10 | - left: 0 | |
6 … | + | |
7 … | + top: var(--app-border-width) | |
8 … | + bottom: var(--app-border-width) | |
9 … | + left: var(--app-border-width) | |
10 … | + right: var(--app-border-width) | |
11 | 11 … | background: rgba(15, 0, 25, 0.78) |
12 | 12 … | |
13 | 13 … | div.content { |
14 | 14 … | max-width: 90vw |
@@ -18,27 +18,8 @@ | ||
18 | 18 … | $backgroundPrimary |
19 | 19 … | box-shadow: rgba(0,0,0,.34) 2px 6px 10px |
20 | 20 … | margin: auto |
21 | 21 … | $dontSelect |
22 | - | |
23 | - div.dialog { | |
24 | - div.message { | |
25 | - $colorFontPrimary | |
26 | - } | |
27 | - | |
28 | - div.actions { | |
29 | - display: flex | |
30 | - padding-top: 15px | |
31 | - | |
32 | - button { | |
33 | - margin: auto | |
34 | - | |
35 | - -primary { | |
36 | - $backgroundPrimary | |
37 | - } | |
38 | - } | |
39 | - } | |
40 | - } | |
41 | 22 … | } |
42 | 23 … | |
43 | 24 … | -open { |
44 | 25 … | display: flex |
app/html/scroller.js | ||
---|---|---|
@@ -8,9 +8,9 @@ | ||
8 | 8 … | |
9 | 9 … | function Scroller (opts = {}) { |
10 | 10 … | const { prepend = [], content = null, append = [], classList = [], className = '', title = '' } = opts |
11 | 11 … | |
12 | - const contentSection = h('section.content', content) | |
12 … | + const contentSection = h('section.content', { title: '' }, content) | |
13 | 13 … | |
14 | 14 … | const container = h('Scroller', |
15 | 15 … | { classList, className, title, style: { 'overflow-y': 'scroll', 'overflow-x': 'auto' } }, |
16 | 16 … | [ |
app/html/search-bar.js | ||
---|---|---|
@@ -73,9 +73,9 @@ | ||
73 | 73 … | // TODO extract |
74 | 74 … | function getPagesSuggestions (word) { |
75 | 75 … | const pages = [ |
76 | 76 … | 'blogs', 'calendar', 'posts', 'public', 'private', 'inbox', 'profile', 'notifications', 'settings', |
77 | - 'gatherings', 'chess', 'books', 'imageSearch', 'polls', 'query' | |
77 … | + 'gatherings', 'chess', 'books', 'imageSearch', 'polls', 'query', 'dark-crystal' | |
78 | 78 … | ] |
79 | 79 … | |
80 | 80 … | return pages |
81 | 81 … | .filter(page => ~page.indexOf(word)) |
app/page/imageSearch.js | ||
---|---|---|
@@ -102,9 +102,9 @@ | ||
102 | 102 … | }) |
103 | 103 … | |
104 | 104 … | const imageName = Value('CHOOSE YOUR OWN NAME') |
105 | 105 … | |
106 | - return [ | |
106 … | + return h('ImageSearchDetails', [ | |
107 | 107 … | h('img', { src: blobUrl(blob) }), |
108 | 108 … | h('div.md', [ |
109 | 109 … | 'Copy markdown: ', |
110 | 110 … | h('pre', ['![', imageName, '](', blob, ')']) |
@@ -122,9 +122,9 @@ | ||
122 | 122 … | focusedBlob.set() |
123 | 123 … | isOpen.set(false) |
124 | 124 … | } |
125 | 125 … | }, 'Close') |
126 | - ] | |
126 … | + ]) | |
127 | 127 … | }) |
128 | 128 … | return createModal(modalContent, { isOpen }) |
129 | 129 … | } |
130 | 130 … |
app/page/imageSearch.mcss | ||
---|---|---|
@@ -6,49 +6,8 @@ | ||
6 | 6 … | grid-template-rows: 5rem auto |
7 | 7 … | justify-content: center |
8 | 8 … | align-items: start |
9 | 9 … | |
10 | - div.Modal { | |
11 | - div.content { | |
12 | - display: grid | |
13 | - justify-items: center | |
14 | - | |
15 | - img { | |
16 | - max-width: 90vw | |
17 | - max-height: 80vh | |
18 | - | |
19 | - margin-bottom: 1rem | |
20 | - } | |
21 | - | |
22 | - div.md { | |
23 | - pre { | |
24 | - user-select: all | |
25 | - padding: .2rem | |
26 | - padding-right: 2rem | |
27 | - min-width: 39rem | |
28 | - background-color: rgba(0,0,0,.1) | |
29 | - | |
30 | - text-align: right | |
31 | - margin-top: .2rem | |
32 | - display: inline-block | |
33 | - } | |
34 | - } | |
35 | - | |
36 | - table { | |
37 | - tr { | |
38 | - td { | |
39 | - text-align: left | |
40 | - padding-right: .5rem | |
41 | - } | |
42 | - | |
43 | - td.msg { | |
44 | - font-family: monospace | |
45 | - } | |
46 | - } | |
47 | - } | |
48 | - } | |
49 | - } | |
50 | - | |
51 | 10 … | section.settings { |
52 | 11 … | padding: 1rem 0 |
53 | 12 … | input { |
54 | 13 … | min-width: 20rem |
@@ -81,4 +40,45 @@ | ||
81 | 40 … | margin: 0 1rem 1rem 0 |
82 | 41 … | } |
83 | 42 … | } |
84 | 43 … | } |
44 … | + | |
45 … | +ImageSearchDetails { | |
46 … | + padding: 1rem | |
47 … | + | |
48 … | + display: grid | |
49 … | + justify-items: center | |
50 … | + | |
51 … | + img { | |
52 … | + max-width: 90vw | |
53 … | + max-height: 80vh | |
54 … | + | |
55 … | + margin-bottom: 1rem | |
56 … | + } | |
57 … | + | |
58 … | + div.md { | |
59 … | + pre { | |
60 … | + user-select: all | |
61 … | + padding: .2rem | |
62 … | + padding-right: 2rem | |
63 … | + min-width: 39rem | |
64 … | + background-color: rgba(0,0,0,.1) | |
65 … | + | |
66 … | + text-align: right | |
67 … | + margin-top: .2rem | |
68 … | + display: inline-block | |
69 … | + } | |
70 … | + } | |
71 … | + | |
72 … | + table { | |
73 … | + tr { | |
74 … | + td { | |
75 … | + text-align: left | |
76 … | + padding-right: .5rem | |
77 … | + } | |
78 … | + | |
79 … | + td.msg { | |
80 … | + font-family: monospace | |
81 … | + } | |
82 … | + } | |
83 … | + } | |
84 … | +} |
app/page/query.js | ||
---|---|---|
@@ -37,19 +37,19 @@ | ||
37 | 37 … | } catch (err) { |
38 | 38 … | // console.error(err) |
39 | 39 … | return err |
40 | 40 … | } |
41 | - if (!Array.isArray(query)) return | |
42 | - if (!query.map(q => Object.keys(q)[0]).every(q => ['$filter', '$map', '$reduce'].includes(q))) return | |
43 | - activateQuery() | |
41 … | + if (isValidQuery(query)) activateQuery() | |
44 | 42 … | }) |
45 | - const query = Value(json5.parse(initial())) | |
46 | 43 … | |
44 … | + const { initialQuery, initialValue } = getInitialState(location) | |
45 … | + const query = Value(initialQuery) | |
46 … | + | |
47 | 47 … | const activateQuery = () => query.set(json5.parse(input())) |
48 | 48 … | |
49 | 49 … | return h('Query', { title: '/query' }, [ |
50 | 50 … | h('section.query', [ |
51 | - h('textarea', { 'ev-input': ev => input.set(ev.target.value), value: initial() }), | |
51 … | + h('textarea', { 'ev-input': ev => input.set(ev.target.value), value: initialValue }), | |
52 | 52 … | h('button', { |
53 | 53 … | className: when(error, '', '-primary'), |
54 | 54 … | disabled: when(error, 'disabled'), |
55 | 55 … | 'ev-click': activateQuery |
@@ -82,10 +82,18 @@ | ||
82 | 82 … | }) |
83 | 83 … | } |
84 | 84 … | } |
85 | 85 … | |
86 | -function initial () { | |
87 | - return `[{ | |
86 … | +function getInitialState (location) { | |
87 … | + const { initialQuery, initialValue } = location | |
88 … | + if (isValidQuery(initialQuery)) { | |
89 … | + return { | |
90 … | + initialQuery, | |
91 … | + initialValue: initialValue || json5.stringify(initialQuery, null, 2) | |
92 … | + } | |
93 … | + } | |
94 … | + | |
95 … | + const defaultValue = `[{ | |
88 | 96 … | $filter: { |
89 | 97 … | value: { |
90 | 98 … | timestamp: {$gt: 0}, |
91 | 99 … | content: { |
@@ -107,5 +115,16 @@ | ||
107 | 115 … | // $filter - used to prune down results. This must be the first entry, as ssb-query uses it to determine the most optimal index for fast lookup. |
108 | 116 … | |
109 | 117 … | // $map - optional, can be used to pluck data you want out. Doing this reduces the amount of data sent over muxrpc, which speeds up loading |
110 | 118 … | ` |
119 … | + return { | |
120 … | + initialQuery: json5.parse(defaultValue), | |
121 … | + initialValue: defaultValue | |
122 … | + } | |
111 | 123 … | } |
124 … | + | |
125 … | +function isValidQuery (query) { | |
126 … | + if (!Array.isArray(query)) return false | |
127 … | + if (!query.map(q => Object.keys(q)[0]).every(q => ['$filter', '$map', '$reduce'].includes(q))) return false | |
128 … | + | |
129 … | + return true | |
130 … | +} |
app/styles/css/global.js | ||
---|---|---|
@@ -32,10 +32,8 @@ | ||
32 | 32 … | } |
33 | 33 … | |
34 | 34 … | input:focus, .compose:focus { |
35 | 35 … | outline: none; |
36 | - border-color: #0088cc; | |
37 | - box-shadow: 0 0 4px #0088cc; | |
38 | 36 … | } |
39 | 37 … | |
40 | 38 … | input, textarea { |
41 | 39 … | border: 1px solid gainsboro; |
app/styles/mcss/button.mcss | ||
---|---|---|
@@ -35,8 +35,21 @@ | ||
35 | 35 … | border: 1px solid #15d6b4 |
36 | 36 … | outline: none |
37 | 37 … | } |
38 | 38 … | |
39 … | + :disabled { | |
40 … | + color: grey | |
41 … | + background: #fff | |
42 … | + | |
43 … | + cursor: initial | |
44 … | + | |
45 … | + :hover { | |
46 … | + color: grey | |
47 … | + background: #fff | |
48 … | + border: 1px #b9b9b9 solid | |
49 … | + } | |
50 … | + } | |
51 … | + | |
39 | 52 … | -subtle { |
40 | 53 … | color: #b9b9b9 |
41 | 54 … | border: 1px solid rgba(0,0,0,0) |
42 | 55 … | background: none |
app/styles/mcss/hypertabs.mcss | |||
---|---|---|---|
@@ -9,12 +9,14 @@ | |||
9 | 9 … | ||
10 | 10 … | height: initial | |
11 | 11 … | ||
12 | 12 … | nav { | |
13 | - display: flex | ||
14 | - | ||
13 … | + height: 2.3rem | ||
14 … | + min-height: 2.3rem | ||
15 | 15 … | background: none | |
16 | 16 … | ||
17 … | + display: flex | ||
18 … | + | ||
17 | 19 … | section.tabs { | |
18 | 20 … | min-width: 0 | |
19 | 21 … | ||
20 | 22 … | flex-grow: 1 | |
@@ -22,8 +24,9 @@ | |||
22 | 24 … | ||
23 | 25 … | div.tab { | |
24 | 26 … | flex-grow: 1 | |
25 | 27 … | ||
28 … | + z-index: 1000 | ||
26 | 29 … | min-width: 3.5rem | |
27 | 30 … | font-size: .9rem | |
28 | 31 … | background: rgba(0, 0, 0, 0) | |
29 | 32 … | ||
@@ -84,8 +87,9 @@ | |||
84 | 87 … | transition: all .2s ease-in | |
85 | 88 … | } | |
86 | 89 … | ||
87 | 90 … | -selected { | |
91 … | + z-index: 0 | ||
88 | 92 … | color: var(--page-color) | |
89 | 93 … | background: var(--page-background) | |
90 | 94 … | ||
91 | 95 … | a.link { | |
@@ -117,9 +121,10 @@ | |||
117 | 121 … | ||
118 | 122 … | } | |
119 | 123 … | ||
120 | 124 … | div.navExtra { | |
121 | - padding-bottom: var(--app-border-width) | ||
125 … | + z-index: 1000 | ||
126 … | + padding-bottom: calc(var(--app-border-width)/2) | ||
122 | 127 … | display: flex | |
123 | 128 … | align-items: center | |
124 | 129 … | } | |
125 | 130 … | } |
app/sync/catch-keyboard-shortcut.js | ||
---|---|---|
@@ -43,8 +43,10 @@ | ||
43 | 43 … | } |
44 | 44 … | } |
45 | 45 … | |
46 | 46 … | function genericShortcuts (ev, { tabs, search, goTo, back }) { |
47 … | + const scroll = tabs.currentPage().scroll || function () {} | |
48 … | + | |
47 | 49 … | // Messages |
48 | 50 … | if (ev.keyCode === 71) { // gg = scroll to top |
49 | 51 … | if (!gPressed) { |
50 | 52 … | gPressed = true |
@@ -52,18 +54,18 @@ | ||
52 | 54 … | gPressed = false |
53 | 55 … | }, 3000) |
54 | 56 … | return |
55 | 57 … | } |
56 | - tabs.currentPage().scroll('first') | |
58 … | + scroll('first') | |
57 | 59 … | } |
58 | 60 … | gPressed = false |
59 | 61 … | |
60 | 62 … | switch (ev.keyCode) { |
61 | 63 … | // Messages (cont'd) |
62 | 64 … | case 74: // j = older |
63 | - return tabs.currentPage().scroll(1) | |
65 … | + return scroll(1) | |
64 | 66 … | case 75: // k = newer |
65 | - return tabs.currentPage().scroll(-1) | |
67 … | + return scroll(-1) | |
66 | 68 … | case 13: // enter = open |
67 | 69 … | return goToMessage(ev, { goTo }) |
68 | 70 … | case 79: // o = open |
69 | 71 … | return goToMessage(ev, { goTo }) |
main.js | ||
---|---|---|
@@ -37,8 +37,9 @@ | ||
37 | 37 … | const sockets = combine( |
38 | 38 … | require('ssb-horcrux'), |
39 | 39 … | // require('patch-hub'), |
40 | 40 … | |
41 … | + require('patchbay-dark-crystal'), | |
41 | 42 … | require('patchbay-poll'), |
42 | 43 … | require('ssb-chess'), |
43 | 44 … | require('patchbay-gatherings'), |
44 | 45 … | require('patchbay-book'), |
package-lock.json | ||
---|---|---|
The diff is too large to show. Use a local git client to view these changes. Old file size: 293309 bytes New file size: 307487 bytes |
package.json | ||
---|---|---|
@@ -66,8 +66,9 @@ | ||
66 | 66 … | "patch-inbox": "^1.1.6", |
67 | 67 … | "patch-settings": "^1.1.2", |
68 | 68 … | "patch-suggest": "^2.0.2", |
69 | 69 … | "patchbay-book": "^1.0.8", |
70 … | + "patchbay-dark-crystal": "^1.0.1", | |
70 | 71 … | "patchbay-gatherings": "^2.0.2", |
71 | 72 … | "patchbay-poll": "^1.0.5", |
72 | 73 … | "patchcore": "^1.28.0", |
73 | 74 … | "pull-abortable": "^4.1.1", |
Built with git-ssb-web