feat(ui): add 24 hour clock format setting [LN-Zap#3600]

rahulbile · Nov 9, 2020 · df8b616 · df8b616
1 parent 1b64157
commit df8b616
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/config/default.js b/config/default.js
@@ -20,6 +20,7 @@ module.exports = {
   theme: 'dark',
   currency: 'USD',
   locale: 'en',
+  timeDisplayMode: '12Hour',
 
   autoupdate: {
     active: true,

diff --git a/renderer/components/Settings/SettingsFieldsGeneral.js b/renderer/components/Settings/SettingsFieldsGeneral.js
@@ -26,6 +26,15 @@ const themeMessageMapper = key => {
   return filters[key]
 }
 
+const displayModeItems = [{ key: '12Hour' }, { key: '24hour' }]
+const displayModeMessageMapper = key => {
+  const filters = {
+    '12Hour': messages.timeDisplayMode_option_12hour,
+    '24hour': messages.timeDisplayMode_option_24hour,
+  }
+  return filters[key]
+}
+
 const SettingsFieldsGeneral = ({ currentConfig }) => {
   return (
     <>
@@ -72,6 +81,21 @@ const SettingsFieldsGeneral = ({ currentConfig }) => {
 
       <Bar variant="light" />
 
+      <DataRow
+        left={<FieldLabel itemKey="timeDisplayMode" />}
+        right={
+          <Select
+            field="timeDisplayMode"
+            highlightOnValid={false}
+            initialValue={currentConfig.timeDisplayMode}
+            items={displayModeItems}
+            messageMapper={displayModeMessageMapper}
+          />
+        }
+      />
+
+      <Bar variant="light" />
+
       <DataRow
         left={<FieldLabel itemKey="autoupdate.active" />}
         right={<Toggle field="autoupdate.active" initialValue={currentConfig.autoupdate.active} />}

diff --git a/renderer/components/Settings/messages.js b/renderer/components/Settings/messages.js
@@ -63,4 +63,8 @@ export default defineMessages({
   payments_maxParts_label: 'Payment parts',
   payments_maxParts_description:
     'Maximum number of partial payments that may be used to send a payment.',
+  timeDisplayMode_label: 'Time display mode clock',
+  timeDisplayMode_description: 'Your preferred time display mode.',
+  timeDisplayMode_option_12hour: '12 Hour',
+  timeDisplayMode_option_24hour: '24 Hour',
 })