Commit db1b91bf9f68e6db25b325fd506058608428302e
push styling more towards kik
mix irving committed on 8/11/2017, 5:11:20 AMParent: daba97bd476315a1c5da4761622e3c4ad7d7dd1d
Files changed
| app/html/thread.mcss | changed |
| app/page/home.js | changed |
| app/page/home.mcss | changed |
| styles/mixins.js | changed |
| app/html/thread.mcss | ||
|---|---|---|
| @@ -5,9 +5,9 @@ | ||
| 5 | 5 | div.my-chunk { |
| 6 | 6 | $chunk |
| 7 | 7 | |
| 8 | 8 | justify-content: space-between |
| 9 | - | |
| 9 | + | |
| 10 | 10 | div.avatar { |
| 11 | 11 | visibility: hidden |
| 12 | 12 | } |
| 13 | 13 | |
| @@ -67,9 +67,9 @@ | ||
| 67 | 67 | div.msg { |
| 68 | 68 | line-height: 1.2rem |
| 69 | 69 | background-color: #fff |
| 70 | 70 | padding: 0 .7rem |
| 71 | - margin-bottom: .1rem | |
| 71 | + margin-bottom: .1rem | |
| 72 | 72 | border-radius: .3rem |
| 73 | 73 | } |
| 74 | 74 | div.msg-spacer { |
| 75 | 75 | flex-grow: grow |
| app/page/home.js | ||
|---|---|---|
| @@ -65,38 +65,58 @@ | ||
| 65 | 65 | function link(location) { |
| 66 | 66 | return {'ev-click': () => api.history.sync.push(location)} |
| 67 | 67 | } |
| 68 | 68 | |
| 69 | - function item (context, thread) { | |
| 69 | + function item (context, thread, opts = {}) { | |
| 70 | 70 | if(!thread.value) return |
| 71 | + | |
| 72 | + const subjectEl = h('div.subject', [ | |
| 73 | + opts.nameRecipients | |
| 74 | + ? h('div.recps', buildRecipientNames(thread).map(recp => h('div.recp', recp))) | |
| 75 | + : null, | |
| 76 | + subject(thread) | |
| 77 | + ]) | |
| 78 | + | |
| 71 | 79 | const lastReply = thread.replies && last(thread.replies) |
| 72 | 80 | const replyEl = lastReply |
| 73 | 81 | ? h('div.reply', [ |
| 74 | - h('div.author', [api.about.obs.name(lastReply.value.author), ':']), | |
| 75 | - subject(lastReply) | |
| 76 | - ]) | |
| 82 | + h('div.replySymbol', '► '), | |
| 83 | + subject(lastReply) | |
| 84 | + ]) | |
| 77 | 85 | : null |
| 78 | 86 | |
| 87 | + | |
| 88 | + // REFACTOR: move this to a template? | |
| 89 | + function buildRecipientNames (thread) { | |
| 90 | + const myId = api.keys.sync.id() | |
| 91 | + | |
| 92 | + return thread.value.content.recps | |
| 93 | + .map(link => isString(link) ? link : link.link) | |
| 94 | + .filter(link => link !== myId) | |
| 95 | + .map(api.about.obs.name) | |
| 96 | + } | |
| 97 | + | |
| 79 | 98 | return h('div.thread', link(thread), [ |
| 80 | 99 | h('div.context', context), |
| 81 | 100 | h('div.content', [ |
| 82 | - h('div.subject', [subject(thread)]), | |
| 101 | + subjectEl, | |
| 83 | 102 | replyEl |
| 84 | 103 | ]) |
| 85 | 104 | ]) |
| 86 | 105 | } |
| 87 | 106 | |
| 88 | - function threadGroup (threads, obj, toName) { | |
| 107 | + function threadGroup (threads, obj, toContext, opts) { | |
| 89 | 108 | // threads = a state object for all the types of threads |
| 90 | 109 | // obj = a map of keys to root ids, where key ∈ (channel | group | concatenated list of pubkeys) |
| 91 | - // toName = fn that derives a name from a particular thread | |
| 92 | - | |
| 110 | + // toContext = fn that derives the context of the group | |
| 111 | + // opts = { nameRecipients } | |
| 112 | + | |
| 93 | 113 | var groupEl = h('div.threads') |
| 94 | 114 | for(var k in obj) { |
| 95 | 115 | var id = obj[k] |
| 96 | 116 | var thread = get(threads, ['roots', id]) |
| 97 | 117 | if(thread && thread.value) { |
| 98 | - var el = item(toName(k, thread), thread) | |
| 118 | + var el = item(toContext(k, thread), thread, opts) | |
| 99 | 119 | if(el) groupEl.appendChild(el) |
| 100 | 120 | } |
| 101 | 121 | } |
| 102 | 122 | return groupEl |
| @@ -118,18 +138,18 @@ | ||
| 118 | 138 | h('h2', 'Direct Messages'), |
| 119 | 139 | threadGroup( |
| 120 | 140 | threads, |
| 121 | 141 | threads.private, |
| 122 | - function (_, msg) { | |
| 142 | + function (_, msg) | |
| 123 | 143 | // NB: msg passed in is actually a 'thread', but only care about root msg |
| 124 | 144 | const myId = api.keys.sync.id() |
| 125 | - | |
| 145 | + | |
| 126 | 146 | return msg.value.content.recps |
| 127 | 147 | .map(link => isString(link) ? link : link.link) |
| 128 | - .filter(link => link !== myId) | |
| 148 | + .filter(link => link !== myId) | |
| 129 | 149 | .map(api.about.html.image) |
| 130 | - | |
| 131 | - } | |
| 150 | + }, | |
| 151 | + { nameRecipients: true } | |
| 132 | 152 | ) |
| 133 | 153 | ]) |
| 134 | 154 | |
| 135 | 155 | const channelUpdatesSection = h('section.updates -channel', [ |
| app/page/home.mcss | ||
|---|---|---|
| @@ -3,16 +3,37 @@ | ||
| 3 | 3 | div.container { |
| 4 | 4 | $primaryBackground |
| 5 | 5 | |
| 6 | 6 | section.updates { |
| 7 | + | |
| 7 | 8 | -directMessage { |
| 8 | 9 | $homePageSection |
| 10 | + | |
| 11 | + div.threads { | |
| 12 | + div.thread { | |
| 13 | + div.content { | |
| 14 | + div.subject { | |
| 15 | + display: flex | |
| 16 | + | |
| 17 | + div.recps { | |
| 18 | + display: flex | |
| 19 | + font-weight: 600 | |
| 20 | + margin-right: .4rem | |
| 21 | + | |
| 22 | + div.recp { | |
| 23 | + margin-right: .4rem | |
| 24 | + } | |
| 25 | + } | |
| 26 | + } | |
| 27 | + } | |
| 28 | + } | |
| 29 | + } | |
| 9 | 30 | } |
| 10 | 31 | |
| 11 | 32 | -channel { |
| 12 | 33 | $homePageSection |
| 13 | 34 | |
| 14 | - div.threads { | |
| 35 | + div.threads { | |
| 15 | 36 | div.thread { |
| 16 | 37 | div.context { |
| 17 | 38 | background: #fff |
| 18 | 39 | min-width: 8rem |
| @@ -71,17 +92,19 @@ | ||
| 71 | 92 | border: 1px solid #ddd |
| 72 | 93 | border-radius: 1rem |
| 73 | 94 | |
| 74 | 95 | div.subject { |
| 75 | - font-weight: 600 | |
| 96 | + font-size: 1.2rem | |
| 76 | 97 | margin-bottom: .3rem |
| 77 | 98 | |
| 78 | - $smallMarkdown | |
| 99 | + $largeMarkdown | |
| 79 | 100 | } |
| 80 | 101 | div.reply { |
| 81 | 102 | display: flex |
| 82 | - div.author { | |
| 83 | - font-weight: 600 | |
| 103 | + color: #444 | |
| 104 | + | |
| 105 | + div.replySymbol { | |
| 106 | + margin-left: .7rem | |
| 84 | 107 | margin-right: .3rem |
| 85 | 108 | } |
| 86 | 109 | |
| 87 | 110 | $smallMarkdown |
| styles/mixins.js | ||
|---|---|---|
| @@ -36,15 +36,26 @@ | ||
| 36 | 36 | } |
| 37 | 37 | |
| 38 | 38 | $smallMarkdown { |
| 39 | 39 | div.Markdown { |
| 40 | - h1, h2, h3, h4, h5, h6, p { | |
| 41 | - font-size: 1rem | |
| 42 | - margin: 0 | |
| 40 | + h1, h2, h3, h4, h5, h6, p { | |
| 41 | + font-size: 1rem | |
| 42 | + font-weight: 300 | |
| 43 | + margin: 0 | |
| 43 | 44 | } |
| 44 | 45 | } |
| 45 | 46 | } |
| 46 | 47 | |
| 48 | +$largeMarkdown { | |
| 49 | + div.Markdown { | |
| 50 | + h1, h2, h3, h4, h5, h6, p { | |
| 51 | + font-size: 1.2rem | |
| 52 | + font-weight: 300 | |
| 53 | + margin: 0 | |
| 54 | + } | |
| 55 | + } | |
| 56 | +} | |
| 57 | + | |
| 47 | 58 | $roundLeft { |
| 48 | 59 | border-top-left-radius: .9rem |
| 49 | 60 | border-bottom-left-radius: .9rem |
| 50 | 61 | } |
Built with git-ssb-web