From 7b2dc68481e133604eb73137235800d7737eade6 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 11 Feb 2022 10:24:08 +0530 Subject: [PATCH] fix: placeholder styles --- .../hoppscotch-app/assets/scss/styles.scss | 3 +- .../components/http/Headers.vue | 9 ++ .../components/smart/EnvInput.vue | 5 +- .../helpers/editor/themes/baseTheme.ts | 120 ++++++++++++++++++ 4 files changed, 133 insertions(+), 4 deletions(-) diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss index 4ee18fa5c..f25e70da1 100644 --- a/packages/hoppscotch-app/assets/scss/styles.scss +++ b/packages/hoppscotch-app/assets/scss/styles.scss @@ -40,7 +40,8 @@ } input::placeholder, -textarea::placeholder { +textarea::placeholder, +.cm-placeholder { @apply text-secondary; @apply opacity-35; } diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue index d7a6df0d7..de1a051d5 100644 --- a/packages/hoppscotch-app/components/http/Headers.vue +++ b/packages/hoppscotch-app/components/http/Headers.vue @@ -49,6 +49,15 @@ :spellcheck="false" :value="header.key" autofocus + styles=" + bg-transparent + flex + flex-1 + py-1 + px-4 + truncate + " + class="flex-1 !flex" @input=" updateHeader(index, { key: $event, diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue index cbfd28c64..9b4de1d59 100644 --- a/packages/hoppscotch-app/components/smart/EnvInput.vue +++ b/packages/hoppscotch-app/components/smart/EnvInput.vue @@ -28,7 +28,7 @@ import { } from "@codemirror/view" import { EditorState, Extension } from "@codemirror/state" import clone from "lodash/clone" -import { baseTheme } from "~/helpers/editor/themes/baseTheme" +import { inputTheme } from "~/helpers/editor/themes/baseTheme" import { HoppEnvironmentPlugin } from "~/helpers/editor/extensions/HoppEnvironment" import { useStreamSubscriber } from "~/helpers/utils/composables" @@ -88,7 +88,7 @@ const envTooltipPlugin = new HoppEnvironmentPlugin(subscribeToStream, view) const initView = (el: any) => { const extensions: Extension = [ - baseTheme, + inputTheme, envTooltipPlugin, placeholderExt(props.placeholder), ViewPlugin.fromClass( @@ -158,6 +158,5 @@ watch(editor, () => { .env-input { @apply flex; @apply flex-1; - @apply px-2; } diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts index bb27c7c21..40d3f4159 100644 --- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts +++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts @@ -145,6 +145,126 @@ export const baseTheme = EditorView.theme({ }, }) +export const inputTheme = EditorView.theme({ + "&": { + fontSize: "var(--font-size-body)", + height: "100%", + width: "100%", + flex: "1", + }, + ".cm-content": { + caretColor: "var(--secondary-light-color)", + fontFamily: "var(--font-sans)", + backgroundColor: "var(--primary-color)", + borderRadius: "0.25rem", + }, + ".cm-cursor": { + borderColor: "var(--secondary-color)", + }, + ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": { + backgroundColor: "var(--accent-color)", + color: "var(--accent-contrast-color)", + }, + ".cm-panels": { + backgroundColor: "var(--primary-light-color)", + color: "var(--secondary-light-color)", + }, + ".cm-panels.cm-panels-top": { + borderBottom: "1px solid var(--divider-light-color)", + }, + ".cm-panels.cm-panels-bottom": { + borderTop: "1px solid var(--divider-light-color)", + }, + ".cm-search": { + display: "flex", + alignItems: "center", + flexWrap: "nowrap", + flexShrink: 0, + overflow: "auto", + }, + ".cm-search label": { + display: "inline-flex", + alignItems: "center", + }, + ".cm-textfield": { + backgroundColor: "var(--primary-dark-color)", + color: "var(--secondary-dark-color)", + borderColor: "var(--divider-light-color)", + borderRadius: "3px", + }, + ".cm-button": { + backgroundColor: "var(--primary-dark-color)", + color: "var(--secondary-dark-color)", + backgroundImage: "none", + border: "none", + }, + ".cm-tooltip": { + backgroundColor: "var(--primary-dark-color)", + color: "var(--secondary-light-color)", + border: "none", + borderRadius: "3px", + }, + ".cm-completionLabel": { + color: "var(--secondary-color)", + }, + ".cm-tooltip.cm-tooltip-autocomplete > ul": { + fontFamily: "var(--font-mono)", + }, + ".cm-tooltip-autocomplete ul li[aria-selected]": { + backgroundColor: "var(--accent-dark-color)", + color: "var(--accent-contrast-color)", + }, + ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": { + color: "var(--accent-contrast-color)", + }, + ".cm-activeLine": { backgroundColor: "transparent" }, + ".cm-searchMatch": { + outline: "1px solid var(--accent-dark-color)", + backgroundColor: "var(--divider-dark-color)", + }, + ".cm-selectionMatch": { + outline: "1px solid var(--accent-dark-color)", + backgroundColor: "var(--divider-light-color)", + }, + ".cm-matchingBracket, .cm-nonmatchingBracket": { + backgroundColor: "var(--divider-color)", + outline: "1px solid var(--accent-dark-color)", + }, + ".cm-gutters": { + fontFamily: "var(--font-mono)", + backgroundColor: "var(--primary-color)", + borderColor: "var(--divider-light-color)", + }, + ".cm-lineNumbers": { + minWidth: "3em", + color: "var(--secondary-light-color)", + }, + ".cm-foldGutter": { + minWidth: "2em", + color: "var(--secondary-light-color)", + }, + ".cm-foldGutter .cm-gutterElement": { + textAlign: "center", + }, + ".cm-line": { + paddingLeft: "1rem", + paddingRight: "1rem", + paddingTop: "0.2rem", + paddingBottom: "0.2rem", + }, + ".cm-activeLineGutter": { + backgroundColor: "transparent", + }, + ".cm-scroller::-webkit-scrollbar": { + display: "none", + }, + ".cm-foldPlaceholder": { + backgroundColor: "var(--divider-light-color)", + color: "var(--secondary-dark-color)", + borderColor: "var(--divider-dark-color)", + }, +}) + const editorTypeColor = "var(--editor-type-color)" const editorNameColor = "var(--editor-name-color)" const editorOperatorColor = "var(--editor-operator-color)"