From d794d1cb7bfb2cc2c1c5ce9049d256dc2b1837ea Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 14 Dec 2020 12:36:55 +0000
Subject: [PATCH] CSS edits
---
app/src/components/UploadLayer.vue | 156 +++++++++++++++++++++------
app/src/experimental/ModeToolbar.vue | 2 +-
app/src/store/index.js | 2 +-
app/src/views/Cards.vue | 71 ++++++------
4 files changed, 164 insertions(+), 67 deletions(-)
diff --git a/app/src/components/UploadLayer.vue b/app/src/components/UploadLayer.vue
index 06924f3..bee4aca 100644
--- a/app/src/components/UploadLayer.vue
+++ b/app/src/components/UploadLayer.vue
@@ -1,34 +1,62 @@
<template>
- <div class="ipfsupload" id="dropContainer">
- <form>
- <input
- id="file"
- class="fileInput"
- type="file"
- name="fileInput"
- ref="fileInput"
- @change="onFileSelected"
- />
- <!-- -->
- <p>Drop here to upload.</p>
-
- <textarea id="ipfshash" v-model="copytext"></textarea>
- <div class="btn-row">
- <button v-on:click.prevent="copyDone()" id="copyme" hidden>Copy</button>
- </div>
- </form>
+ <div v-if="this.currentroute.name == 'Organise'">
+ <div class="ipfsupload dropORG" id="dropContainer">
+ <form>
+ <input
+ id="file"
+ class="fileInput"
+ type="file"
+ name="fileInput"
+ ref="fileInput"
+ @change="onFileSelected"
+ />
+ <!-- -->
+ <p>Drop media here to upload.</p>
+
+ <textarea id="ipfshash" v-model="copytext"></textarea>
+ <div class="btn-row">
+ <button v-on:click.prevent="copyDone()" id="copyme" hidden>
+ Copy
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div v-else>
+ <div class="ipfsupload dropList" id="dropContainer">
+ <form>
+ <input
+ id="file"
+ class="fileInput"
+ type="file"
+ name="fileInput"
+ ref="fileInput"
+ @change="onFileSelected"
+ />
+ <!-- -->
+ <p>Drop media here to upload.</p>
+
+ <textarea id="ipfshash" v-model="copytext"></textarea>
+ <div class="btn-row">
+ <button v-on:click.prevent="copyDone()" id="copyme" hidden>
+ Copy
+ </button>
+ </div>
+ </form>
+ </div>
</div>
</template>
<script>
import VueIpfs from 'ipfs'
-// import { mapState } from 'vuex'
+import Router from '@/router'
const ipfs = VueIpfs.create()
var node
var output
var path = 'ready'
var copytext = ''
let dropArea
+
//const fileContents = []
// The below code should create an IPFS node to add files to
@@ -41,6 +69,7 @@ export default {
},
data: function () {
return {
+ currentroute: Router.currentRoute,
status: 'Connecting to IPFS...',
// id: '',
// agentVersion: '',
@@ -85,8 +114,40 @@ export default {
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
dropArea.addEventListener(eventName, this.preventDefaults, false)
})
+ ;['dragenter', 'dragover'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, overState)
+ })
+ ;['dragleave', 'dragend', 'drop'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, leaveState)
+ })
+ ;['dragenter', 'dragover'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, overStateList)
+ })
+ ;['dragleave', 'dragend', 'drop'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, leaveStateList)
+ })
dropArea.addEventListener('drop', this.handleDrop, false)
+
+ function overStateList() {
+ document.getElementsByClassName('dropList')[0].className =
+ 'ipfsupload dropList dragover'
+ }
+
+ function leaveStateList() {
+ document.getElementsByClassName('dropList')[0].className =
+ 'ipfsupload dropList'
+ }
+
+ function overState() {
+ document.getElementsByClassName('dropORG')[0].className =
+ 'ipfsupload dropORG dragover'
+ }
+
+ function leaveState() {
+ document.getElementsByClassName('dropORG')[0].className =
+ 'ipfsupload dropORG'
+ }
},
preventDefaults(e) {
e.preventDefault()
@@ -144,7 +205,8 @@ export default {
async dropIPFS(files) {
try {
this.fileContents = await node.add(files)
- this.getIPFS()
+
+ this.getIPFS(files[0].type)
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
@@ -152,12 +214,12 @@ export default {
}
},
- async getIPFS() {
+ async getIPFS(type) {
try {
for await (const newfile of node.get(this.fileContents.path)) {
// console.log(newfile.path)
this.path = newfile.path
- this.copyClipBoard(this.path)
+ this.copyClipBoard(this.path, type)
}
} catch (err) {
// Set error status text.
@@ -166,11 +228,22 @@ export default {
}
},
- copyClipBoard(e) {
- this.copytext = ''
- // this.$store.dispatch('addNode')
- //this.copyready = true
- // setTimeout(this.copyClick, 3000)
+ copyClipBoard(e, type) {
+ switch (true) {
+ case type.includes('image/'):
+ this.copytext = ''
+ break
+ case type.includes('audio/'):
+ this.copytext =
+ '<audio src="https://ipfs.io/ipfs/' + e + '" controls></audio>'
+ break
+ case type.includes('video/'):
+ this.copytext =
+ '<video src="https://ipfs.io/ipfs/' + e + '" controls></video>'
+ break
+ default:
+ this.copytext = 'https://ipfs.io/ipfs/' + e
+ }
},
copyClick() {
@@ -194,12 +267,23 @@ export default {
.fileInput {
display: none;
}
+
#dropContainer {
+ border: 1px solid rgb(180, 180, 180);
+ height: 100px;
+ margin: 1em;
+}
+
+.dropList {
+ padding: 1em;
+ background-color: white;
+}
+.dropORG {
margin: 0em;
position: fixed;
- background-color: white;
- bottom: 1em;
- left: 30em;
+ bottom: 0em;
+ left: 27em;
+ padding: 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -207,11 +291,21 @@ export default {
border: 1px solid rgb(180, 180, 180);
border-radius: 20px;
height: 100px;
+ background-color: white;
+ outline: 2px dashed rgb(180, 180, 180);
+ outline-offset: -10px;
+}
+
+.dragover {
+ outline: 2px dashed black;
+ outline-offset: -10px;
+ background-color: rgb(180, 180, 180);
}
textarea {
position: absolute;
- top: 0px;
+ top: 10px;
+ left: 0em;
height: 0px;
width: 0px;
padding: 0px;
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 57b1e74..fb5713d 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -12,7 +12,7 @@
/>
</button>
- <p>{{ clientid }} / {{ microcosm }}</p>
+ <!-- <p>{{ clientid }} / {{ microcosm }}</p> -->
</nav>
</template>
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 36e349c..d6ad4a8 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -472,7 +472,7 @@ const store = new Vuex.Store({
localypos = 50
}
}
-
+ console.log(zindex)
doc.positions.push({
node_id: uniqueid,
x_pos: localxpos,
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
index 758c232..f4b478f 100644
--- a/app/src/views/Cards.vue
+++ b/app/src/views/Cards.vue
@@ -7,45 +7,44 @@
<OtherCardslayer />
- <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)" />
+ <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>
- </svg>
-
- <UploadLayer
- v-bind:uploadready="uploadready"
- v-bind:copyready="copyready"
- @upload-added="uploadAdded()"
- @copy-done="copyDone()"
- />
+ <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 class="btn-row">
+ <BaseButton class="new" buttonClass="action" @click="uploadAdded()"
+ >Upload</BaseButton
+ >
+ <BaseButton class="new" buttonClass="action" @click="copyDone()"
+ >Get Upload</BaseButton
+ >
</div>
- <BaseButton class="new" buttonClass="action" @click="uploadAdded()"
- >Upload</BaseButton
- >
- <BaseButton class="new" buttonClass="action" @click="copyDone()"
- >Get Upload</BaseButton
- >
+ <UploadLayer
+ v-bind:uploadready="uploadready"
+ v-bind:copyready="copyready"
+ @upload-added="uploadAdded()"
+ @copy-done="copyDone()"
+ />
</div>
<div v-else>
@@ -145,6 +144,10 @@ export default {
margin-bottom: 1em;
}
+.btn-row {
+ margin-left: 1em;
+}
+
.example {
width: 30px;
}
--
GitLab