git ssb

1
var { h, when } = require('mutant')
2
var nest = require('depnest')
3
4
var themeNames = Object.keys(require('../../../../styles'))
5
6
exports.needs = nest({
7
  'settings.obs.get': 'first',
8
  'settings.sync.set': 'first',
9
  'intl.sync.locales': 'first',
10
  'intl.sync.i18n': 'first',
11
  'intl.sync.localeNames': 'first'
12
})
13
14
exports.gives = nest('page.html.render')
15
16
exports.create = function (api) {
17
  return nest('page.html.render', function channel (path) {
18
    if (path !== '/settings') return
19
    const i18n = api.intl.sync.i18n
20
21
    const currentTheme = api.settings.obs.get('patchwork.theme')
22
    const currentLang = api.settings.obs.get('patchwork.lang')
23
    const locales = api.intl.sync.locales()
24
    const localeNameLookup = api.intl.sync.localeNames()
25
    const currentFontSize = api.settings.obs.get('patchwork.fontSize')
26
    const fontSizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px']
27
    const filterFollowing = api.settings.obs.get('filters.following')
28
29
    var prepend = [
30
      h('PageHeading', [
31
        h('h1', [
32
          h('strong', i18n('Settings'))
33
        ])
34
      ])
35
    ]
36
37
    return h('Scroller', { style: { overflow: 'auto' } }, [
38
      h('div.wrapper', [
39
        h('section.prepend', prepend),
40
        h('section.content', [
41
42
          h('section', [
43
            h('h2', i18n('Theme')),
44
            h('select', {
45
              style: {
46
                'font-size': '120%'
47
              },
48
              value: when(currentTheme, currentTheme, 'light'),
49
              'ev-change': (ev) => api.settings.sync.set({
50
                patchwork: {theme: ev.target.value}
51
              })
52
            }, [
53
              themeNames.map(name => h('option', {value: name}, [name]))
54
            ])
55
          ]),
56
57
          h('section', [
58
            h('h2', i18n('Language')),
59
            h('select', {
60
              style: {
61
                'font-size': '120%'
62
              },
63
              value: when(currentLang, currentLang, 'en'),
64
              'ev-change': (ev) => api.settings.sync.set({
65
                patchwork: {lang: ev.target.value}
66
              })
67
            }, [
68
              locales.map(code => h('option', {value: code}, [
69
                '[', code, '] ', getLocaleName(code)
70
              ]))
71
            ])
72
          ]),
73
74
          h('section', [
75
            h('h2', i18n('Font Size')),
76
            h('select', {
77
              style: {
78
                'font-size': '120%'
79
              },
80
              value: when(currentFontSize, currentFontSize, ''),
81
              'ev-change': (ev) => api.settings.sync.set({
82
                patchwork: {fontSize: ev.target.value}
83
              })
84
            }, [
85
              h('option', {value: ''}, 'Default'),
86
              fontSizes.map(size => h('option', {value: size}, size))
87
            ])
88
          ]),
89
90
          h('section', [
91
            h('h2', i18n('Filters')),
92
            h('label', [
93
              h('input', {
94
                type: 'checkbox',
95
                checked: filterFollowing,
96
                'ev-change': (ev) => api.settings.sync.set({
97
                  filters: {following: ev.target.checked}
98
                })
99
              }), i18n(' Hide following messages')
100
            ])
101
          ])
102
        ])
103
      ])
104
    ])
105
106
    function getLocaleName (code) {
107
      var translated = i18n(code)
108
      var name = localeNameLookup[code]
109
110
      if (name !== translated && code !== translated) {
111
        return `${name} (${translated})`
112
      } else {
113
        return name
114
      }
115
    }
116
  })
117
}
118