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, window.getComputedStyle(document.documentElement).fontSize),
81
              'ev-change': (ev) => api.settings.sync.set({
82
                patchwork: {fontSize: ev.target.value}
83
              })
84
            }, fontSizes.map(size => h('option', {value: size}, size)))
85
          ]),
86
87
          h('section', [
88
            h('h2', i18n('Filters')),
89
            h('label', [
90
              h('input', {
91
                type: 'checkbox',
92
                checked: filterFollowing,
93
                'ev-change': (ev) => api.settings.sync.set({
94
                  filters: {following: ev.target.checked}
95
                })
96
              }), i18n(' Hide following messages')
97
            ])
98
          ])
99
        ])
100
      ])
101
    ])
102
103
    function getLocaleName (code) {
104
      var translated = i18n(code)
105
      var name = localeNameLookup[code]
106
107
      if (name !== translated && code !== translated) {
108
        return `${name} (${translated})`
109
      } else {
110
        return name
111
      }
112
    }
113
  })
114
}
115