add settings template; turn off save shortcut

src/App.vue

@@ -15,6 +15,11 @@ export default defineComponent({
 
       const cmdCtrl = e.ctrlKey || e.metaKey;
 
+      // console.log(e.keyCode);
+      if (cmdCtrl && e.keyCode === 83) {
+        console.log('share');
+        e.preventDefault();
+      }
       if (cmdCtrl && e.keyCode === COMMA_CODE) {
         this.$router.push({ name: 'settings' });
         e.preventDefault();
@@ -35,10 +40,10 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 </style>
 
 <template>
-  <Help :visible="showHelp" @close="showHelp = false"/>
+  <Help :visible="showHelp" @close="showHelp = false" />
   <RouterView />
 </template>

src/assets/main.scss

@@ -1,7 +1,53 @@
 @import 'normalize.css';
-/*@import 'primevue/resources/primevue.min.css';*/
-/*@import 'primevue/resources/themes/saga-blue/theme.css';*/
+// @import 'primeicons/primeicons.css';
+@import 'primevue/resources/primevue.min.css';
+
 @import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
+// @import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';
+// @import 'primevue/resources/themes/bootstrap4-light-purple/theme.css';
+// @import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
+// @import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css';
+// @import 'primevue/resources/themes/md-light-indigo/theme.css';
+// @import 'primevue/resources/themes/md-light-deeppurple/theme.css';
+// @import 'primevue/resources/themes/md-dark-indigo/theme.css';
+// @import 'primevue/resources/themes/md-dark-deeppurple/theme.css';
+// @import 'primevue/resources/themes/mdc-light-indigo/theme.css';
+// @import 'primevue/resources/themes/mdc-light-deeppurple/theme.css';
+// @import 'primevue/resources/themes/mdc-dark-indigo/theme.css';
+// @import 'primevue/resources/themes/mdc-dark-deeppurple/theme.css';
+// @import 'primevue/resources/themes/tailwind-light/theme.css';
+// @import 'primevue/resources/themes/fluent-light/theme.css';
+// @import 'primevue/resources/themes/lara-light-indigo/theme.css';
+// @import 'primevue/resources/themes/lara-dark-indigo/theme.css';
+// @import 'primevue/resources/themes/lara-light-purple/theme.css';
+// @import 'primevue/resources/themes/lara-dark-purple/theme.css';
+// @import 'primevue/resources/themes/lara-light-blue/theme.css';
+// @import 'primevue/resources/themes/lara-dark-blue/theme.css';
+// @import 'primevue/resources/themes/lara-light-teal/theme.css';
+// @import 'primevue/resources/themes/lara-dark-teal/theme.css';
+// @import 'primevue/resources/themes/saga-blue/theme.css';
+// @import 'primevue/resources/themes/saga-green/theme.css';
+// @import 'primevue/resources/themes/saga-orange/theme.css';
+// @import 'primevue/resources/themes/saga-purple/theme.css';
+// @import 'primevue/resources/themes/vela-blue/theme.css';
+// @import 'primevue/resources/themes/vela-green/theme.css';
+// @import 'primevue/resources/themes/vela-orange/theme.css';
+// @import 'primevue/resources/themes/vela-purple/theme.css';
+// @import 'primevue/resources/themes/arya-blue/theme.css';
+// @import 'primevue/resources/themes/arya-green/theme.css';
+// @import 'primevue/resources/themes/arya-orange/theme.css';
+// @import 'primevue/resources/themes/arya-purple/theme.css';
+// @import 'primevue/resources/themes/nova/theme.css';
+// @import 'primevue/resources/themes/nova-alt/theme.css';
+// @import 'primevue/resources/themes/nova-accent/theme.css';
+// @import 'primevue/resources/themes/nova-vue/theme.css';
+// @import 'primevue/resources/themes/luna-amber/theme.css';
+// @import 'primevue/resources/themes/luna-blue/theme.css';
+// @import 'primevue/resources/themes/luna-green/theme.css';
+// @import 'primevue/resources/themes/luna-pink/theme.css';
+// @import 'primevue/resources/themes/rhea/theme.css';
+
+// @import 'primevue/resources/themes/saga-blue/theme.css';
 
 html, body {
   height: 100%;

src/views/SettingsView.vue

@@ -1,8 +1,11 @@
 <script>
-import { RouterView } from 'vue-router';
 import { defineComponent } from 'vue';
+import InputSwitch from 'primevue/inputswitch';
 
 export default defineComponent({
+  components: {
+    InputSwitch,
+  },
   data() {
     const escDown = e => {
       if (!e) e = event;
@@ -14,6 +17,8 @@ export default defineComponent({
     };
     return {
       escDown,
+      autoScroll: false,
+      autoPrint: true,
     };
   },
   mounted() {
@@ -25,11 +30,28 @@ export default defineComponent({
 });
 </script>
 
+<style scoped>
+.settings {
+  padding: 12px 24px;
+}
+label {
+  margin-left: 12px;
+}
+</style>
+
 <template>
   <div class="settings">
-    <p>App Settings</p>
+    <h3>App Settings</h3>
+
+    <p>
+      <InputSwitch v-model="autoScroll" inputId="autoScroll" />
+      <label for="autoScroll">Auto scroll result</label>
+    </p>
+
+    <p>
+      <InputSwitch v-model="autoPrint" inputId="autoPrint" />
+      <label for="autoPrint">Auto print expressions</label>
+    </p>
+
   </div>
 </template>
-
-<style scoped>
-</style>