git ssb

16+

Dominic / patchbay



Commit 7911b511d193bfabd39ac967aecdc0570f2f452e

Browse Files

styling: tabs, search

mix irving committed on 4/2/2017, 7:12:47 AM
Parent: 4d3cb91c6ee16940192ca26735e900f4fe57ac80

Files changed

main/html/app.jschanged
main/html/hypertabs.mcsschanged
main/html/menu.mcsschanged
main/html/search.jsdeleted
main/html/search-bar.jsadded
main/html/search.mcssdeleted
main/html/search-bar.mcssadded
main/html/app.jsView
@@ -13,9 +13,9 @@
1313 html: {
1414 error: 'first',
1515 externalConfirm: 'first',
1616 menu: 'first',
17- search: 'first'
17+ searchBar: 'first'
1818 },
1919 sync: {
2020 catchKeyboardShortcut: 'first'
2121 }
@@ -39,9 +39,9 @@
3939
4040 addPage(path, true, false)
4141 return change
4242 }
43- const search = api.main.html.search(handleSelection)
43+ const search = api.main.html.searchBar(handleSelection)
4444 const menu = api.main.html.menu(handleSelection)
4545
4646 const tabs = Tabs(onSelect, { append: h('div.navExtra', [ search, menu ]) })
4747 function onSelect (indexes) {
main/html/hypertabs.mcssView
@@ -25,17 +25,20 @@
2525 font-size: .9rem
2626 background-color: #efefef
2727 overflow: hidden
2828
29- padding: 0 .4rem
29+ padding: 0
3030 margin-left: .6rem
3131 border: 1px gainsboro solid
3232 border-bottom: none
3333
3434 -selected {
3535 color: #222
3636 background-color: #fff
3737
38+ a.link {
39+ max-width: calc(100% - 2rem)
40+ }
3841 a.close {
3942 visibility: visible
4043 }
4144 }
@@ -58,18 +61,35 @@
5861 flex-grow: 1
5962 flex-shrink: 0
6063 overflow-x: hidden
6164 min-width: 0
62- max-width: 90%
65+ max-width: calc(100% - 1.4rem)
6366 white-space: nowrap
6467 text-overflow: ellipsis
6568
66- padding: 0.5rem .2rem
69+ padding: .5rem 0 .5rem .6rem
6770 }
6871
6972 a.close {
7073 visibility: hidden
74+ font-family: monospace
75+ line-height: 1rem
76+ width: .9rem
77+ height: .9rem
78+ /* border-radius: 1rem */
79+
80+ margin-right: .3rem
81+
82+ display: flex
83+ justify-content: center
84+
85+ :hover {
86+ background: #aaaaaa
87+ color: #fff
88+ font-weight: 600
89+ }
7190 }
91+
7292 }
7393
7494 }
7595
main/html/menu.mcssView
@@ -3,24 +3,19 @@
33 width: .7rem
44 height: .7rem
55 border-radius: 1rem
66
7- margin-right: .5rem
7+ margin: 0 .5rem
88
99 div {
1010 display: none
1111
1212 position: absolute
1313 top: .5em
1414 right: 0
15- padding-top: .5em
16- padding-bottom: .5em
17- padding-right: 1em
18- padding-left: 1em
19- background: #f5f5f5
20- border: 1px solid #eee
15+ padding: 2rem 1rem .5rem
16+ background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0) 1.5rem, #f5f5f5 1.5rem, #f5f5f5)
2117 z-index: 5
22-
2318 }
2419
2520 -active {
2621 div {
main/html/search.jsView
@@ -1,68 +1,0 @@
1-const nest = require('depnest')
2-const { h } = require('mutant')
3-const addSuggest = require('suggest-box')
4-
5-exports.gives = nest('main.html.search')
6-
7-exports.needs = nest({
8- 'about.async.suggest': 'first',
9- 'channel.async.suggest': 'first'
10-})
11-
12-exports.create = function (api) {
13- return nest('main.html.search', search)
14-
15- function search (go) {
16- const getProfileSuggestions = api.about.async.suggest()
17- const getChannelSuggestions = api.channel.async.suggest()
18-
19- const input = h('input', {
20- type: 'search',
21- placeholder: '?search, @name, #channel',
22- 'ev-keyup': ev => {
23- switch (ev.keyCode) {
24- case 13: // enter
25- if (go(input.value.trim(), !ev.ctrlKey)) {
26- input.blur()
27- }
28- return
29- case 27: // escape
30- ev.preventDefault()
31- input.blur()
32- return
33- }
34- }
35- })
36- input.go = go // crude navigation api
37- input.addEventListener('suggestselect', ev => {
38- input.value = ev.detail.id // HACK : this over-rides the markdown value
39-
40- // if (go(input.value.trim(), !ev.ctrlKey))
41- // input.blur()
42- })
43- const search = h('Search', input)
44-
45- search.input = input
46- search.activate = (sigil, ev) => {
47- input.focus()
48- ev.preventDefault()
49- if (input.value[0] === sigil) {
50- input.selectionStart = 1
51- input.selectionEnd = input.value.length
52- } else {
53- input.value = sigil
54- }
55- }
56-
57- addSuggest(input, (inputText, cb) => {
58- if (inputText[0] === '@') {
59- cb(null, getProfileSuggestions(inputText.slice(1)))
60- } else if (inputText[0] === '#') {
61- cb(null, getChannelSuggestions(inputText.slice(1)))
62- }
63- }, {cls: 'SuggestBox'})
64-
65- return search
66- }
67-}
68-
main/html/search-bar.jsView
@@ -1,0 +1,68 @@
1+const nest = require('depnest')
2+const { h } = require('mutant')
3+const addSuggest = require('suggest-box')
4+
5+exports.gives = nest('main.html.searchBar')
6+
7+exports.needs = nest({
8+ 'about.async.suggest': 'first',
9+ 'channel.async.suggest': 'first'
10+})
11+
12+exports.create = function (api) {
13+ return nest('main.html.searchBar', search)
14+
15+ function search (go) {
16+ const getProfileSuggestions = api.about.async.suggest()
17+ const getChannelSuggestions = api.channel.async.suggest()
18+
19+ const input = h('input', {
20+ type: 'search',
21+ placeholder: '?search, @name, #channel',
22+ 'ev-keyup': ev => {
23+ switch (ev.keyCode) {
24+ case 13: // enter
25+ if (go(input.value.trim(), !ev.ctrlKey)) {
26+ input.blur()
27+ }
28+ return
29+ case 27: // escape
30+ ev.preventDefault()
31+ input.blur()
32+ return
33+ }
34+ }
35+ })
36+ input.go = go // crude navigation api
37+ input.addEventListener('suggestselect', ev => {
38+ input.value = ev.detail.id // HACK : this over-rides the markdown value
39+
40+ // if (go(input.value.trim(), !ev.ctrlKey))
41+ // input.blur()
42+ })
43+ const search = h('SearchBar', input)
44+
45+ search.input = input
46+ search.activate = (sigil, ev) => {
47+ input.focus()
48+ ev.preventDefault()
49+ if (input.value[0] === sigil) {
50+ input.selectionStart = 1
51+ input.selectionEnd = input.value.length
52+ } else {
53+ input.value = sigil
54+ }
55+ }
56+
57+ addSuggest(input, (inputText, cb) => {
58+ if (inputText[0] === '@') {
59+ cb(null, getProfileSuggestions(inputText.slice(1)))
60+ } else if (inputText[0] === '#') {
61+ cb(null, getChannelSuggestions(inputText.slice(1)))
62+ }
63+ }, {cls: 'SuggestBox'})
64+
65+ return search
66+ }
67+}
68+
main/html/search.mcssView
@@ -1,13 +1,0 @@
1-Search {
2- input {
3- height: 1.4rem
4- border-radius: .1rem
5-
6- padding-left: .7rem
7- padding-right: .5rem
8-
9- margin-left: 1em
10- /* margin-right: 1em */
11- }
12-}
13-
main/html/search-bar.mcssView
@@ -1,0 +1,15 @@
1+SearchBar {
2+ input {
3+ height: 1.4rem
4+
5+ padding-left: .7rem
6+ padding-right: .5rem
7+
8+ margin-left: 1rem
9+
10+ border: 1px #dcdcdc solid;
11+ border-radius: 0
12+ font-size: .9rem;
13+ }
14+}
15+

Built with git-ssb-web