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

Upstream

Browse Source
This commit is contained in:
Liyas Thomas
2020-09-24 21:37:27 +05:30
parent 2686873163 e94fdcad32
commit 6380063978
33 changed files with 251 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/collections/index.vue
View File

@@ -85,7 +85,7 @@ TODO:
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 245px);
max-height: calc(100vh - 232px);
}
</style>

2
components/environments/index.vue
View File

@@ -44,7 +44,7 @@
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 245px);
max-height: calc(100vh - 232px);
}
</style>

2
components/firebase/feeds.vue
View File

@@ -31,7 +31,7 @@
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 298px);
max-height: calc(100vh - 296px);
}
.clamb-3 {

10
components/graphql/queryeditor.vue
View File

@@ -17,8 +17,6 @@
</style>
<script>
const DEFAULT_THEME = "twilight"
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/ext-language_tools"
@@ -38,7 +36,7 @@ export default {
theme: {
type: String,
required: false,
default: null
default: null,
},
onRunGQLQuery: {
type: Function,
@@ -177,9 +175,11 @@ export default {
defineTheme() {
if (this.theme) {
return this.theme
} else {
return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
)
},
setValidationSchema(schema) {

2
components/layout/contributors.vue
View File

@@ -229,9 +229,7 @@
@apply items-center;
@apply flex-no-wrap;
@apply overflow-auto;
@apply py-4;
@apply my-4;
max-width: calc(100vw - 72px);
}
</style>

2
components/layout/history.vue
View File

@@ -245,7 +245,7 @@
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 290px);
max-height: calc(100vh - 288px);
[readonly] {
@apply cursor-default;

14
components/layout/pw-header.vue
View File

@@ -3,8 +3,8 @@
<div class="row-wrapper">
<span class="slide-in">
<nuxt-link :to="localePath('index')">
<h1 class="logo hide-on-small-screen">Hoppscotch</h1>
<h1 class="logo show-on-small-screen">Hs</h1>
<h1 class="text-xl hide-on-small-screen hover:text-acColor">Hoppscotch</h1>
<h1 class="text-xl show-on-small-screen hover:text-acColor">Hs</h1>
</nuxt-link>
</span>
<span>
@@ -293,14 +293,6 @@ kbd {
animation: slideIn 0.2s forwards ease-in-out;
}
.logo {
@apply text-xl;
&:hover {
@apply text-acColor;
}
}
.show-on-small-screen {
@apply hidden;
}
@@ -346,7 +338,7 @@ export default {
mounted() {
// Initializes the PWA code - checks if the app is installed,
// etc.
(async () => {
;(async () => {
this.showInstallPrompt = await intializePwa()
let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
if (!cookiesAllowed) {

29
components/layout/pw-section.vue
View File

@@ -2,7 +2,7 @@
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
<legend @click.prevent="collapse">
<span>{{ label }}</span>
<i class="material-icons">
<i class="ml-2 align-middle material-icons">
{{ isCollapsed(label) ? "expand_more" : "expand_less" }}
</i>
</legend>
@@ -30,47 +30,38 @@ fieldset {
@apply transition;
@apply ease-in-out;
@apply duration-200;
i {
@apply ml-2;
@apply align-middle;
}
}
&.blue legend {
color: #57b5f9;
}
&.gray legend {
color: #bcc2cd;
@apply text-blue-400;
}
&.green legend {
color: #50fa7b;
@apply text-green-400;
}
&.cyan legend {
color: #8be9fd;
&.teal legend {
@apply text-teal-400;
}
&.purple legend {
color: #bd93f9;
@apply text-purple-400;
}
&.orange legend {
color: #ffb86c;
@apply text-orange-400;
}
&.pink legend {
color: #ff79c6;
@apply text-pink-400;
}
&.red legend {
color: #ff5555;
@apply text-red-400;
}
&.yellow legend {
color: #f1fa8c;
@apply text-yellow-400;
}
}

7
components/layout/sidenav.vue
View File

@@ -204,6 +204,9 @@ nav.primary-nav {
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&:hover {
@apply text-fgColor;
@@ -248,6 +251,7 @@ nav.secondary-nav {
@apply flex-col;
@apply flex-no-wrap;
@apply space-y-2;
@apply py-1;
li {
@apply flex;
@@ -259,6 +263,9 @@ nav.secondary-nav {
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&:hover {
@apply text-fgColor;

68
components/settings/swatch.vue
View File

@@ -1,68 +0,0 @@
<template>
<div
class="color"
:data-color="color"
:class="{ active: active }"
v-tooltip="{ content: name || color }"
:style="{ backgroundColor: color }"
>
<i v-if="active" class="material-icons activeTick">done</i>
</div>
</template>
<style scoped lang="scss">
.color {
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply relative;
@apply m-2;
@apply p-4;
@apply rounded-full;
@apply border-2;
@apply border-bgDarkColor;
@apply cursor-pointer;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&.fg {
@apply text-actColor;
}
&.active {
@apply border-2;
@apply border-acColor;
}
&.fg.active {
@apply border-2;
@apply border-fgColor;
}
.activeTick {
@apply absolute;
@apply m-auto;
@apply inset-0;
}
}
</style>
<script>
export default {
props: {
color: {
type: String,
required: true,
},
name: {
type: String,
default: ""
},
active: {
type: Boolean,
default: false,
},
},
}
</script>

39
components/ui/accent-mode-picker.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<li>
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<div class="space-x-2">
<span
v-for="(color, index) of colors"
:key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
:class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
@click="setActiveColor(color)"
>
<i class="material-icons">lens</i>
</span>
</div>
</li>
</template>
<script>
export default {
data() {
return {
active: localStorage.getItem("THEME_COLOR") || "green",
colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"],
}
},
methods: {
setActiveColor(color) {
document.documentElement.setAttribute("data-accent", color)
this.active = color
},
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
}
</script>

9
components/ui/ace-editor.vue
View File

@@ -19,8 +19,6 @@
</style>
<script>
const DEFAULT_THEME = "twilight"
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
@@ -35,7 +33,7 @@ export default {
theme: {
type: String,
required: false,
default: null
default: null,
},
lang: {
type: String,
@@ -118,7 +116,10 @@ export default {
if (this.theme) {
return this.theme
}
return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
)
},
provideLinting: debounce(function (code) {

2
components/ui/autocomplete.vue
View File

@@ -41,7 +41,7 @@
ul.suggestions {
@apply hidden;
@apply bg-atcColor;
@apply bg-actColor;
@apply absolute;
@apply mx-2;
@apply left-0;

54
components/ui/color-mode-picker.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<li>
<label>
<ColorScheme placeholder="..." tag="span">
{{ $t("background") }}:
{{ $colorMode.preference.charAt(0).toUpperCase() + $colorMode.preference.slice(1) }}
<span v-if="$colorMode.preference === 'system'">
({{ $colorMode.value }} mode detected)
</span>
</ColorScheme>
</label>
<div class="space-x-2">
<span
v-for="(color, index) of colors"
:key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
:class="[
{ 'bg-bgDarkColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value },
]"
@click="$colorMode.preference = color"
>
<i class="material-icons">{{ getIcon(color) }}</i>
</span>
</div>
</li>
</template>
<script>
export default {
data() {
return {
colors: ["system", "light", "dark", "black"],
}
},
methods: {
getIcon(color) {
switch (color) {
case "system":
return "desktop_windows"
case "light":
return "wb_sunny"
case "dark":
return "nights_stay"
case "black":
return "bedtime"
default:
return "desktop_windows"
}
},
},
}
</script>

7
components/ui/js-editor.vue
View File

@@ -19,8 +19,6 @@
</style>
<script>
const DEFAULT_THEME = "twilight"
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import debounce from "~/helpers/utils/debounce"
@@ -106,7 +104,10 @@ export default {
if (this.theme) {
return this.theme
}
return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
)
},
provideLinting: debounce(function (code) {