From acb141b2a262fc969f16c3bad0d8f7c38b2a1dd7 Mon Sep 17 00:00:00 2001
From: Hermann Blum <hermannsblum@yahoo.de>
Date: Tue, 13 Mar 2018 18:26:17 +0100
Subject: [PATCH] move icons and iconbuttons to elements
---
src/views/elements.js | 30 +++++++++++++++++++++++++++++-
src/views/selectList.js | 28 ++--------------------------
2 files changed, 31 insertions(+), 27 deletions(-)
diff --git a/src/views/elements.js b/src/views/elements.js
index 83d8805..f39db2a 100644
--- a/src/views/elements.js
+++ b/src/views/elements.js
@@ -1,4 +1,5 @@
-const m = require('mithril');
+import m from 'mithril';
+import { IconButton } from 'polythene-mithril';
export class inputGroup {
constructor(vnode) {
@@ -51,3 +52,30 @@ export class submitButton {
return m('div.btn', argsCopy, text);
}
}
+
+export const icons = {
+ iconSearchSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>',
+ iconBackSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>',
+ iconClearSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+};
+
+export const BackButton = {
+ view: ({ attrs }) => m(IconButton, {
+ icon: { svg: m.trust(icons.iconBackSVG) },
+ ink: false,
+ events: { onclick: attrs.leave },
+ }),
+};
+export const ClearButton = {
+ view: ({ attrs }) => m(IconButton, {
+ icon: { svg: m.trust(icons.iconClearSVG) },
+ ink: false,
+ events: { onclick: attrs.clear },
+ }),
+};
+export const SearchIcon = {
+ view: () => m(IconButton, {
+ icon: { svg: m.trust(icons.iconSearchSVG) },
+ inactive: true,
+ }),
+};
diff --git a/src/views/selectList.js b/src/views/selectList.js
index 5fa5510..9df3d40 100644
--- a/src/views/selectList.js
+++ b/src/views/selectList.js
@@ -6,33 +6,9 @@ import {
} from 'polythene-mithril';
import infinite from 'mithril-infinite';
import { debounce } from '../utils';
-
-const iconSearchSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
-const iconBackSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/></svg>";
-const iconClearSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
+import { icons, BackButton, ClearButton, SearchIcon } from './elements';
const createSearchField = () => {
- const BackButton = {
- view: ({ attrs }) => m(IconButton, {
- icon: { svg: m.trust(iconBackSVG) },
- ink: false,
- events: { onclick: attrs.leave },
- }),
- };
- const ClearButton = {
- view: ({ attrs }) => m(IconButton, {
- icon: { svg: m.trust(iconClearSVG) },
- ink: false,
- events: { onclick: attrs.clear },
- }),
- };
- const SearchIcon = {
- view: () => m(IconButton, {
- icon: { svg: m.trust(iconSearchSVG) },
- inactive: true,
- }),
- };
-
return {
oninit: vnode => {
const value = Stream("");
@@ -123,7 +99,7 @@ export default class SelectList {
return m('div', [
this.selected ? m(Toolbar, { compact: true }, [
m(IconButton, {
- icon: { svg: m.trust(iconClearSVG) },
+ icon: { svg: m.trust(icons.iconClearSVG) },
ink: false,
events: { onclick: () => { this.selected = null; } },
}),
--
GitLab