Alamantus/Readlebee
1
0
Fork 0
mirror of https://gitlab.com/Alamantus/Readlebee.git synced 2025-05-14 22:21:18 +02:00
Code Issues Releases Wiki Activity

Use i18n as example in views

Browse source
This commit is contained in:
Robbie Antenesse 2019-09-09 17:08:11 -06:00
parent 64bda6f982
commit 951d07e11f
3 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/views/home/index.js
View file

@ -1,31 +1,33 @@
import html from 'choo/html'; import html from 'choo/html';
import { I18n } from '../../i18n';
import './styles.scss'; // Creates a separate CSS file, but allows better code splitting. import './styles.scss'; // Creates a separate CSS file, but allows better code splitting.
// We'll see if code splitting is worth it in the end or if we should combine everything into `src/index.scss` // We'll see if code splitting is worth it in the end or if we should combine everything into `src/index.scss`
import { HomeController } from './controller'; // The controller for this view, where processing should happen. import { HomeController } from './controller'; // The controller for this view, where processing should happen.
// This is the view function that is exported and used in the view manager. // This is the view function that is exported and used in the view manager.
export const homeView = (state, emit) => { export const homeView = (state, emit) => {
const i18n = new I18n(state);
const controller = new HomeController(state); const controller = new HomeController(state);
// Returning an array in a view allows non-shared parent HTML elements. // Returning an array in a view allows non-shared parent HTML elements.
// This one doesn't have the problem right now, but it's good to remember. // This one doesn't have the problem right now, but it's good to remember.
return [ return [
html`<section> html`<section>
<h2 class="subtitle">An attempt at a viable alternative to Goodreads</h2> <h2 class="subtitle">${i18n.__('home.subtitle')}</h2>
<article class="flex two"> <article class="flex two">
<div class="half"> <div class="half">
<div class="card"> <div class="card">
<header> <header>
<p>Still gotta figure out a design.</p> <p>${i18n.__('home.temp_left')}</p>
</header> </header>
</div> </div>
</div> </div>
<div class="half"> <div class="half">
<div class="card"> <div class="card">
<header> <header>
<p>It's early days, my friends!</p> <p>${i18n.__('home.temp_right')}</p>
</header> </header>
</div> </div>
</div> </div>

10
app/views/login/index.js
View file

@ -1,19 +1,23 @@
import html from 'choo/html'; import html from 'choo/html';
import { I18n } from '../../i18n';
export const loginView = (state, emit) => { export const loginView = (state, emit) => {
const i18n = new I18n(state);
return html`<section> return html`<section>
<article class="card"> <article class="card">
<div class="container wide"> <div class="container wide">
<label> <label>
<span>Email</span> <span>${i18n.__('login.email')}</span>
<input type="email" name="email"> <input type="email" name="email">
</label> </label>
<label> <label>
<span>Password</span> <span>${i18n.__('login.password')}</span>
<input type="password" name="password"> <input type="password" name="password">
</label> </label>
<input type="submit" value="Log In!"> <input type="submit" value="${i18n.__('login.login_button')}">
</div> </div>
</article> </article>

15
app/views/search/index.js
View file

@ -1,23 +1,24 @@
import html from 'choo/html'; import html from 'choo/html';
// We'll see if code splitting is worth it in the end or if we should combine everything into `src/index.scss` import { I18n } from '../../i18n';
import { SearchController } from './controller'; // The controller for this view, where processing should happen. import { SearchController } from './controller'; // The controller for this view, where processing should happen.
// This is the view function that is exported and used in the view manager. // This is the view function that is exported and used in the view manager.
export const searchView = (state, emit) => { export const searchView = (state, emit) => {
const i18n = new I18n(state);
const controller = new SearchController(state); const controller = new SearchController(state);
if (!controller.state.done && controller.hasQuery) { // if (!controller.state.done && controller.hasQuery) {
controller.searchOpenLibrary(state.query.for).then(() => { // controller.searchOpenLibrary(state.query.for).then(() => {
emit('render'); // emit('render');
}); // });
} // }
// Returning an array in a view allows non-shared parent HTML elements. // Returning an array in a view allows non-shared parent HTML elements.
// This one doesn't have the problem right now, but it's good to remember. // This one doesn't have the problem right now, but it's good to remember.
return [ return [
html`<section> html`<section>
<h2 class="subtitle">An attempt at a viable alternative to Goodreads</h2> <h2 class="subtitle">${i18n.__('search.header')}</h2>
<article> <article>
${controller.results.map(result => { ${controller.results.map(result => {