btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

📱 Popovers on mobile devices (#297)

Browse Source 
📱 Popovers on mobile devices

Co-authored-by: Liyas Thomas <liyasthomas@gmail.com>
This commit is contained in:
Liyas Thomas
2019-11-13 21:16:55 +05:30
committed by GitHub
parent 7ae7bdd670 dfbb563b6f
commit 40be148c9b
9 changed files with 148 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -91,7 +91,7 @@ _Customized themes are also synced with local session storage_
- Send and receive data
🔐 **Authentication**: Allows to identity the end user.
🔐 **Authentication**: Allows to identify the end user.
**Types:**
- None

13
assets/css/styles.scss
View File

@@ -348,6 +348,10 @@ h3 {
}
&.popover {
.wrapper {
min-height: auto;
}
.popover-inner {
background: $bgcolor;
color: $fgcolor;
@@ -616,6 +620,10 @@ ol li {
display: flex;
}
.hide-on-large-screen {
display: none;
}
@media (max-width: $responsiveWidth) {
ul,
@@ -632,6 +640,10 @@ ol li {
display: none;
}
.hide-on-large-screen {
display: inline-flex;
}
.show-on-small-screen {
display: inline-flex;
}
@@ -748,6 +760,7 @@ div.tab {
order: 1;
}
input[type="file"],
input[type="radio"],
div.tab {
display: none;

3
components/autocomplete.vue
View File

@@ -49,7 +49,7 @@
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
transition: transform 0.2s ease-out;
li {
width: 100%;
@@ -57,7 +57,6 @@
padding: 8px 16px;
font-size: 18px;
font-family: "Roboto Mono", monospace;
white-space: pre-wrap;
&:last-child {
border-radius: 0 0 4px 4px;

42
components/collections/collection.vue
View File

@@ -9,7 +9,7 @@
<span>{{ collection.name }}</span>
</button>
</div>
<div>
<div class="hide-on-small-screen">
<button
class="icon"
@click="removeCollection"
@@ -32,6 +32,46 @@
<i class="material-icons">create_new_folder</i>
</button>
</div>
<v-popover class="hide-on-large-screen">
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
class="icon"
@click="removeCollection"
v-tooltip="'Delete collection'"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
<div>
<button
class="icon"
@click="$emit('edit-collection')"
v-tooltip="'Edit collection'"
v-close-popover
>
<i class="material-icons">create</i>
<span>Edit</span>
</button>
</div>
<div>
<button
class="icon"
@click="$emit('add-folder')"
v-tooltip="'New Folder'"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>New folder</span>
</button>
</div>
</template>
</v-popover>
</div>
<div v-show="showChildren">

21
components/collections/folder.vue
View File

@@ -9,7 +9,7 @@
<span>{{ folder.name }}</span>
</button>
</div>
<div>
<div class="hide-on-small-screen">
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
<i class="material-icons">delete</i>
</button>
@@ -17,6 +17,25 @@
<i class="material-icons">edit</i>
</button>
</div>
<v-popover class="hide-on-large-screen">
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
<div>
<button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
<i class="material-icons">edit</i>
<span>Edit</span>
</button>
</div>
</template>
</v-popover>
</div>
<div v-show="showChildren">

25
components/collections/request.vue
View File

@@ -6,7 +6,7 @@
<span>{{ request.name }}</span>
</button>
</div>
<div>
<div class="hide-on-small-screen">
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
<i class="material-icons">delete</i>
</button>
@@ -18,6 +18,29 @@
<i class="material-icons">edit</i>
</button>
</div>
<v-popover class="hide-on-large-screen">
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
<div>
<button
class="icon"
@click="$emit('edit-request')"
v-tooltip="'Edit request'"
>
<i class="material-icons">edit</i>
<span>Edit</span>
</button>
</div>
</template>
</v-popover>
</div>
</template>

12
docs/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Postwoman</title>
</head>
<body>
Redirecting to postwoman.io
</body>
</html>

2
layouts/default.vue
View File

@@ -41,6 +41,7 @@
href="https://opencollective.com/postwoman"
target="_blank"
rel="noopener"
v-close-popover
>
<button class="icon">
<i class="material-icons">favorite</i>
@@ -52,6 +53,7 @@
<button
class="icon"
onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
v-close-popover
>
<svg
xmlns="http://www.w3.org/2000/svg"

39
pages/index.vue
View File

@@ -116,11 +116,21 @@
</ul>
<ul>
<li>
<span>
<pw-toggle :on="rawInput" @change="rawInput = $event"
>Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
>
</span>
<div class="flex-wrap">
<span>
<pw-toggle :on="rawInput" @change="rawInput = $event"
>Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
>
</span>
<div>
<label for="payload">
<button class="icon" @click="$refs.payload.click()" v-tooltip="'Upload file'">
<i class="material-icons">attach_file</i>
</button>
</label>
<input ref="payload" name="payload" type="file" @change="uploadPayload"/>
</div>
</div>
</li>
</ul>
<div v-if="!rawInput">
@@ -1903,6 +1913,25 @@ export default {
this.contentType = ["POST", "PUT", "PATCH"].includes(this.method)
? "application/json"
: "";
},
uploadPayload() {
this.rawInput = true;
let file = this.$refs.payload.files[0];
if (file != null) {
let reader = new FileReader();
reader.onload = (e) => {
this.rawParams = e.target.result;
};
reader.readAsText(file);
this.$toast.info("File imported", {
icon: "attach_file"
});
}
else {
this.$toast.error("Choose a file", {
icon: "attach_file"
});
}
}
},
mounted() {