diff --git a/app/src/components/ModesCard.vue b/app/src/components/ModesCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8bcc7beb9db40d39a80959abd5b592e93640baac
--- /dev/null
+++ b/app/src/components/ModesCard.vue
@@ -0,0 +1,129 @@
+<template>
+ <div>
+ <div v-show="tipsplease" class="nodes welcome">
+ <img src="https://alpha.nodenogg.in/files/collect.png" />
+
+ <p>
+ magpie mode is designed for you to gather your thoughts and research, as
+ quickly and easily as possible.
+ </p>
+ <p>
+ Tap or press the add node icon
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="0 0 143 106"
+ >
+ <g transform="translate(-1345 -843)">
+ <g class="a" transform="translate(1345 865)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="0.5" y="0.5" width="126" height="83" />
+ </g>
+ <g class="b" transform="translate(1361 843)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+ </g>
+ <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+ <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+ </g>
+ </svg>
+ (shortcut <strong>n</strong>)
+ </p>
+ <p>
+ Don't forget you can use <a href="#">markdown</a> to quickly format your
+ text and add images from websources, you can even use html and embed
+ codes.
+ </p>
+ <p>
+ To see what everyone else has collected in your team and to start
+ organising, just switch to organise mode (best on a large display).
+ </p>
+
+ <div class="btn-row">
+ <BaseButton buttonClass="danger" @click="hideTips()">Hide</BaseButton>
+ </div>
+ </div>
+ <div v-show="!tipsplease"></div>
+ </div>
+</template>
+
+<script>
+import marked from 'marked'
+
+export default {
+ data: function () {
+ return {
+ tipsplease: true,
+ }
+ },
+
+ mounted() {},
+ filters: {
+ marked: marked,
+ },
+
+ methods: {
+ hideTips() {
+ this.tipsplease = false
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+img {
+ max-width: 400px;
+ padding: 0 50;
+}
+
+.welcome {
+ /* max-width: 450px; */
+ width: 95%;
+ margin-top: 1em;
+ margin-left: 1em;
+ background-color: white;
+ border: 2px solid black;
+ padding: 1em;
+}
+
+.vdr {
+ padding: 0 0.5em;
+}
+
+.example {
+ width: 30px;
+}
+
+.icon {
+ margin-left: 1em;
+ padding: 0.5em;
+ cursor: pointer;
+}
+
+.a {
+ fill: #333;
+ stroke: #707070;
+}
+.b {
+ fill: #fff;
+}
+.b,
+.c {
+ stroke: #333;
+ stroke-width: 7px;
+}
+.c,
+.e {
+ fill: none;
+}
+.d {
+ stroke: none;
+}
+
+.btn-row {
+ margin-bottom: 5px;
+ padding: 0px 0px 15px 10px;
+ border-radius: 4px;
+}
+</style>
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
index 0f7d3cbbbd427169839a7382ee9a02b0e811c5cd..834e0fe62f4e021cd7f892e5dfe3e6268c3c94f4 100644
--- a/app/src/views/Cards.vue
+++ b/app/src/views/Cards.vue
@@ -36,7 +36,6 @@
</template>
<script>
-import Router from '@/router'
import CardsLayer from '@/components/CardsLayer'
import OtherCardslayer from '@/components/OtherCardslayer'
import OnBoard from '@/components/OnBoard'
@@ -51,7 +50,6 @@ export default {
mixins: [shortcutsMixin],
data: function () {
return {
- currentroute: Router.currentRoute,
clientset: false,
}
},
diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue
index 0b4db4d209a30669c4459b0be982eff8e6222764..9c357b05caf43e939a779ccc230046971c1c4a5d 100644
--- a/app/src/views/Discarded.vue
+++ b/app/src/views/Discarded.vue
@@ -19,7 +19,6 @@
</template>
<script>
-import Router from '@/router'
import DiscardLayer from '@/components/DiscardLayer'
import OnBoard from '@/components/OnBoard'
@@ -33,7 +32,6 @@ export default {
mixins: [shortcutsMixin],
data: function () {
return {
- currentroute: Router.currentRoute,
clientset: false,
}
},
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 49efc2e66576f1df4f7d6e22c0410e594e2f8431..ab3c0160d2e2259cb59ced6ff5f95f39730721f3 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -164,7 +164,6 @@ export default {
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
- console.log(this.clientset)
},
created() {
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 081fa631a405c9e139b988b01d56175a1f70e0e9..43538f9eaf56073723617962ddc4ec3ea8381002 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -3,51 +3,7 @@
<div v-if="clientset">
<div id="listwrapper">
<!-- <h1 class="mobile">Your nodes - collect</h1> -->
-
- <div class="nodes welcome">
- <img src="https://alpha.nodenogg.in/files/collect.png" />
-
- <p>
- magpie mode is designed for you to gather your thoughts and
- research, as quickly and easily as possible.
- </p>
- <p>
- Tap or press the add node icon
- <svg
- class="example"
- xmlns="http://www.w3.org/2000/svg"
- width="50"
- viewBox="0 0 143 106"
- >
- <g transform="translate(-1345 -843)">
- <g class="a" transform="translate(1345 865)">
- <rect class="d" width="127" height="84" />
- <rect class="e" x="0.5" y="0.5" width="126" height="83" />
- </g>
- <g class="b" transform="translate(1361 843)">
- <rect class="d" width="127" height="84" />
- <rect class="e" x="3.5" y="3.5" width="120" height="77" />
- </g>
- <line class="c" x2="41" transform="translate(1406.5 884.5)" />
- <line class="c" y2="41" transform="translate(1426.5 863.5)" />
- </g>
- </svg>
- (shortcut <strong>n</strong>)
- </p>
- <p>
- Don't forget you can use <a href="#">markdown</a> to quickly format
- your text and add images from websources, you can even use html and
- embed codes.
- </p>
- <p>
- To see what everyone else has collected in your team and to start
- organising, just switch to organise mode (best on a large display).
- </p>
-
- <!-- <BaseButton class="new" buttonClass="action" @click="h"
- >Close</BaseButton
- > -->
- </div>
+ <ModesCard />
<ListLayer
@editTrue="(e) => editTrue(e)"
v-for="value in myNodes"
@@ -92,6 +48,7 @@
<script>
import ListLayer from '@/components/ListLayer'
+import ModesCard from '@/components/ModesCard'
import OnBoard from '@/components/OnBoard'
@@ -119,7 +76,7 @@ export default {
...mapState({
myNodes: (state) => state.myNodes,
//otherNodes: (state) => state.otherNodes,
- // shortcutstate: (state) => state.shortcutstate,
+ shortcutstate: (state) => state.shortcutstate,
// toolmode: (state) => state.ui.mode,
}),
},
@@ -131,7 +88,7 @@ export default {
},
mounted() {
- console.log(this.clientset)
+ // this.shortcutstate = false
},
beforeDestroy() {
@@ -151,9 +108,11 @@ export default {
editTrue(e) {
this.$store.dispatch('shortcutState', e)
+ console.log(this.shortcutstate)
},
},
components: {
+ ModesCard,
ListLayer,
OnBoard,
},
@@ -161,10 +120,6 @@ export default {
</script>
<style lang="css" scoped>
-img {
- max-width: 400px;
- padding: 0 50;
-}
.welcome {
width: 95%;
margin-top: 1em;