[OPTIONS] Added in chrome options UI with themes and custom bookmark… (…

…#66)

* [OPTIONS] Added in chrome options UI with themess and custom bookmark folder location

* [OPTIONS] Fixed yarn issues

* [OPTIONS] further edits

* [OPTIONS] Formatted BookmarkIndicator

* 2.8.0

* [OPTIONS] Don't use actual bookmarks in list of options (only use folders)

.gitignore

@@ -6,3 +6,4 @@ npm-debug.log
 
 dist/
 packages/
+.vscode/

app/component/bookmark-indicator.vue

@@ -0,0 +1,29 @@
+<template>
+  <span v-if="bookmarkFolder">
+    Currently your tabs are stored in: <strong>{{ bookmarkFolder.title }} ({{ bookmarkFolder.id }}</strong>).
+  </span>
+</template>
+
+<script>
+import BookmarkManager from '../../lib/bookmark-manager.js';
+import { mapState } from 'vuex';
+import store from '../store/index.js';
+
+import ChromePromise from 'chrome-promise';
+const chromep = new ChromePromise();
+
+export default {
+  asyncComputed: {
+    async bookmarkFolder() {
+      const id = this.bookmarkFolderId;
+      return BookmarkManager.getTidyFolder();
+    }
+  },
+
+  computed: {
+    ...mapState([
+      'bookmarkFolderId',
+    ]),
+  }
+}
+</script>

app/component/bookmark-selector.js

@@ -0,0 +1,65 @@
+import Vue from 'vue';
+import store from '../store/index.js';
+
+import Multiselect from 'vue-multiselect'
+
+import ChromePromise from 'chrome-promise';
+const chromep = new ChromePromise();
+
+import BookmarkManager from '../../lib/bookmark-manager.js';
+
+import { mapState } from 'vuex';
+
+const createComponent = (bookmarks) => {
+  return {
+    render (h) {
+      return (
+        <span class="bookmark-selector">
+          <multiselect
+            value={this.bookmarkFolderId}
+            placeholder="Search for folder"
+            options={bookmarks}
+            track-by={"value"}
+            label="label"
+            option-height={50}
+            deselect-label={""}
+            max-height={150}
+            onSelect={this.onSelect}>
+          </multiselect>
+
+          <a onClick={this.reset} style="cursor: pointer; margin-top: 5px; display: inline-block;">Reset to default</a>
+        </span>
+      )
+    },
+
+    components: {
+      Multiselect
+    },
+
+    methods: {
+      onSelect(selection) {
+        store.commit('SET_BOOKMARK_FOLDER_ID', selection.value);
+      },
+      reset() {
+        store.commit('SET_BOOKMARK_FOLDER_ID', null);
+      },
+    },
+
+    computed: {
+      ...mapState([
+        'bookmarkFolderId',
+      ]),
+    },
+
+    data() {
+      return {
+        bookmarks
+      }
+    },
+  }
+}
+
+Vue.component('BookmarkSelector', async (resolve, reject) => {
+  const bookmarks = await BookmarkManager.getBookmarkFolders();
+  resolve(createComponent(bookmarks));
+});

app/component/dashboard.vue

@@ -14,7 +14,7 @@
         <span class="sep">/</span>
         <Import/>
         <span class="sep">/</span>
-        <ToggleTheme/>
+        <SettingsLauncher/>
       </span>
     </header>
 
@@ -24,7 +24,7 @@
 
     <footer>
       useful software by <a href="http://www.eggplanet.io/" target="_blank">eggplanet</a> |
-      <a href="https://github.com/eggplanetio/tidytab/issues" target="_blank">file a bug</a> |
+      <a href="https://github.com/eggplanetio/tidytab/issues" target="_blank">file a bug or request a feature</a> |
       v{{ version }} |
       {{ theme }} theme
     </footer>
@@ -36,7 +36,7 @@ import DashboardStats from './dashboard-stats.vue';
 import Export from './export.vue';
 import Import from './import.vue';
 import Search from './search.vue';
-import ToggleTheme from './toggle-theme.vue';
+import SettingsLauncher from './settings-launcher.vue';
 import TabGroup from './tab-group.vue';
 import { mapState } from 'vuex';
 
@@ -49,8 +49,25 @@ export default {
     Export,
     Import,
     Search,
+    SettingsLauncher,
     TabGroup,
-    ToggleTheme,
+  },
+
+  head: {
+    link() {
+      const theme = this.theme;
+      if (!theme) return;
+      const href = `../styles/dashboard-${theme}.css`;
+      return [
+        { rel: 'stylesheet', type: 'text/css', href, id: 'theme' },
+      ];
+    },
+  },
+
+  watch: {
+    theme() {
+      this.$emit('updateHead');
+    }
   },
 
   props: [
@@ -111,6 +128,7 @@ footer {
 
   a {
     color: rgba($color-primary, 0.9);
+    text-decoration: underline;
   }
 }
 </style>

app/component/options.vue

@@ -0,0 +1,152 @@
+<template lang="html">
+  <form action="">
+    <ul>
+
+      <li>
+        <h2>
+          Dashboard Theme
+        </h2>
+        <p>
+          Choose a dashboard theme.
+        </p>
+        <p>
+          <ThemeSelector/>
+        </p>
+      </li>
+
+      <li>
+        <h2>
+          Tab Storage
+        </h2>
+        <p>
+          TidyTab uses your bookmarks to store each individual group after you tidy.
+        </p>
+        <p>
+          <BookmarkIndicator/>
+        </p>
+        <p>
+          <BookmarkSelector/>
+        </p>
+      </li>
+
+      <div v-if="enableTabSavingStrategy">
+        <li>
+          <h2>
+            Tab-Saving Strategy
+          </h2>
+          <p>
+            By default, TidyTab will create a unique group for each tidy. This can get cumbersome
+            when you often tidy one or two tabs. This will not affect already tidied tabs.
+            Pro-tip: if you'd like to move bookmarks around, you can simply open the
+            <a href="chrome://bookmarks/" target="_blank">Bookmark Manager</a> and move things around there.
+
+          </p>
+          <input type="radio" name="save-strategy"> Group by date added <br>
+          <input type="radio" name="save-strategy" checked="checked"> Each tidy gets its own group (default)
+        </li>
+      </div>
+    </ul>
+
+  </form>
+</template>
+
+<script>
+import ThemeSelector from './theme-selector.vue';
+import BookmarkSelector from './bookmark-selector.js';
+import BookmarkIndicator from './bookmark-indicator.vue';
+
+export default {
+
+  data: () => ({
+    enableTabSavingStrategy: false,
+  }),
+
+  components: {
+    ThemeSelector,
+    BookmarkIndicator,
+  },
+}
+</script>
+
+<style scoped="true" lang="sass">
+@import '../styles/colors';
+@import '../styles/settings';
+
+form {
+  line-height: 1.7;
+  padding: $size-unit;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  margin-bottom: $size-unit;
+}
+
+input[type="text"],
+select {
+  display: block;
+  width: 100%;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: $font-size;
+  display: block;
+  margin-bottom: $size-unit/2;
+
+  strong {
+    display: block;
+  }
+}
+
+p {
+  margin-top: 0;
+}
+
+#folder {
+  margin-bottom: $size-unit/2;
+}
+
+select[multiple="multiple"],
+select[multiple="multiple"]:hover {
+  background: none;
+  padding: 0;
+}
+
+img.toolbar-icon {
+  height: $size-unit;
+
+  &.light {
+    background: black;
+  }
+}
+
+</style>
+
+<style lang="sass">
+@import "../styles/colors";
+@import "../styles/settings";
+
+.bookmark-selector {
+
+  .multiselect {
+    font-size: 13px;
+  }
+
+  .multiselect__tags {
+    padding-top: 6px;
+    border-radius: 0;
+  }
+
+  input[type="text"].multiselect__input {
+    border: none;
+  }
+}
+</style>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

app/component/settings-launcher.vue

@@ -0,0 +1,21 @@
+<template>
+  <a @click="launchSettings()">
+    Settings
+  </a>
+</template>
+
+<script>
+import store from '../store/index.js';
+export default {
+  methods: {
+    launchSettings() {
+      chrome.runtime.openOptionsPage();
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+@import "../styles/settings";
+@import "../styles/colors";
+</style>

app/component/theme-selector.vue

@@ -0,0 +1,35 @@
+<template>
+  <select id="theme" v-model="theme" @change="onThemeSelect">
+    <option v-for="theme in THEMES" :value="theme">{{ theme }}</option>
+  </select>
+</template>
+
+<script>
+import BookmarkSelector from './bookmark-selector.js';
+import BookmarkIndicator from './bookmark-indicator.vue';
+
+import store from '../store/index.js';
+import { THEMES } from '../store/index.js';
+import ChromePromise from 'chrome-promise';
+const chromep = new ChromePromise();
+import { mapState } from 'vuex';
+
+export default {
+  data: () => ({
+    enableTabSavingStrategy: false,
+    THEMES
+  }),
+
+  methods: {
+    onThemeSelect(e) {
+      store.commit('SET_THEME', e.target.value);
+    },
+  },
+
+  computed: {
+    ...mapState([
+      'theme',
+    ]),
+  },
+}
+</script>