LT 281: Users shall be able to switch between themes (#45)

* LT-281: Users shall be able to switch between themes * Avoiding compatibility issues * Typo fixing
2016-11-15 08:24:30 +01:00
1 parent 0ba77cd0b1
commit 20a2a8e453
@@ -0,0 +1,3 @@
+import './themeSelectorModal/themeSelectorModal.html';
+import './themeSelectorModal/themeSelectorModal.styl';
+import './themeSelectorModal/themeSelectorModal.js';
@@ -0,0 +1,28 @@
+<template name="themeSelectorModal">
+    <div class="modal" id="themeSelectorModal" tabindex="-1" role="dialog" aria-labelledby="themeSelectorModalLabel">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="themeSelectorModalLabel"><i class="fa fa-sliders"></i> Themes</h4>
+                </div>
+                <div class="modal-body">
+                    <ul class="theme-list text-center">
+                        {{#each theme in themes}}
+                            <li class="text-center preview-theme {{addClassIfSelected theme}}" data-theme="{{theme}}">
+                                <div class="icon-wrapper">
+                                    <span class="theme-icon-{{theme}}"></span>
+                                </div>
+                                <h4 class="theme-title">{{ucFirst theme}}</h4>
+                            </li>
+                        {{/each}}
+                    </ul>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default js-cancel" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary js-apply" data-dismiss="modal">Apply theme</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,69 @@
+const DEFAULT_THEME = 'tide';
+
+const getActualTheme = () => sessionStorage.getItem('theme');
+
+const setActualTheme = theme => sessionStorage.setItem('theme', theme);
+
+const addThemeToBody = theme => document.body.classList.add('theme-' + theme);
+
+const removeThemesFromBody = () => {
+    const classList = document.body.classList;
+
+    for (let i = classList.length - 1; i >= 0; i--) {
+        if(classList[i].search('theme-') !== -1) {
+            document.body.classList.remove(classList[i]);
+        }
+    }
+};
+
+Template.themeSelectorModal.onCreated(() => {
+    const instance = Template.instance();
+    let actualTheme = getActualTheme();
+    if(!actualTheme) {
+        actualTheme = DEFAULT_THEME;
+        setActualTheme(actualTheme);
+    }
+
+    instance.state = new ReactiveDict();
+    instance.state.set('selectedTheme', actualTheme);
+
+    addThemeToBody(actualTheme);
+
+    instance.container = {
+        actualTheme,
+        previewTheme(theme, state) {
+            state.set('selectedTheme', theme);
+            removeThemesFromBody();
+            addThemeToBody(theme);
+        },
+        applyTheme(state) {
+            setActualTheme(state.get('selectedTheme'));
+        },
+        resetState(state) {
+            const theme = getActualTheme();
+
+            state.set('selectedTheme', theme);
+            removeThemesFromBody();
+            addThemeToBody(theme);
+        }
+    };
+
+});
+
+Template.themeSelectorModal.helpers({
+    themes: [ 'crickets', 'honeycomb', 'mint', 'overcast', 'quartz', 'tide', 'tigerlily' ],
+    ucFirst(text) {
+        return text.charAt(0).toUpperCase() + text.slice(1);
+    },
+    addClassIfSelected(theme) {
+        const instance = Template.instance();
+
+        return theme === instance.state.get('selectedTheme') ? 'selected' : '';
+    }
+});
+
+Template.themeSelectorModal.events({
+    'click .js-cancel, click .close': (event, instance) => instance.container.resetState(instance.state),
+    'click .js-apply': (event, instance) => instance.container.applyTheme(instance.state),
+    'click .preview-theme': (event, instance) => instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state)
+});
@@ -0,0 +1,36 @@
+@import "{design}/app.styl"
+
+#themeSelectorModal
+  .theme-list
+    list-style: none
+    padding: 0
+    
+    li
+      display: inline-block
+      cursor: pointer
+      margin-right: 10px
+      margin-bottom: 10px
+      padding: 10px
+      width: 110px
+      theme('border', '1px solid $uiBorderColorDark')
+      
+      &:hover 
+        background-color: rgba(21, 25, 30, 0.7)
+      
+      &:last-child
+        margin-right: 0
+        
+      &.selected
+        theme('border', '3px solid $uiBorderColorActive')
+        padding: 7px;
+        
+      .icon-wrapper
+        height: 64px
+        width: 64px
+        margin: 0 auto
+        line-height: 6.5
+      
+      .theme-title 
+        font-weight: normal
+        font-size: 1.1em
+        margin-bottom: 0