Files: 507fd00b8b5b1bad3e4d7deec559f222828bf339 / app / page / settings.js
5360 bytesRaw
1 | const nest = require('depnest') |
2 | const { h, computed, when } = require('mutant') |
3 | const electron = require('electron') |
4 | const path = require('path') |
5 | const { version } = require('../../package.json') |
6 | |
7 | |
8 | exports.gives = nest('app.page.settings') |
9 | |
10 | exports.needs = nest({ |
11 | 'about.html.image': 'first', |
12 | 'about.obs.name': 'first', |
13 | 'about.obs.description': 'first', |
14 | 'history.sync.push': 'first', |
15 | 'history.obs.store': 'first', |
16 | 'keys.sync.id': 'first', |
17 | 'message.html.markdown': 'first', |
18 | 'settings.sync.get': 'first', |
19 | 'settings.sync.set': 'first', |
20 | 'settings.obs.get': 'first', |
21 | 'translations.sync.strings': 'first', |
22 | 'backup.html.exportIdentityButton': 'first' |
23 | }) |
24 | |
25 | const LANGUAGES = ['zh', 'en'] |
26 | |
27 | exports.create = (api) => { |
28 | return nest('app.page.settings', settings) |
29 | |
30 | function settings(location) { |
31 | // RESET the app when the settings are changed |
32 | api.settings.obs.get('language')(() => { |
33 | console.log('language changed, resetting view') |
34 | |
35 | // clear history back to start page |
36 | api.history.obs.store().set([ |
37 | { page: 'blogIndex' } |
38 | ]) |
39 | api.history.sync.push({ page: 'settings' }) |
40 | }) |
41 | |
42 | const webSharingMetricsOption = api.settings.obs.get('ticktack.websharemetrics') |
43 | const feed = api.keys.sync.id() |
44 | const strings = api.translations.sync.strings() |
45 | const currentLanguage = api.settings.sync.get('language') |
46 | const exportIdentityButton = api.backup.html.exportIdentityButton() |
47 | |
48 | const editProfile = () => api.history.sync.push({ |
49 | page: 'userEdit', |
50 | feed, |
51 | callback: (err, didEdit) => { |
52 | if (err) throw new Error('Error editing profile', err) |
53 | api.history.sync.push({ page: 'settings' }) |
54 | } |
55 | }) |
56 | |
57 | return h('Page -settings', [ |
58 | h('div.content', [ |
59 | h('h1', strings.settingsPage.title), |
60 | h('section -avatar', [ |
61 | h('div.left'), |
62 | h('div.right', api.about.html.image(feed)) |
63 | ]), |
64 | h('section -name', [ |
65 | h('div.left', strings.settingsPage.section.name), |
66 | h('div.right', [ |
67 | api.about.obs.name(feed), |
68 | h('img', { |
69 | src: path.join(__dirname, '../../assets', 'edit.png'), |
70 | 'ev-click': editProfile |
71 | }) |
72 | // h('i.fa.fa-pencil', { 'ev-click': editProfile }) |
73 | ]) |
74 | ]), |
75 | h('section -introduction', [ |
76 | h('div.left', strings.settingsPage.section.introduction), |
77 | h('div.right', computed(api.about.obs.description(feed), d => api.message.html.markdown(d || ''))) |
78 | ]), |
79 | h('section -language', [ |
80 | h('div.left', strings.settingsPage.section.language), |
81 | h('div.right', LANGUAGES.map(Language)) |
82 | ]), |
83 | h('section -zoom', [ |
84 | h('div.left', strings.settingsPage.section.zoom), |
85 | h('div.right', [zoomButton(-0.1, '-'), zoomButton(+0.1, '+')]) |
86 | ]), |
87 | h('section -theme', [ |
88 | h('div.left', strings.settingsPage.section.theme), |
89 | h('div.right', ['light', 'dark'].map(Theme)) |
90 | ]), |
91 | h('section -sharing', [ |
92 | h('div.left', strings.share.settings.caption), |
93 | h('div.right', [].concat( |
94 | webSharingOption('public', strings.share.settings.publicOption), |
95 | webSharingOption('author', strings.share.settings.authorAndYouOption), |
96 | webSharingOption('private', strings.share.settings.justYouOption) |
97 | )) |
98 | ]), |
99 | h('section -version', [ |
100 | h('div.left', strings.settingsPage.section.version), |
101 | h('div.right', version) |
102 | ]), |
103 | h('section -backup', [ |
104 | h('div.left', strings.backup.sectionName), |
105 | h('div.right', [ |
106 | exportIdentityButton |
107 | ]) |
108 | ]) |
109 | ]) |
110 | ]) |
111 | |
112 | function Language(lang) { |
113 | const selectLang = () => api.settings.sync.set({ language: lang }) |
114 | const className = currentLanguage === lang ? '-strong' : '' |
115 | |
116 | return h('Button -language', |
117 | { |
118 | 'ev-click': () => selectLang(lang), |
119 | className |
120 | }, |
121 | strings.languages[lang] |
122 | ) |
123 | } |
124 | |
125 | function Theme(theme) { |
126 | const currentTheme = api.settings.obs.get('ticktack.theme') |
127 | const className = computed(currentTheme, t => t === theme ? '-strong' : '') |
128 | |
129 | return h('Button -language', |
130 | { |
131 | 'ev-click': () => currentTheme.set(theme), |
132 | className |
133 | }, |
134 | strings.themes[theme] |
135 | ) |
136 | } |
137 | |
138 | function zoomButton(increment, symbol) { |
139 | const { getCurrentWebContents } = electron.remote |
140 | return h('Button -zoom', |
141 | { |
142 | 'ev-click': () => { |
143 | var zoomFactor = api.settings.sync.get('ticktack.electron.zoomFactor', 1) |
144 | var newZoomFactor = zoomFactor + increment |
145 | api.settings.sync.set('ticktack.electron.zoomFactor', newZoomFactor) |
146 | getCurrentWebContents().setZoomFactor(newZoomFactor) |
147 | } |
148 | }, |
149 | symbol |
150 | ) |
151 | } |
152 | |
153 | function webSharingOption(v, label) { |
154 | let myOption = computed(webSharingMetricsOption, opt => opt === v) |
155 | |
156 | const selectWebSharingOption = () => { |
157 | webSharingMetricsOption.set(v) |
158 | } |
159 | |
160 | return h('Button -websharingmetrics', |
161 | { |
162 | 'ev-click': () => selectWebSharingOption(v), |
163 | className: when(myOption, '-strong', '') |
164 | }, |
165 | label |
166 | ) |
167 | } |
168 | } |
169 | } |
170 |
Built with git-ssb-web