From 0762661971781fbfa12c59f8f277c03be7c8bfc1 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 27 Oct 2020 22:15:50 +0000
Subject: [PATCH] added discard warning
added alert when you try to discard node
working on collect mode interface
---
app/src/components/CardsLayer.vue | 6 +-
app/src/components/ListLayer.vue | 6 +-
app/src/components/NodesLayer.vue | 6 +-
app/src/views/List-old.vue | 100 -----------------------
app/src/views/List.vue | 113 +++++++++++++++++++++++++-
app/src/views/Oldhome.vue | 128 ------------------------------
6 files changed, 126 insertions(+), 233 deletions(-)
delete mode 100644 app/src/views/List-old.vue
delete mode 100644 app/src/views/Oldhome.vue
diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
index 3af9786..8adec76 100644
--- a/app/src/components/CardsLayer.vue
+++ b/app/src/components/CardsLayer.vue
@@ -94,7 +94,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
- this.$store.dispatch('deleteFlag', { e })
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('deleteFlag', { e })
+ } else {
+ // nothing happens
+ }
},
// readFlag(e) {
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index f828b53..5b065f5 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -98,7 +98,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
- this.$store.dispatch('deleteFlag', { e })
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('deleteFlag', { e })
+ } else {
+ // nothing happens
+ }
},
// readFlag(e) {
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index abdc425..cd050e9 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -364,7 +364,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
- this.$store.dispatch('deleteFlag', { e })
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('deleteFlag', { e })
+ } else {
+ // nothing happens
+ }
},
readFlag(e) {
e = this.nodeid
diff --git a/app/src/views/List-old.vue b/app/src/views/List-old.vue
deleted file mode 100644
index 829f8fc..0000000
--- a/app/src/views/List-old.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
- <div>
- <div v-if="clientset">
- <div id="listwrapper">
- <h1 class="mobile">Your nodes - collect</h1>
- <ListLayer
- @editTrue="(e) => editTrue(e)"
- v-for="value in myNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- v-bind:deleted="value.deleted"
- />
- <!-- <div class="btn-row">
- <BaseButton class="new" buttonClass="action" @click="addNode()"
- >Create Node</BaseButton
- >
- </div> -->
- </div>
- </div>
- <div v-else>
- <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
- </div>
- </div>
-</template>
-
-<script>
-import ListLayer from '@/components/ListLayer'
-import OnBoard from '@/components/OnBoard'
-
-import { mapState } from 'vuex'
-
-//import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-
-export default {
- name: 'List',
-
- //mixins: [shortcutsMixin],
- data: function () {
- return {
- clientset: false,
- }
- },
-
- props: {
- nodeid: String,
- nodetext: String,
- deleted: Boolean,
- },
-
- computed: {
- ...mapState({
- myNodes: (state) => state.myNodes,
- //otherNodes: (state) => state.otherNodes,
- // shortcutstate: (state) => state.shortcutstate,
- // toolmode: (state) => state.ui.mode,
- }),
- },
-
- // created() {
- // if (typeof window !== 'undefined') {
- // document.addEventListener('keydown', this.handleKeyPress)
- // }
- // },
-
- // beforeDestroy() {
- // if (typeof window !== 'undefined') {
- // document.removeEventListener('keydown', this.handleKeyPress)
- // }
- // },
-
- methods: {
- clientAdded() {
- this.clientset = !this.clientset
- },
-
- addNode() {
- this.$store.dispatch('addNode')
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
- },
- components: {
- ListLayer,
- OnBoard,
- },
-}
-</script>
-
-<style lang="css" scoped>
-.mobile {
- margin-left: 1em;
- font-size: 1em;
-}
-.new {
- margin-bottom: 1em;
-}
-</style>
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 8099dab..081fa63 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -2,7 +2,52 @@
<div>
<div v-if="clientset">
<div id="listwrapper">
- <h1 class="mobile">Your nodes - collect</h1>
+ <!-- <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>
<ListLayer
@editTrue="(e) => editTrue(e)"
v-for="value in myNodes"
@@ -12,9 +57,30 @@
v-bind:deleted="value.deleted"
/>
<div class="btn-row">
- <BaseButton class="new" buttonClass="action" @click="addNode()"
+ <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
>Create Node</BaseButton
+ > -->
+
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="80"
+ viewBox="0 0 143 106"
+ class="icon"
+ @click="addNode()"
>
+ <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>
</div>
</div>
</div>
@@ -95,6 +161,19 @@ export default {
</script>
<style lang="css" scoped>
+img {
+ max-width: 400px;
+ padding: 0 50;
+}
+.welcome {
+ width: 95%;
+ margin-top: 1em;
+ margin-left: 1em;
+ background-color: white;
+ border: 2px solid black;
+ padding: 1em;
+}
+
.mobile {
margin-left: 1em;
font-size: 1em;
@@ -102,4 +181,34 @@ export default {
.new {
margin-bottom: 1em;
}
+
+.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;
+}
</style>
diff --git a/app/src/views/Oldhome.vue b/app/src/views/Oldhome.vue
deleted file mode 100644
index 4fbf5da..0000000
--- a/app/src/views/Oldhome.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
- <div class="home">
- <div v-if="clientset">
- <div v-if="listview">
- <ListLayer
- v-for="value in myNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
-
- <OtherListlayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
- </div>
- <div v-else>
- <OtherNodeslayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
-
- <NodesLayer
- @editTrue="(e) => editTrue(e)"
- v-for="value in myNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
- </div>
- <ControlsLayer @listView="listView()" />
- </div>
- <OnBoard v-else @clientAdded="clientAdded()" />
- </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import OnBoard from '@/components/OnBoard.vue'
-import NodesLayer from '@/components/NodesLayer.vue'
-import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
-import ListLayer from '@/components/ListLayer.vue'
-import OtherListlayer from '@/components/OtherListlayer.vue'
-import ControlsLayer from '@/components/ControlsLayer.vue'
-
-import { mapState } from 'vuex'
-import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-// import Router from '@/router'
-// // console.log(Router.currentRoute.params.microcosm)
-
-export default {
- name: 'Oldhome',
- // Shortcut mixin is here so we can call the keyboard controls anytime
- mixins: [shortcutsMixin],
- created() {
- if (typeof window !== 'undefined') {
- document.addEventListener('keydown', this.handleKeyPress)
- }
- if (localStorage.myNNClient == null) {
- // visiting from URL get them to name client
- // localStorage.setItem('myNNClient', 'unknown client')
- // // console.log(localStorage.myNNClient)
- }
- },
- beforeDestroy() {
- if (typeof window !== 'undefined') {
- document.removeEventListener('keydown', this.handleKeyPress)
- }
- },
-
- data: function () {
- return {
- clientset: false,
- listview: false,
- offline: false,
- }
- },
-
- components: {
- OnBoard,
- NodesLayer,
- OtherNodeslayer,
- ListLayer,
- OtherListlayer,
- ControlsLayer,
- },
- computed: mapState({
- myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- shortcutstate: (state) => state.shortcutstate,
- }),
- methods: {
- clientAdded() {
- this.clientset = !this.clientset
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
-
- // This is here to support the shortcuts
- addNode() {
- this.$store.dispatch('addNode')
- },
-
- listView() {
- if (this.listview == false) {
- this.listview = true
- } else {
- this.listview = false
- }
- },
-
- offlineTriggered() {
- this.offline = true
- },
- onlineTriggered() {
- this.offline = false
- },
- },
-}
-</script>
-
-<style scoped></style>
--
GitLab