git ssb

3+

ev / decent



Commit be2b32581fe158b1a94f71b6dd4c9268a9c1bbcf

Browse Files

make theme customizable and pre-programmed in decent

Ev Bogue committed on 9/17/2017, 8:30:43 PM
Parent: 5b989f191a6fbad490238a1c0366b1a2340ef26c

Files changed

build/index.htmlchanged
client/modules/theme.jschanged
client/scripts/style.jschanged
client/style.csschanged
client/style.css.jsonchanged
client/theme.cssadded
client/theme.css.jsonadded
package.jsonchanged
build/index.htmlView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 1229893 bytes
New file size: 1229709 bytes
client/modules/theme.jsView
@@ -9,11 +9,14 @@
99 …
1010 … exports.create = function (api) {
1111 … return {
1212 … screen_view: function (path, sbot) {
13- if (localStorage.style === null) {
14- localStorage.style = '.screen {background: red;}'
13 …+ var defaultTheme = require('../theme.css.json')
14 …+ console.log(defaultTheme)
15 …+ if (localStorage.style == null) {
16 …+ localStorage.style = defaultTheme
1517 … }
18 …+
1619 … document.head.appendChild(h('style', localStorage.style))
1720 …
1821 … if(path === 'Theme') {
1922 … var theme = h('textarea.theme', localStorage.style)
@@ -21,18 +24,30 @@
2124 … var div = h('div.column.scroller',
2225 … {style: {'overflow':'auto'}},
2326 … h('div.scroller__wrapper',
2427 … h('div.column.scroller__content',
25- theme,
26- h('button', {onclick: function (e){
27- if(theme.value) {
28- localStorage.style = theme.value
28 …+ h('div.message',
29 …+ h('h1', 'Theme'),
30 …+ h('p', {innerHTML: 'Style your client using cascading style sheets (css) in the textarea below. Your styles will be saved into <code>localStorage.style</code>. Use the reset button below if you get too creative.'}),
31 …+ theme,
32 …+ h('br'),
33 …+ h('button', {onclick: function (e){
34 …+ if(theme.value) {
35 …+ localStorage.style = theme.value
36 …+ e.preventDefault()
37 …+ alert('Theme updated')
38 …+ }
39 …+ location.hash = ""
40 …+ location.reload()
41 …+ }}, 'Save'),
42 …+ h('button', {onclick: function (e){
43 …+ delete localStorage.style
2944 … e.preventDefault()
30- alert('Theme updated')
31- }
32- location.hash = ""
33- location.reload()
34- }}, 'Save')
45 …+ alert('Reset to default theme')
46 …+ location.hash = ""
47 …+ location.reload()
48 …+ }}, 'Reset')
49 …+ )
3550 … )
3651 … )
3752 … )
3853 … return div
client/scripts/style.jsView
@@ -1,8 +1,13 @@
11 … var fs = require('fs')
22 … var path = require('path')
33 …
4 …+
45 … fs.writeFileSync(
56 … path.join(__dirname, '..', 'style.css.json'),
67 … JSON.stringify(fs.readFileSync(path.join(__dirname, '..', 'style.css'), 'utf8'))
78 … )
89 …
10 …+fs.writeFileSync(
11 …+ path.join(__dirname, '..', 'theme.css.json'),
12 …+ JSON.stringify(fs.readFileSync(path.join(__dirname, '..', 'theme.css'), 'utf8'))
13 …+)
client/style.cssView
@@ -1,20 +1,15 @@
1-body, input, button, p, li, h1, h2, h3, h4, h5, h6, textarea {
2- font-family: "Source Sans Pro", sans-serif;
3-}
41 …
52 … .navbar {
6- background: #eee;
7- background: linear-gradient(#fff, #eee);
3 …+ background: #fff;
84 … width: 100%;
95 … position: fixed;
106 … z-index: 1000;
117 … margin: 0;
128 … padding-top: .6em;
139 … padding-bottom: .2em;
1410 … left: 0; right: 0;
1511 … top: 0;
16- border-bottom: 1px solid #ddd;
1712 … }
1813 …
1914 … .navbar .internal {
2015 … max-width: 620px;
@@ -27,23 +22,12 @@
2722 … padding-left: 1em;
2823 … list-style-type: none;
2924 … }
3025 …
31-a:link, a:visited, a:active {
32- color: #333;
33- text-decoration: underline;
34-}
35-
36-a:hover,
37-a:focus {
38- color: black;
39-}
40-
4126 … * {
4227 … word-wrap: break-word;
4328 … }
4429 …
45-
4630 … pre {
4731 … height: auto;
4832 … max-height: 200px;
4933 … overflow: auto;
@@ -75,9 +59,8 @@
7559 … position: absolute;
7660 … top: 2.5em; bottom: 0;
7761 … left: 0; right: 0;
7862 … overflow-y: hidden;
79- background: #f5f5f5;
8063 … }
8164 …
8265 … .column {
8366 … display: flex;
@@ -135,24 +118,25 @@
135118 … flex: 1;
136119 … }
137120 …
138121 … .scroller__content {
122 …+ width: 100%;
139123 … }
140124 …
141125 … .scroller__wrapper {
142126 … margin-left: auto;
143127 … margin-right: auto;
144- max-width: 580px;
145128 … }
146129 …
147130 … /* compose */
148131 …
149132 … .compose {
150133 … margin-top: .5em;
151134 … }
152135 …
153-input, textarea {
154- border: 1px solid #eee;
136 …+.theme {
137 …+ height: 20em;
138 …+ width: 100%;
155139 … }
156140 …
157141 … textarea {
158142 … font-size: 1em;
@@ -161,19 +145,14 @@
161145 …
162146 … /* messages */
163147 …
164148 … .message {
165- border: 1px solid #eee;
166149 … position: relative;
167150 … flex-basis: 0;
168- padding: .5em;
169- margin-top: .2em;
170- background: white;
171151 … }
172152 …
173153 … .message_content {
174154 … margin-top: 5px;
175- border-top: 1px solid #eee;
176155 … padding-top: 3px;
177156 … }
178157 …
179158 … .message_content--mini div > span {
@@ -354,84 +333,8 @@
354333 … .error {
355334 … background: red;
356335 … }
357336 …
358-/* tabs */
359-
360-.left {
361- position: fixed;
362- left: 0;
363- width: 25%;
364- height: 100%;
365- background: #f5f5f5;
366-}
367-
368-.hypertabs__content {
369- margin-left: auto;
370- width: 75%;
371-}
372-
373-/* --- hypertabs ------- */
374-
375-.hypertabs__tabs {
376- min-width: 0px;
377- width: 100%;
378- border-radius 2px;
379-}
380-
381-.hypertabs__tab {
382- overflow-x: hidden;
383- min-width: 0px;
384- border: 1px solid #eee;
385- margin-top: -1px;
386- background: white;
387-}
388-
389-.hypertabs__tab:hover {
390- background: #f5f5f5;
391- color: black;
392-}
393-
394-.hypertabs__button {
395- overflow-x: hidden;
396- min-width: 0px;
397- width: 100%;
398- padding-left: 1em;
399-}
400-
401-.hypertabs__tab {
402- color: black;
403- border-top-left-radius: 5px;
404- margin-left: -3px;
405- padding-top: .5em;
406- border-left: 1px solid #ccc;
407- width: 100%;
408- height: 1.5em;
409-}
410-
411-.hypertabs__tab > a {
412- color: #666;
413- text-decoration: none;
414- white-space: nowrap;
415- font-size: .9em;
416-}
417-
418-.hypertabs--selected {
419- font-weight: bold;
420- background: #f5f5f5;
421- border-top-right-radius: 5px;
422- z-index: 3;
423-}
424-
425-.hypertabs__x {
426- display: none;
427- transform: translate(-4px, -2px);
428-}
429-
430-.hypertabs--selected .hypertabs__x {
431- display: block;
432-}
433-
434337 … /* progress bar */
435338 …
436339 … .hyperprogress__bar {
437340 … background: darkgrey;
client/style.css.jsonView
@@ -1,1 +1,1 @@
1-"body, input, button, p, li, h1, h2, h3, h4, h5, h6, textarea {\n font-family: \"Source Sans Pro\", sans-serif;\n}\n\n.navbar {\n background: #eee;\n background: linear-gradient(#fff, #eee);\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .6em;\n padding-bottom: .2em;\n left: 0; right: 0;\n top: 0;\n border-bottom: 1px solid #ddd;\n}\n\n.navbar .internal {\n max-width: 620px; \n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n float: left;\n padding-left: 1em;\n list-style-type: none;\n}\n\na:link, a:visited, a:active {\n color: #333;\n text-decoration: underline;\n}\n\na:hover,\na:focus {\n color: black;\n}\n\n* {\n word-wrap: break-word;\n}\n\n\npre {\n height: auto;\n max-height: 200px;\n overflow: auto;\n background-color: #eeeeee;\n word-break: normal !important;\n word-wrap: normal !important;\n white-space: pre !important;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\np {\n margin-top: .35ex;\n}\n\nhr {\n border: solid #eee;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n.screen {\n width: 100%;\n position: absolute;\n top: 2.5em; bottom: 0;\n left: 0; right: 0;\n overflow-y: hidden;\n background: #f5f5f5;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-height:0px;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n min-height:0px;\n}\n\n.end {\n justify-content: flex-end;\n}\n\n.wrap {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.no-shrink {\n flex-shrink: 0;\n}\n\n.expand {\n justify-content: space-between;\n}\n\n.scroll-y {\n overflow-y: auto;\n min-height: 0px;\n}\n\n.scroll-x {\n overflow-x: auto;\n min-width: 0px;\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.wide {\n width: 100%;\n}\n\n/* scrolling feeds, threads */\n\n.scroller {\n width: 100%;\n flex: 1;\n}\n\n.scroller__content {\n}\n\n.scroller__wrapper {\n margin-left: auto;\n margin-right: auto;\n max-width: 580px; \n}\n\n/* compose */\n\n.compose {\n margin-top: .5em;\n}\n\ninput, textarea {\n border: 1px solid #eee;\n}\n\ntextarea {\n font-size: 1em;\n margin: 0;\n}\n\n/* messages */\n\n.message {\n border: 1px solid #eee;\n position: relative;\n flex-basis: 0;\n padding: .5em;\n margin-top: .2em;\n background: white;\n}\n\n.message_content {\n margin-top: 5px;\n border-top: 1px solid #eee;\n padding-top: 3px;\n}\n\n.message_content--mini div > span {\n display: inline-block;\n}\n\n.message_meta {\n margin-left: auto;\n}\n\n.message_meta > * {\n margin-left: .5ex;\n}\n\n.message_actions {\n float: right;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.message > .title > .avatar {\n margin-left: 0;\n}\n\n.message_content {\n padding: .5ex;\n}\n\n.actions > :not(:last-child) {\n border-right: 2px solid #eee;\n padding-right: 5px;\n}\n\n.emoji {\n height: 1em;\n width: 1em;\n vertical-align: top;\n}\n\n\n/* -- suggest box */\n\n.suggest-box > * {\n display: block;\n}\n\n.suggest-box ul {\n padding: 0;\n list-style-type: none;\n padding-left: 0;\n margin: 0;\n}\n\n.suggest-box .selected {\n background: #ddd;\n}\n\n.suggest-box {\n width: max-content;\n background: white;\n}\n\n/* emoji */\n.suggest-box img {\n height: 20px;\n width: 20px;\n}\n\n/* avatar */\n\n.avatar--profile {\n width: 5em;\n height: 5em;\n float: left;\n}\n\n.avatar--full {\n width: 100%;\n}\n\n.avatar--large {\n width: 3.5em;\n height: 3.5em;\n}\n\n.avatar--thumbnail {\n width: 2.5em;\n height: 2.5em;\n float: left;\n margin-right: .5ex;\n}\n\n.avatar--tiny {\n width: 26px;\n height: 26px;\n}\n\n.avatar--fullsize {\n width: 50%;\n border-radius: 5px;\n}\n\n.profile {\n padding: .5ex;\n}\n\n.profile__info {\n margin-left: .5em;\n}\n\n/* lightbox - used in message-confirm */\n\n.lightbox {\n overflow: auto;\n margin-top: 3em;\n margin-bottom: 3em;\n width: 90%;\n max-width: 600px;\n z-index: 5;\n}\n\n/* searchprompt */\n\n.searchprompt {\n margin-top: 1px;\n margin-bottom: 1px;\n float: left;\n padding: .5em;\n width: 85%;\n}\n\n.header__search {\n position: absolute;\n bottom: .5em;\n left: .5em;\n}\n\n.header__profile {\n margin: .7em;\n}\n\n/* TextNodeSearcher highlights */\n\n.highlight {\n background: yellow;\n}\n\n/* avatar editor */\n\n.hypercrop__canvas {\n width: 100%;\n}\n\n/* gitssb */\n\n.git-table-wrapper {\n max-height: 12em;\n overflow: auto;\n word-break: break-all;\n margin: 1em 0;\n}\n\n.git-table-wrapper table {\n width: 100%;\n}\n\n/* --- network status --- */\n\n.status {\n width: 1em;\n height: 1em;\n margin: .5em;\n background: green;\n}\n\n.error {\n background: red;\n}\n\n/* tabs */\n\n.left {\n position: fixed;\n left: 0;\n width: 25%;\n height: 100%;\n background: #f5f5f5;\n}\n\n.hypertabs__content {\n margin-left: auto;\n width: 75%;\n}\n\n/* --- hypertabs ------- */\n\n.hypertabs__tabs {\n min-width: 0px;\n width: 100%;\n border-radius 2px;\n}\n\n.hypertabs__tab {\n overflow-x: hidden;\n min-width: 0px;\n border: 1px solid #eee;\n margin-top: -1px;\n background: white;\n}\n\n.hypertabs__tab:hover {\n background: #f5f5f5;\n color: black;\n}\n\n.hypertabs__button {\n overflow-x: hidden;\n min-width: 0px;\n width: 100%;\n padding-left: 1em;\n}\n\n.hypertabs__tab {\n color: black;\n border-top-left-radius: 5px;\n margin-left: -3px;\n padding-top: .5em;\n border-left: 1px solid #ccc;\n width: 100%;\n height: 1.5em;\n}\n\n.hypertabs__tab > a {\n color: #666;\n text-decoration: none;\n white-space: nowrap;\n font-size: .9em;\n}\n\n.hypertabs--selected {\n font-weight: bold;\n background: #f5f5f5;\n border-top-right-radius: 5px;\n z-index: 3;\n}\n\n.hypertabs__x {\n display: none; \n transform: translate(-4px, -2px);\n}\n\n.hypertabs--selected .hypertabs__x {\n display: block;\n}\n\n/* progress bar */\n\n.hyperprogress__bar {\n background: darkgrey;\n}\n.hyperprogress__liquid {\n background: lightblue;\n}\n\n\n"
1 …+"\n.navbar {\n background: #fff;\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .6em;\n padding-bottom: .2em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 620px; \n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n float: left;\n padding-left: 1em;\n list-style-type: none;\n}\n\n* {\n word-wrap: break-word;\n}\n\npre {\n height: auto;\n max-height: 200px;\n overflow: auto;\n background-color: #eeeeee;\n word-break: normal !important;\n word-wrap: normal !important;\n white-space: pre !important;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\np {\n margin-top: .35ex;\n}\n\nhr {\n border: solid #eee;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n.screen {\n width: 100%;\n position: absolute;\n top: 2.5em; bottom: 0;\n left: 0; right: 0;\n overflow-y: hidden;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-height:0px;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n min-height:0px;\n}\n\n.end {\n justify-content: flex-end;\n}\n\n.wrap {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.no-shrink {\n flex-shrink: 0;\n}\n\n.expand {\n justify-content: space-between;\n}\n\n.scroll-y {\n overflow-y: auto;\n min-height: 0px;\n}\n\n.scroll-x {\n overflow-x: auto;\n min-width: 0px;\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.wide {\n width: 100%;\n}\n\n/* scrolling feeds, threads */\n\n.scroller {\n width: 100%;\n flex: 1;\n}\n\n.scroller__content {\n width: 100%;\n}\n\n.scroller__wrapper {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* compose */\n\n.compose {\n margin-top: .5em;\n}\n\n.theme {\n height: 20em;\n width: 100%;\n}\n\ntextarea {\n font-size: 1em;\n margin: 0;\n}\n\n/* messages */\n\n.message {\n position: relative;\n flex-basis: 0;\n}\n\n.message_content {\n margin-top: 5px;\n padding-top: 3px;\n}\n\n.message_content--mini div > span {\n display: inline-block;\n}\n\n.message_meta {\n margin-left: auto;\n}\n\n.message_meta > * {\n margin-left: .5ex;\n}\n\n.message_actions {\n float: right;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.message > .title > .avatar {\n margin-left: 0;\n}\n\n.message_content {\n padding: .5ex;\n}\n\n.actions > :not(:last-child) {\n border-right: 2px solid #eee;\n padding-right: 5px;\n}\n\n.emoji {\n height: 1em;\n width: 1em;\n vertical-align: top;\n}\n\n\n/* -- suggest box */\n\n.suggest-box > * {\n display: block;\n}\n\n.suggest-box ul {\n padding: 0;\n list-style-type: none;\n padding-left: 0;\n margin: 0;\n}\n\n.suggest-box .selected {\n background: #ddd;\n}\n\n.suggest-box {\n width: max-content;\n background: white;\n}\n\n/* emoji */\n.suggest-box img {\n height: 20px;\n width: 20px;\n}\n\n/* avatar */\n\n.avatar--profile {\n width: 5em;\n height: 5em;\n float: left;\n}\n\n.avatar--full {\n width: 100%;\n}\n\n.avatar--large {\n width: 3.5em;\n height: 3.5em;\n}\n\n.avatar--thumbnail {\n width: 2.5em;\n height: 2.5em;\n float: left;\n margin-right: .5ex;\n}\n\n.avatar--tiny {\n width: 26px;\n height: 26px;\n}\n\n.avatar--fullsize {\n width: 50%;\n border-radius: 5px;\n}\n\n.profile {\n padding: .5ex;\n}\n\n.profile__info {\n margin-left: .5em;\n}\n\n/* lightbox - used in message-confirm */\n\n.lightbox {\n overflow: auto;\n margin-top: 3em;\n margin-bottom: 3em;\n width: 90%;\n max-width: 600px;\n z-index: 5;\n}\n\n/* searchprompt */\n\n.searchprompt {\n margin-top: 1px;\n margin-bottom: 1px;\n float: left;\n padding: .5em;\n width: 85%;\n}\n\n.header__search {\n position: absolute;\n bottom: .5em;\n left: .5em;\n}\n\n.header__profile {\n margin: .7em;\n}\n\n/* TextNodeSearcher highlights */\n\n.highlight {\n background: yellow;\n}\n\n/* avatar editor */\n\n.hypercrop__canvas {\n width: 100%;\n}\n\n/* gitssb */\n\n.git-table-wrapper {\n max-height: 12em;\n overflow: auto;\n word-break: break-all;\n margin: 1em 0;\n}\n\n.git-table-wrapper table {\n width: 100%;\n}\n\n/* --- network status --- */\n\n.status {\n width: 1em;\n height: 1em;\n margin: .5em;\n background: green;\n}\n\n.error {\n background: red;\n}\n\n/* progress bar */\n\n.hyperprogress__bar {\n background: darkgrey;\n}\n.hyperprogress__liquid {\n background: lightblue;\n}\n\n\n"
client/theme.cssView
@@ -1,0 +1,42 @@
1 …+body, input, button, p, li, h1, h2, h3, h4, h5, h6, textarea {
2 …+ font-family: "Source Sans Pro", sans-serif;
3 …+}
4 …+
5 …+a:link, a:visited, a:active {
6 …+ color: #333;
7 …+ text-decoration: underline;
8 …+}
9 …+
10 …+a:hover,
11 …+a:focus {
12 …+ color: black;
13 …+}
14 …+
15 …+.navbar {
16 …+ background: #eee;
17 …+ background: linear-gradient(#fff, #eee);
18 …+ border-bottom: 1px solid #ddd;
19 …+}
20 …+
21 …+.screen {
22 …+ background: #f5f5f5;
23 …+}
24 …+
25 …+.scroller__wrapper {
26 …+ max-width: 580px;
27 …+}
28 …+
29 …+input, textarea {
30 …+ border: 1px solid #eee;
31 …+}
32 …+
33 …+.message {
34 …+ border: 1px solid #eee;
35 …+ padding: .5em;
36 …+ margin-top: .2em;
37 …+ background: white;
38 …+}
39 …+
40 …+.message_content {
41 …+ border-top: 1px solid #eee;
42 …+}
client/theme.css.jsonView
@@ -1,0 +1,1 @@
1 …+"body, input, button, p, li, h1, h2, h3, h4, h5, h6, textarea {\n font-family: \"Source Sans Pro\", sans-serif;\n}\n\na:link, a:visited, a:active {\n color: #333;\n text-decoration: underline;\n}\n\na:hover,\na:focus {\n color: black;\n}\n\n.navbar {\n background: #eee;\n background: linear-gradient(#fff, #eee);\n border-bottom: 1px solid #ddd;\n}\n\n.screen {\n background: #f5f5f5;\n}\n\n.scroller__wrapper {\n max-width: 580px;\n}\n\ninput, textarea {\n border: 1px solid #eee;\n}\n\n.message {\n border: 1px solid #eee;\n padding: .5em;\n margin-top: .2em;\n background: white;\n}\n\n.message_content {\n border-top: 1px solid #eee;\n}\n"
package.jsonView
@@ -1,7 +1,7 @@
11 … {
22 … "name": "decent",
3- "version": "3.1.0",
3 …+ "version": "3.2.0",
44 … "description": "A decent(tralized) network for communication and development",
55 … "scripts": {
66 … "start": "node decent server",
77 … "build": "node client/scripts/style.js && mkdir -p build && browserify client/index.js | indexhtmlify > build/index.html",

Built with git-ssb-web