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

TailwindCSS v2.x (#1540)

Browse Source
This commit is contained in:
Liyas Thomas
2021-03-16 01:49:21 -07:00
committed by GitHub
parent 5399ddf6ac
commit f1389cdba0
30 changed files with 6068 additions and 21361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/app/Contributors.vue
View File

@@ -162,7 +162,7 @@
.contributors {
@apply flex;
@apply items-center;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply overflow-auto;
@apply m-2;
}

222
components/app/Sidenav.vue
View File

@@ -59,111 +59,61 @@
<i class="material-icons">settings</i>
</nuxt-link>
</nav>
<div v-if="$route.path == '/'">
<nav class="secondary-nav">
<ul>
<li>
<a href="#request" v-tooltip.right="$t('request')">
<i class="material-icons">cloud_upload</i>
</a>
</li>
<li>
<a href="#options" v-tooltip.right="$t('options')">
<i class="material-icons">toc</i>
</a>
</li>
<li>
<a href="#response" v-tooltip.right="$t('response')">
<i class="material-icons">cloud_download</i>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="$route.path.includes('/realtime')">
<nav class="secondary-nav">
<ul>
<li>
<a href="#request" v-tooltip.right="$t('request')">
<i class="material-icons">cloud_upload</i>
</a>
</li>
<li>
<a href="#response" v-tooltip.right="$t('communication')">
<i class="material-icons">cloud_download</i>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="$route.path.includes('/graphql')">
<nav class="secondary-nav">
<ul>
<li>
<a href="#endpoint" v-tooltip.right="$t('endpoint')">
<i class="material-icons">cloud</i>
</a>
</li>
<li>
<a href="#schema" v-tooltip.right="$t('schema')">
<i class="material-icons">assignment_returned</i>
</a>
</li>
<li>
<a href="#query" v-tooltip.right="$t('query')">
<i class="material-icons">cloud_upload</i>
</a>
</li>
<li>
<a href="#response" v-tooltip.right="$t('response')">
<i class="material-icons">cloud_download</i>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="$route.path.includes('/doc')">
<nav class="secondary-nav">
<ul>
<li>
<a href="#import" v-tooltip.right="$t('import')">
<i class="material-icons">folder</i>
</a>
</li>
<li>
<a href="#documentation" v-tooltip.right="$t('documentation')">
<i class="material-icons">insert_drive_file</i>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="$route.path.includes('/settings')">
<nav class="secondary-nav">
<ul>
<li>
<a href="#account" v-tooltip.right="$t('account')">
<i class="material-icons">person</i>
</a>
</li>
<li>
<a href="#theme" v-tooltip.right="$t('theme')">
<i class="material-icons">brush</i>
</a>
</li>
<li>
<a href="#extensions" v-tooltip.right="$t('extensions')">
<i class="material-icons">extensions</i>
</a>
</li>
<li>
<a href="#proxy" v-tooltip.right="$t('proxy')">
<i class="material-icons">public</i>
</a>
</li>
</ul>
</nav>
</div>
<nav v-if="$route.path == '/'" class="secondary-nav">
<a href="#request" v-tooltip.right="$t('request')">
<i class="material-icons">cloud_upload</i>
</a>
<a href="#options" v-tooltip.right="$t('options')">
<i class="material-icons">toc</i>
</a>
<a href="#response" v-tooltip.right="$t('response')">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
<a href="#request" v-tooltip.right="$t('request')">
<i class="material-icons">cloud_upload</i>
</a>
<a href="#response" v-tooltip.right="$t('communication')">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
<a href="#endpoint" v-tooltip.right="$t('endpoint')">
<i class="material-icons">cloud</i>
</a>
<a href="#schema" v-tooltip.right="$t('schema')">
<i class="material-icons">assignment_returned</i>
</a>
<a href="#query" v-tooltip.right="$t('query')">
<i class="material-icons">cloud_upload</i>
</a>
<a href="#response" v-tooltip.right="$t('response')">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
<a href="#import" v-tooltip.right="$t('import')">
<i class="material-icons">folder</i>
</a>
<a href="#documentation" v-tooltip.right="$t('documentation')">
<i class="material-icons">insert_drive_file</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
<a href="#account" v-tooltip.right="$t('account')">
<i class="material-icons">person</i>
</a>
<a href="#theme" v-tooltip.right="$t('theme')">
<i class="material-icons">brush</i>
</a>
<a href="#extensions" v-tooltip.right="$t('extensions')">
<i class="material-icons">extension</i>
</a>
<a href="#proxy" v-tooltip.right="$t('proxy')">
<i class="material-icons">public</i>
</a>
</nav>
</aside>
</template>
@@ -178,16 +128,17 @@ $responsiveWidth: 768px;
@apply transition;
@apply ease-in-out;
@apply duration-150;
// @apply overflow-y-auto;
@apply space-y-2;
}
nav.primary-nav {
@apply flex;
@apply flex-col;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply items-center;
@apply justify-center;
@apply space-y-2;
@apply w-full;
svg {
@apply fill-current;
@@ -239,45 +190,38 @@ nav.primary-nav::-webkit-scrollbar,
nav.secondary-nav {
@apply flex;
@apply flex-col;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply items-center;
@apply justify-center;
@apply border-t-2;
@apply border-dashed;
@apply border-brdColor;
@apply mt-2;
@apply pt-2;
@apply space-y-2;
ul {
@apply flex;
@apply flex-col;
@apply flex-no-wrap;
@apply space-y-2;
@apply py-1;
a {
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply flex-shrink-0;
@apply p-4;
@apply rounded-full;
@apply bg-bgDarkColor;
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-150;
li {
@apply flex;
&:hover {
@apply text-fgColor;
@apply fill-current;
}
a {
@apply p-4;
@apply rounded-full;
@apply bg-bgDarkColor;
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-150;
&:hover {
@apply text-fgColor;
@apply fill-current;
}
&.current {
@apply text-acColor;
@apply fill-current;
}
}
&.current {
@apply text-acColor;
@apply fill-current;
}
}
}
@@ -296,7 +240,7 @@ nav.secondary-nav {
nav.primary-nav {
@apply flex-row;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply overflow-auto;
@apply bg-bgDarkColor;
@apply space-y-0;

2
components/collections/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend>
<AppSection :label="$t('collections')" ref="collections" no-legend>
<div class="show-on-large-screen">
<input
aria-label="Search"

2
components/environments/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
<AppSection icon="history" :label="$t('environments')" ref="environments" no-legend>
<div class="show-on-large-screen">
<span class="select-wrapper">
<select

2
components/history/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="green" icon="history" :label="$t('history')" ref="history" no-legend>
<AppSection icon="history" :label="$t('history')" ref="history" no-legend>
<div class="show-on-large-screen">
<input
aria-label="Search"

28
components/history/rest/Card.vue
View File

@@ -18,19 +18,21 @@
class="bg-transparent"
/>
</li>
<button
data-testid="star_button"
class="icon"
:class="{ stared: entry.star }"
@click="$emit('toggle-star')"
v-tooltip="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
>
<i class="material-icons">
{{ entry.star ? "star" : "star_border" }}
</i>
</button>
<span>
<button
data-testid="star_button"
class="icon"
:class="{ stared: entry.star }"
@click="$emit('toggle-star')"
v-tooltip="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
>
<i class="material-icons">
{{ entry.star ? "star" : "star_border" }}
</i>
</button>
</span>
<!-- <li>
<button
class="icon"

2
components/http/BodyParameters.vue
View File

@@ -137,7 +137,7 @@
.file-chips-container {
@apply flex;
@apply flex-1;
@apply whitespace-no-wrap;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply bg-bgDarkColor;

2
components/http/Headers.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="orange" label="Headers" ref="headers" no-legend>
<AppSection label="Headers" ref="headers" no-legend>
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">

2
components/http/Notes.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="pink" :label="$t('notes')" ref="sync" no-legend>
<AppSection :label="$t('notes')" ref="sync" no-legend>
<div v-if="fb.currentUser">
<FirebaseInputform />
<FirebaseFeeds />

2
components/http/Parameters.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="pink" label="Parameters" ref="parameters" no-legend>
<AppSection label="Parameters" ref="parameters" no-legend>
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">

2
components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection class="purple" id="response" :label="$t('response')" ref="response" no-legend>
<AppSection id="response" :label="$t('response')" ref="response" no-legend>
<HttpResponseMeta :response="response" :active="active" />
<div v-if="response.body && response.body !== $t('loading')">
<LensesResponseBodyRenderer :response="response" />

38
components/lenses/ResponseBodyRenderer.vue
View File

@@ -1,24 +1,22 @@
<template>
<div>
<SmartTabs styles="m-4">
<SmartTab
v-for="(lens, index) in validLenses"
:key="lens.lensName"
:id="lens.lensName"
:label="lens.lensName"
:selected="index === 0"
>
<component :is="lens.renderer" :response="response" />
</SmartTab>
<SmartTab
v-if="Object.keys(response.headers).length !== 0"
id="headers"
:label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
>
<LensesHeadersRenderer :headers="response.headers" />
</SmartTab>
</SmartTabs>
</div>
<SmartTabs styles="m-4">
<SmartTab
v-for="(lens, index) in validLenses"
:key="lens.lensName"
:id="lens.lensName"
:label="lens.lensName"
:selected="index === 0"
>
<component :is="lens.renderer" :response="response" />
</SmartTab>
<SmartTab
v-if="Object.keys(response.headers).length !== 0"
id="headers"
:label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
>
<LensesHeadersRenderer :headers="response.headers" />
</SmartTab>
</SmartTabs>
</template>
<script>

8
components/realtime/Mqtt.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<AppSection class="blue" :label="$t('request')" no-legend>
<AppSection :label="$t('request')" no-legend>
<ul>
<li>
<label for="mqtt-url">{{ $t("url") }}</label>
@@ -30,9 +30,9 @@
</li>
</div>
</ul>
</Appsection>
</AppSection>
<AppSection class="blue" :label="$t('communication')" no-legend>
<AppSection :label="$t('communication')" no-legend>
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="this.log" />
@@ -94,7 +94,7 @@
</li>
</div>
</ul>
</Appsection>
</AppSection>
</div>
</template>

4
components/realtime/Socketio.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<AppSection class="blue" :label="$t('request')" ref="request" no-legend>
<AppSection :label="$t('request')" ref="request" no-legend>
<ul>
<li>
<label for="socketio-url">{{ $t("url") }}</label>
@@ -43,7 +43,7 @@
</ul>
</AppSection>
<AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />

4
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<AppSection class="blue" :label="$t('request')" ref="request" no-legend>
<AppSection :label="$t('request')" ref="request" no-legend>
<ul>
<li>
<label for="server">{{ $t("server") }}</label>
@@ -36,7 +36,7 @@
</ul>
</AppSection>
<AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<ul>
<li>
<RealtimeLog :title="$t('events')" :log="events.log" />

4
components/realtime/Websocket.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<AppSection class="blue" :label="$t('request')" ref="request" no-legend>
<AppSection :label="$t('request')" ref="request" no-legend>
<ul>
<li>
<label for="websocket-url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
</ul>
</AppSection>
<AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />

11
components/smart/AccentModePicker.vue
View File

@@ -2,12 +2,15 @@
<div class="flex flex-col">
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<div>
<!-- text-indigo-400 -->
<!-- text-purple-400 -->
<!-- text-pink-400 -->
<span
v-for="(color, index) of colors"
v-for="(color, index) of accentColors"
: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-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
:class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer hover:shadow-none"
:class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
@click="setActiveColor(color)"
>
<i class="material-icons">lens</i>
@@ -21,7 +24,7 @@ export default {
data() {
return {
active: localStorage.getItem("THEME_COLOR") || "green",
colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"],
accentColors: ["blue", "green", "indigo", "purple", "red", "pink", "yellow"],
}
},
methods: {

4
components/smart/AceEditor.vue
View File

@@ -37,7 +37,7 @@
.outline {
@apply flex;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply w-full;
@apply overflow-auto;
@apply font-mono;
@@ -103,7 +103,7 @@ export default {
provideJSONOutline: {
type: Boolean,
default: false,
required: false
required: false,
},
value: {
type: String,

2
components/smart/ColorModePicker.vue
View File

@@ -16,7 +16,7 @@
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-150 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 },
{ 'bg-actColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value },
]"
@click="$colorMode.preference = color"

13
components/smart/Tabs.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="tabs-wrapper">
<section class="tabs-wrapper">
<div class="tabs" :class="styles">
<ul>
<li
@@ -21,20 +21,19 @@
<div class="tabs-details">
<slot></slot>
</div>
</div>
</section>
</template>
<style scoped lang="scss">
.tabs-wrapper {
@apply flex;
@apply flex-col;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply flex-1;
.tabs {
@apply scrolling-touch;
@apply flex;
@apply whitespace-no-wrap;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply mt-4;
@@ -87,13 +86,15 @@
ul,
ol {
@apply flex-row;
@apply flex-no-wrap;
@apply flex-nowrap;
}
}
</style>
<script>
import Section from "../app/Section.vue"
export default {
components: { Section },
props: {
styles: {
type: String,