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

feat: floating input label

Browse Source
This commit is contained in:
liyasthomas
2021-08-07 14:51:13 +05:30
parent 92abbc4ce6
commit 3d963a7719
24 changed files with 132 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/scss/styles.scss
View File

@@ -198,6 +198,29 @@ button {
@apply hidden;
}
.floating-input ~ label {
@apply font-semibold;
@apply py-0.5;
@apply px-2;
@apply m-2;
@apply rounded;
@apply transition;
@apply absolute;
}
.floating-input:focus-within ~ label,
.floating-input:not(:placeholder-shown) ~ label {
@apply bg-primary;
@apply transform;
@apply origin-center;
@apply scale-75;
@apply -translate-y-6;
}
.floating-input:focus-within ~ label {
@apply text-accent;
}
pre.ace_editor {
@apply font-mono;
@apply resize-none;

10
components/collections/Add.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelAdd"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="$t('collection.name')"
@keyup.enter="addNewCollection"
/>
<label for="selectLabelAdd">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/collections/AddFolder.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelAddFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelAddFolder"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="$t('folder.new')"
@keyup.enter="addFolder"
/>
<label for="selectLabelAddFolder">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/collections/Edit.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEdit" class="font-semibold px-4 pb-4">{{
$t("label")
}}</label>
<input
id="selectLabelEdit"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
<label for="selectLabelEdit">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

9
components/collections/EditFolder.vue
View File

@@ -6,16 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEditFolder" class="font-semibold px-4 pb-4">{{
$t("label")
}}</label>
<input
id="selectLabelEditFolder"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
@keyup.enter="editFolder"
/>
<label for="selectLabelEditFolder">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/collections/EditRequest.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEditReq" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelEditReq"
v-model="requestUpdateData.name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="placeholderReqName"
@keyup.enter="saveRequest"
/>
<label for="selectLabelEditReq">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

11
components/collections/SaveRequest.vue
View File

@@ -6,15 +6,18 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelSaveReq" class="font-semibold px-4 pb-4">
{{ $t("request.name") }}
</label>
<div class="flex relative">
<input
id="selectLabelSaveReq"
v-model="requestName"
class="input"
class="input floating-input"
placeholder=" "
type="text"
/>
<label for="selectLabelSaveReq">
{{ $t("request.name") }}
</label>
</div>
<label class="font-semibold px-4 pt-4 pb-4">
{{ $t("collection.select_location") }}
</label>

10
components/collections/graphql/Add.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelGqlAdd"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="$t('collection.name')"
@keyup.enter="addNewCollection"
/>
<label for="selectLabelGqlAdd">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/collections/graphql/AddFolder.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelGqlAddFolder"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="$t('folder.new')"
@keyup.enter="addFolder"
/>
<label for="selectLabelGqlAddFolder">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/collections/graphql/Edit.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelGqlEdit"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="editingCollection.name"
@keyup.enter="saveCollection"
/>
<label for="selectLabelGqlEdit">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

11
components/collections/graphql/EditFolder.vue
View File

@@ -6,17 +6,16 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelGqlEditFolder"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="folder.name"
@keyup.enter="editFolder"
/>
<label for="selectLabelGqlEditFolder">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/collections/graphql/EditRequest.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelGqlEditReq"
v-model="requestUpdateData.name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="request.name"
@keyup.enter="saveRequest"
/>
<label for="selectLabelGqlEditReq">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

2
components/collections/graphql/ImportExport.vue
View File

@@ -59,7 +59,6 @@
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
@@ -74,7 +73,6 @@
ref="inputChooseFileToImportFrom"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>

10
components/environments/Add.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEnvAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelEnvAdd"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment"
/>
<label for="selectLabelEnvAdd">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/environments/Edit.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEnvEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelEnvEdit"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment"
/>
<label for="selectLabelEnvEdit">
{{ $t("label") }}
</label>
<div class="flex flex-1 justify-between items-center">
<label for="variableList" class="font-semibold px-4 pt-4 pb-4">
{{ $t("env_variable_list") }}

2
components/environments/ImportExport.vue
View File

@@ -61,7 +61,6 @@
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
@@ -76,7 +75,6 @@
ref="inputChooseFileToImportFrom"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>

12
components/firebase/Login.vue
View File

@@ -25,23 +25,23 @@
/>
</div>
<div v-if="mode === 'email'" class="flex flex-col space-y-2">
<div class="flex relative items-center">
<label for="email" class="flex px-4 absolute items-center">
<i class="opacity-75 material-icons">mail</i>
</label>
<div class="flex items-center relative">
<input
id="email"
v-model="form.email"
class="input !pl-12"
class="input floating-input"
placeholder=" "
type="email"
name="email"
:placeholder="$t('email')"
autocomplete="email"
required
spellcheck="false"
autofocus
@keyup.enter="signInWithEmail"
/>
<label for="email">
{{ $t("auth.email") }}
</label>
</div>
<ButtonPrimary
:loading="signingInWithEmail"

2
components/smart/Modal.vue
View File

@@ -50,7 +50,7 @@
<div class="flex pl-2 items-center justify-between">
<slot name="header"></slot>
</div>
<div class="flex flex-col my-4 overflow-auto">
<div class="flex flex-col my-4">
<slot name="body"></slot>
</div>
<div

10
components/teams/Add.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelTeamAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelTeamAdd"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="$t('team.new_name')"
@keyup.enter="addNewTeam"
/>
<label for="selectLabelTeamAdd">
{{ $t("label") }}
</label>
</div>
</template>
<template #footer>

10
components/teams/Edit.vue
View File

@@ -6,17 +6,17 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelTeamEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelTeamEdit"
v-model="name"
class="input"
class="input floating-input"
placeholder=" "
type="text"
:placeholder="editingTeam.name"
@keyup.enter="saveTeam"
/>
<label for="selectLabelTeamEdit">
{{ $t("label") }}
</label>
<div class="flex flex-1 justify-between items-center">
<label for="memberList" class="font-semibold px-4 pt-4 pb-4">
{{ $t("team.members") }}

3
helpers/oauth.js
View File

@@ -154,9 +154,12 @@ const tokenRequest = async ({
}) => {
// Check oauth configuration
if (oidcDiscoveryUrl !== "") {
// eslint-disable-next-line camelcase
const { authorization_endpoint, token_endpoint } =
await getTokenConfiguration(oidcDiscoveryUrl)
// eslint-disable-next-line camelcase
authUrl = authorization_endpoint
// eslint-disable-next-line camelcase
accessTokenUrl = token_endpoint
}

1
lang/en-US.json
View File

@@ -135,6 +135,7 @@
"gist_created": "Gist created"
},
"auth": {
"email": "Email",
"account_exists": "Account exists with different credential - Login to link both accounts",
"send_magic_link": "Send a magic link",
"we_sent_magic_link": "We sent you a magic link!",

2
newstore/settings.ts
View File

@@ -83,7 +83,7 @@ export const defaultSettings: SettingsType = {
httpPassword: true,
bearerToken: true,
},
THEME_COLOR: "green",
THEME_COLOR: "blue",
BG_COLOR: "system",
TELEMETRY_ENABLED: true,
SHORTCUT_INDICATOR: false,

40
pages/settings.vue
View File

@@ -282,46 +282,24 @@
>.
</div>
<div class="space-y-4 mt-4">
<div class="flex items-center">
<div class="flex space-x-2 items-center">
<SmartToggle
:on="PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')"
/>
<label
for="url"
class="
bg-primaryLight
border border-divider
rounded-l
ml-2
py-2
px-4
truncate
"
>
{{ `${$t("proxy")} ${$t("url")}` }}
</label>
<div class="flex flex-1 items-center relative">
<input
id="url"
v-model="PROXY_URL"
class="
bg-primaryLight
border border-divider
rounded-r
flex
font-semibold font-mono
flex-1
mr-2
py-2
px-4
block
focus:(border-accent
outline-none)
"
class="input floating-input"
placeholder=" "
type="url"
:disabled="!PROXY_ENABLED"
:placeholder="$t('url')"
/>
<label for="url">
{{ `${$t("proxy")} ${$t("url")}` }}
</label>
</div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('reset_default')"
@@ -406,7 +384,7 @@ export default defineComponent({
showLogin: false,
active: getLocalConfig("THEME_COLOR") || "green",
active: getLocalConfig("THEME_COLOR") || "blue",
confirmRemove: false,
}
},