Add <Settings /> page (#12)

* (wip) Add Settings page

* (wip) Add Settings page

Fix error using <Pager/> component

* Translation i18n of the Settings item

* Fix indentation

* Update Settings list view style

i18n/en.json

@@ -12,5 +12,13 @@
     "search-placeholder": "Search",
     "settings": "Settings",
     "centerkey-select": "Select",
-    "close": "Close"
+    "settings-close": "Close",
+    "settings-language": "Language",
+    "settings-textsize": "Text size",
+    "settings-about-wikipedia": "About Wikipedia",
+    "settings-privacy": "Privacy policy",
+    "settings-term": "Terms of use",
+    "settings-rate": "Rate the app",
+    "settings-help-feedback": "Help and feedback",
+    "settings-about-app": "About the app"
 }

i18n/qqq.json

@@ -11,5 +11,13 @@
 	"search-placeholder": "Placeholder of the search input.\n{{Identical|Search}}",
 	"settings": "Label of the settings key",
 	"centerkey-select": "Label of the center key to choose the selected element. This is used in several contexts when the arrow keys are used to move the focus between visual elements.",
-	"close": "Label of the close key\n{{Identical|Close}}"
+	"close": "Label of the close key\n{{Identical|Close}}",
+	"settings-language": "Label of the language item list. Shown in the Settings menu, used in language setting.",
+	"settings-textsize": "Label of the Text size item list. Shown in the Settings menu, used in text size setting.",
+	"settings-about-wikipedia": "Label of the About Wikipedia item list. Shown in the Settings menu, used in showing the information of Wikipedia.",
+	"settings-privacy": "Label of the Privacy policy item list. Shown in the Settings menu, redirect to the privacy policy browser page.",
+	"settings-term": "Label of Terms of use. Shown in the Settings menu, redirect to the Terms of use browser page.",
+	"settings-rate": "Label of the Rate item list. Shown in the Settings menu, used in rating the app.",
+	"settings-help-feedback": "Label of Help and feedback item list. Shown in the Settings menu, to find help and give feedback.",
+	"settings-about-app": "Label of the About the app item list. Shown in the Settings menu, used in showing the information of this app"
 }

src/components/ListView.js

@@ -11,10 +11,11 @@ export const ListView = ({ items, containerRef }) => {
       items.map(item => (
         <div class='item' data-selectable data-title={item.title} data-selected-key={item.title} key={item.title}>
           <div class='info'>
-            <div class='title' dangerouslySetInnerHTML={{ __html: item.titleHtml }} />
-            <div class='description'>{item.description}</div>
+            <div class='title' dangerouslySetInnerHTML={{ __html: item.titleHtml || item.title }} />
+            { item.description && <div class='description'>{item.description}</div> }
           </div>
           { item.imageUrl && <div class='img'><img src={item.imageUrl} /></div> }
+          { item.link && <div class='link'><img src='/images/link.svg' /></div> }
         </div>
 
       ))

src/components/Routes.js

@@ -1,11 +1,12 @@
 import { h } from 'preact'
 import Router from 'preact-router'
 import { createHashHistory } from 'history'
-import { Article, Search, QuickFacts } from 'components'
+import { Article, Search, Settings, QuickFacts } from 'components'
 
 export const Routes = () => (
   <Router history={createHashHistory()}>
     <Search path='/' />
+    <Settings path='/settings' />
     <Article path='/article/:lang/:title' />
     <QuickFacts path='/quickfacts/:lang/:title' />
   </Router>

src/components/Search.js

@@ -15,15 +15,20 @@ export const Search = () => {
 
   useEffect(() => {
     setNavigation(0)
-    softkey.dispatch({ type: 'setLeftText', value: i18n.i18n('settings') })
+    softkey.dispatch({ type: 'setLeftText', value: 'Settings' })
+    softkey.dispatch({ type: 'setOnKeyLeft', event: onKeyLeft })
+    softkey.dispatch({ type: 'setRightText', value: '' })
   }, [])
 
   useEffect(() => {
     softkey.dispatch({ type: 'setCenterText', value: current.type === 'INPUT' ? '' : i18n.i18n('centerkey-select') })
     softkey.dispatch({ type: 'setOnKeyCenter', event: onKeyCenter })
-    softkey.dispatch({ type: 'setOnKeyLeft', event: () => {} })
   }, [current.type])
 
+  const onKeyLeft = () => {
+    window.location.hash = '/settings'
+  }
+
   const onKeyCenter = () => {
     const element = document.querySelector('[nav-selected=true][data-title]')
     if (element) {

src/components/Settings.js

@@ -0,0 +1,43 @@
+import { h } from 'preact'
+import { useRef, useEffect } from 'preact/hooks'
+import { useNavigation, useI18n, useLanguage, useSoftkey } from 'hooks'
+import { ListView } from 'components'
+
+export const Settings = () => {
+  const containerRef = useRef()
+  const i18n = useI18n()
+  const lang = useLanguage()
+  const softkey = useSoftkey()
+
+  const [, setNavigation] = useNavigation(containerRef, 'y')
+
+  useEffect(() => {
+    setNavigation(0)
+    softkey.dispatch({ type: 'setLeftText', value: '' })
+    softkey.dispatch({ type: 'setRightText', value: i18n.i18n('close') })
+    softkey.dispatch({ type: 'setOnKeyRight', event: () => history.back() })
+    softkey.dispatch({ type: 'setCenterText', value: i18n.i18n('centerkey-select') })
+    softkey.dispatch({ type: 'setOnKeyCenter', event: onKeyCenter })
+  }, [])
+
+  const onKeyCenter = () => {
+    // @todo different action depending on the selected item
+  }
+
+  const items = [
+    { title: i18n.i18n('settings-language') },
+    { title: i18n.i18n('settings-textsize') },
+    { title: i18n.i18n('settings-about-wikipedia') },
+    { title: i18n.i18n('settings-privacy'), link: 'https://foundation.m.wikimedia.org/wiki/Privacy_policy' },
+    { title: i18n.i18n('settings-term'), link: `https://foundation.m.wikimedia.org/wiki/Terms_of_Use/${lang}` },
+    { title: i18n.i18n('settings-rate') },
+    { title: i18n.i18n('settings-help-feedback') },
+    { title: i18n.i18n('settings-about-app') }
+  ]
+
+  return <div class='page settings'>
+    {/* @todo thinking of <Header name='settings'/> */}
+    <div class='header'>Settings</div>
+    <ListView items={items} containerRef={containerRef} />
+  </div>
+}

src/components/index.js

@@ -5,4 +5,5 @@ export * from './Pager'
 export * from './QuickFacts'
 export * from './Routes'
 export * from './Search'
+export * from './Settings'
 export * from './Softkey'

style/listview.less

@@ -4,8 +4,6 @@
 	text-align: left;
 	overflow: scroll;
 	position: absolute;
-	top: 66px;
-	bottom: 30px;
 	text-align: left;
 }
 
@@ -19,6 +17,7 @@
 }
 
 .item .info {
+	font-family: @textFont;
 	height: 100%;
 	overflow: hidden;
 	display: flex;
@@ -54,6 +53,12 @@
 	border-radius: 4px;
 }
 
+.item .link {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
 .item[nav-selected="true"] {
 	background-color: #eaf3ff;
 }

style/search.less

@@ -28,4 +28,9 @@
 	.searchmatch {
 		font-weight: bold;
 	}
+
+	.list {
+		top: 66px;
+		bottom: @softkeysHeight;
+	}
 }

style/settings.less

@@ -0,0 +1,27 @@
+.settings {
+
+	.header {
+		height: @pageHeaderHeight;
+		max-height: @pageHeaderHeight;
+		background-color: #d8d8d8;
+		box-sizing: border-box;
+		padding: 3px 0;
+		font-family: @textFont regular;
+		font-size: 17px;
+		text-align: center;
+	}
+
+	.list {
+		top: @pageHeaderHeight;
+		bottom: @softkeysHeight;
+
+		.info .title {
+			font-family: @textFont;
+			font-size: 17px;
+		}
+
+		.item[nav-selected="true"] {
+			background-color: #eaecf0;
+		}
+	}   
+}

style/style.less

@@ -5,4 +5,5 @@
 @import './article';
 @import './softkey';
 @import './search';
+@import './settings';
 @import './listview';

style/variables.less

@@ -2,6 +2,8 @@
 @deviceHeight: 320px;
 // This is the top bar with clock, battery status, etc
 @headerHeight: 26px;
+// This is the app top bar with page header title
+@pageHeaderHeight: 28px;
 // This is the bottom bar with softkeys labels
 @softkeysHeight: 30px;