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

Feat/tailwind (#1179)

Browse Source
This commit is contained in:
Liyas Thomas
2020-09-22 22:36:37 +05:30
committed by GitHub
parent 45fb612793
commit b747d0273c
59 changed files with 2020 additions and 1431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
pages/doc.vue
View File

@@ -12,7 +12,7 @@
</ul>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="collectionUpload">
<button
class="icon"
@@ -288,39 +288,43 @@
.doc-desc,
.folder,
.request {
display: flex;
flex-flow: column;
justify-content: center;
flex: 1;
padding: 16px;
@apply flex;
@apply flex-col;
@apply justify-center;
@apply flex-1;
@apply p-8;
.material-icons {
margin-right: 16px;
@apply mr-8;
}
}
.folder {
border-left: 1px solid var(--brd-color);
margin: 16px 0 0;
@apply border-l;
@apply border-brdColor;
@apply mt-8;
}
.request {
border: 1px solid var(--brd-color);
border-radius: 8px;
margin: 16px 0 0;
@apply border;
@apply border-brdColor;
@apply rounded-lg;
@apply mt-8;
h4 {
margin: 8px 0;
@apply mt-8;
}
}
.doc-desc {
color: var(--fg-light-color);
border-bottom: 1px dashed var(--brd-color);
margin: 0;
@apply text-fgLightColor;
@apply border-b;
@apply border-dashed;
@apply border-brdColor;
@apply m-0;
&:last-child {
border-bottom: none;
@apply border-b-0;
}
}
</style>

12
pages/graphql.vue
View File

@@ -29,7 +29,7 @@
<pw-section class="orange" :label="$t('headers')" ref="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
@@ -93,7 +93,7 @@
</pw-section>
<pw-section class="green" :label="$t('schema')" ref="schema">
<div class="flex-wrap">
<div class="row-wrapper">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
<button
@@ -153,7 +153,7 @@
</pw-section>
<pw-section class="cyan" :label="$t('query')" ref="query">
<div class="flex-wrap gqlRunQuery">
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<button
@@ -210,7 +210,7 @@
</pw-section>
<pw-section class="purple" label="Response" ref="response">
<div class="flex-wrap">
<div class="row-wrapper">
<label for="responseField">{{ $t("response") }}</label>
<div>
<button
@@ -321,10 +321,10 @@
<style scoped lang="scss">
.gqlTabs {
max-height: calc(100vh - 192px);
overflow: auto;
@apply overflow-auto;
}
.gqlRunQuery {
margin-bottom: 12px;
@apply mb-8;
}
</style>

56
pages/index.vue
View File

@@ -207,7 +207,7 @@
</ul>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<span>
<pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event">
{{ $t("raw_input") }}
@@ -267,7 +267,7 @@
<div v-if="!rawInput">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="reqParamList">{{ $t("parameter_list") }}</label>
<div>
<button
@@ -337,7 +337,7 @@
<div v-else>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="rawBody">{{ $t("raw_request_body") }}</label>
<div>
<button
@@ -365,7 +365,7 @@
</ul>
</div>
</div>
<div class="flex-wrap">
<div class="row-wrapper">
<span>
<button
class="icon"
@@ -433,7 +433,7 @@
<pw-section class="pink" label="Parameters" ref="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
@@ -523,7 +523,7 @@
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="auth">{{ $t("authentication") }}</label>
<div>
<button
@@ -575,7 +575,7 @@
</ul>
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<input placeholder="Token" name="bearer_token" v-model="bearerToken" />
<button
v-if="auth === 'OAuth 2.0'"
@@ -596,7 +596,7 @@
</div>
</li>
</ul>
<div class="flex-wrap">
<div class="row-wrapper">
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
{{ $t("include_in_url") }}
</pw-toggle>
@@ -610,7 +610,7 @@
>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="token-name">{{ $t("token_name") }}</label>
<div>
<button
@@ -732,7 +732,7 @@
<pw-section class="orange" label="Headers" ref="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
@@ -810,7 +810,7 @@
>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="generatedCode">{{ $t("javascript_code") }}</label>
<div>
<a
@@ -855,7 +855,7 @@
>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="generatedCode">{{ $t("javascript_code") }}</label>
<div>
<a
@@ -881,7 +881,7 @@
}"
/>
<div v-if="testReports.length !== 0">
<div class="flex-wrap">
<div class="row-wrapper">
<label>Test Reports</label>
<div>
<button
@@ -897,7 +897,7 @@
<div v-if="testReport.startBlock" class="info">
<h4>{{ testReport.startBlock }}</h4>
</div>
<p v-else-if="testReport.result" class="flex-wrap info">
<p v-else-if="testReport.result" class="row-wrapper info">
<span :class="testReport.styles.class">
<i class="material-icons">
{{ testReport.styles.icon }}
@@ -942,19 +942,19 @@
<aside v-if="activeSidebar" class="sticky-inner inner-right">
<section>
<tabs>
<tab :id="'history'" :icon="'watch_later'" :label="$t('history')" :selected="true">
<tab :id="'history'" :label="$t('history')" :selected="true">
<history @useHistory="handleUseHistory" ref="historyComponent" />
</tab>
<tab :id="'collections'" :icon="'folder_special'" :label="$t('collections')">
<tab :id="'collections'" :label="$t('collections')">
<collections />
</tab>
<tab :id="'env'" :icon="'style'" :label="$t('environments')">
<tab :id="'env'" :label="$t('environments')">
<environments @use-environment="useSelectedEnvironment($event)" />
</tab>
<tab :id="'notes'" :icon="'note'" :label="$t('notes')">
<tab :id="'notes'" :label="$t('notes')">
<pw-section class="pink" :label="$t('notes')" ref="sync">
<div v-if="fb.currentUser">
<inputform />
@@ -986,7 +986,7 @@
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3>
<div>
<button class="icon" @click="showModal = false">
@@ -1010,7 +1010,7 @@
</ul>
</div>
<div slot="footer">
<div class="flex-wrap">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="showModal = false">
@@ -1028,7 +1028,7 @@
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3>
<div>
<button class="icon" @click="isHidden = true">
@@ -1054,7 +1054,7 @@
</ul>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
@@ -1085,7 +1085,7 @@
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3>
<div>
<button class="icon" @click="showTokenList = false">
@@ -1099,7 +1099,7 @@
<div slot="body">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
@@ -1129,7 +1129,7 @@
<li>
<input :value="token.value" readonly />
</li>
<div class="flex-wrap">
<div class="row-wrapper">
<li>
<button
class="icon"
@@ -1161,7 +1161,7 @@
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token_req") }}</h3>
<div>
<button class="icon" @click="showTokenRequestList = false">
@@ -1175,7 +1175,7 @@
<div slot="body">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="token-req-list">{{ $t("token_req_list") }}</label>
<div>
<button
@@ -1231,7 +1231,7 @@
</ul>
</div>
<div slot="footer">
<div class="flex-wrap">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon primary" @click="addOAuthTokenReq">

33
pages/settings.vue
View File

@@ -8,7 +8,7 @@
<img
v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL"
class="material-icons"
class="rounded-full material-icons"
/>
<i v-else class="material-icons">account_circle</i>
<span>
@@ -119,7 +119,7 @@
<pw-section class="purple" :label="$t('extensions')" ref="extensions">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<pw-toggle
:on="settings.EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')"
@@ -131,17 +131,22 @@
</ul>
<ul class="info">
<li v-if="extensionVersion != null">
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
<p>
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
extensionVersion.minor
}}
</p>
</li>
<li v-else>
<p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
</li>
<li v-else>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</li>
</ul>
</pw-section>
<pw-section class="blue" :label="$t('proxy')" ref="proxy">
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<span>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
{{ $t("proxy") }}
@@ -162,7 +167,7 @@
</ul>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<label for="url">{{ $t("url") }}</label>
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
<i class="material-icons">clear_all</i>
@@ -227,7 +232,7 @@
</ul>
<ul>
<li>
<div class="flex-wrap">
<div class="row-wrapper">
<pw-toggle
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
@@ -238,11 +243,19 @@
</li>
</ul>
</pw-section>
<!-- <div>
<h1>Color mode: {{ $colorMode.value }}</h1>
<select v-model="$colorMode.preference">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
</select>
</div> -->
</div>
</template>
<style scoped lang="scss"></style>
<script>
import firebase from "firebase/app"
import { fb } from "~/helpers/fb"