fix: sticky searchbar hidden in codemirror (#3351)

* fix: sticky search bar in codemirror * chore: use tailwind classes * chore: improve consistency across editor instances --------- Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
2023-09-18 12:45:14 +05:30
parent 8b0ba3a45e
commit 3684d25848
22 changed files with 172 additions and 23 deletions
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -497,6 +497,22 @@ pre.ace_editor {
  }
 }

+.cm-panel.cm-search [name="close"] {
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply min-h-5;
+  @apply min-w-5;
+  @apply bg-primaryDark #{!important};
+  @apply sticky #{!important};
+  @apply right-0 #{!important};
+  @apply ml-auto #{!important};
+  @apply my-auto #{!important};
+  @apply rounded #{!important};
+  @apply outline #{!important};
+  @apply outline-divider #{!important};
+}
+
 .shortcut-key {
  @apply inline-flex;
  @apply font-sans;
--- a/packages/hoppscotch-common/assets/scss/themes.scss
+++ b/packages/hoppscotch-common/assets/scss/themes.scss
@@ -8,6 +8,7 @@
  --upper-primary-sticky-fold: 4.125rem;
  --upper-secondary-sticky-fold: 6.188rem;
  --upper-tertiary-sticky-fold: 8.25rem;
+  --upper-fourth-sticky-fold: 10.2rem;
  --upper-mobile-primary-sticky-fold: 6.625rem;
  --upper-mobile-secondary-sticky-fold: 8.688rem;
  --upper-mobile-sticky-fold: 10.75rem;
@@ -15,6 +16,7 @@
  --lower-primary-sticky-fold: 3rem;
  --lower-secondary-sticky-fold: 5.063rem;
  --lower-tertiary-sticky-fold: 7.125rem;
+  --lower-fourth-sticky-fold: 9.188rem;
  --sidebar-primary-sticky-fold: 2rem;
 }

--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -144,6 +144,7 @@ declare module 'vue' {
    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -211,3 +211,9 @@ defineActionHandler("request.open-tab", ({ tab }) => {
  selectedOptionTab.value = tab as GQLOptionTabs
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperPrimaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -139,3 +139,9 @@ defineActionHandler(
  computed(() => !!props.response && props.response.length > 0)
 )
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-sidebarPrimaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -396,3 +396,9 @@ const copySchema = () => {
  copySchemaIcon.value = IconCheck
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-sidebarPrimaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -528,3 +528,9 @@ const getInspectorResult = (results: InspectorResult[], index: number) => {
  })
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -430,3 +430,9 @@ const getInspectorResult = (results: InspectorResult[], index: number) => {
  })
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -110,3 +110,9 @@ const clearContent = () => {
  preRequestScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -205,3 +205,9 @@ const prettifyXML = (xml: string) => {
  })
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperFourthStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -106,3 +106,9 @@ const clearContent = () => {
  testScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -424,3 +424,9 @@ const clearContent = () => {
  bulkUrlEncodedParams.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperFourthStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -86,7 +86,11 @@
        />
      </div>
    </div>
-    <div ref="jsonResponse" class="flex flex-col flex-1 h-auto h-full"></div>
+    <div
+      ref="jsonResponse"
+      class="flex flex-col flex-1 h-auto h-full"
+      :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
+    ></div>
    <div
      v-if="outlinePath"
      class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
@@ -381,4 +385,12 @@ defineActionHandler("response.copy", () => copyResponse())
  @apply transition;
  @apply hover: text-secondary;
 }
+
+:deep(.responseToggleOff .cm-panels) {
+  @apply top-lowerTertiaryStickyFold #{!important};
+}
+
+:deep(.responseToggleOn .cm-panels) {
+  @apply top-lowerFourthStickyFold #{!important};
+}
 </style>
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
@@ -117,3 +117,9 @@ useCodemirror(
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-lowerTertiaryStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Communication.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div
+    class="flex flex-col flex-1"
+    :class="{ eventFeildShown: showEventField }"
+  >
    <div
      v-if="showEventField"
      class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
@@ -271,3 +274,17 @@ const prettifyRequestBody = () => {

 defineActionHandler("request.send-cancel", sendMessage)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperSecondaryStickyFold #{!important};
+}
+.eventFeildShown :deep(.cm-panels),
+.cmResponsePrimaryStickyFold :deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+
+.cmResponseSecondaryStickyFold :deep(.cm-panels) {
+  @apply top-upperFourthStickyFold #{!important};
+}
+</style>
--- a/packages/hoppscotch-common/src/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-common/src/components/smart/EnvInput.vue
@@ -152,6 +152,22 @@ const updateModelValue = (value: string) => {
  })
 }

+// close the context menu when the input is empty
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (!newVal) {
+      invokeAction("contextmenu.open", {
+        position: {
+          top: 0,
+          left: 0,
+        },
+        text: null,
+      })
+    }
+  }
+)
+
 const handleKeystroke = (ev: KeyboardEvent) => {
  if (["ArrowDown", "ArrowUp", "Enter", "Tab", "Escape"].includes(ev.key)) {
    ev.preventDefault()
@@ -314,8 +330,7 @@ const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 function handleTextSelection() {
  const selection = view.value?.state.selection.main
  if (selection) {
-    const from = selection.from
-    const to = selection.to
+    const { from, to } = selection
    if (from === to) return
    const text = view.value?.state.doc.sliceString(from, to)
    const { top, left } = view.value?.coordsAtPos(from)
--- a/packages/hoppscotch-common/src/composables/codemirror.ts
+++ b/packages/hoppscotch-common/src/composables/codemirror.ts
@@ -219,8 +219,8 @@ export function useCodemirror(
  function handleTextSelection() {
    const selection = view.value?.state.selection.main
    if (selection) {
-      const from = selection.from
-      const to = selection.to
+      const { from, to } = selection
+      if (from === to) return
      const text = view.value?.state.doc.sliceString(from, to)
      const { top, left } = view.value?.coordsAtPos(from)
      if (text) {
--- a/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
@@ -63,6 +63,7 @@ export const baseTheme = EditorView.theme({
  ".cm-panels": {
    backgroundColor: "var(--primary-light-color)",
    color: "var(--secondary-light-color)",
+    zIndex: "1",
  },
  ".cm-panels.cm-panels-top": {
    borderBottom: "1px solid var(--divider-light-color)",
@@ -74,25 +75,34 @@ export const baseTheme = EditorView.theme({
    display: "flex",
    alignItems: "center",
    flexWrap: "nowrap",
-    flexShrink: 0,
+    flexShrink: "0",
    overflow: "auto",
+    padding: "0.25rem 0.5rem !important",
  },
  ".cm-search label": {
    display: "inline-flex",
    alignItems: "center",
  },
  ".cm-textfield": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-color)",
    color: "var(--secondary-dark-color)",
    borderColor: "var(--divider-light-color)",
    borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
  },
  ".cm-button": {
-    backgroundColor: "var(--primary-dark-color)",
-    color: "var(--secondary-dark-color)",
+    backgroundColor: "var(--primary-color)",
+    color: "var(--secondary-light-color)",
    backgroundImage: "none",
-    border: "none",
    borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    textTransform: "capitalize",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
  },
  ".cm-completionLabel": {
    color: "var(--secondary-color)",
@@ -107,10 +117,10 @@ export const baseTheme = EditorView.theme({
    color: "var(--tooltip-color)",
  },
  ".cm-tooltip-arrow:after": {
-    borderTopColor: "inherit !important",
+    borderTopColor: "currentColor !important",
  },
  ".cm-tooltip-arrow:before": {
-    borderTopColor: "inherit !important",
+    borderTopColor: "currentColor !important",
  },
  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
    fontFamily: "var(--font-mono)",
@@ -155,8 +165,8 @@ export const baseTheme = EditorView.theme({
    textAlign: "center",
  },
  ".cm-line": {
-    paddingLeft: "0.5em",
-    paddingRight: "0.5em",
+    paddingLeft: "0.5rem",
+    paddingRight: "0.5rem",
  },
  ".cm-activeLineGutter": {
    backgroundColor: "transparent",
@@ -183,6 +193,7 @@ export const inputTheme = EditorView.theme({
    fontFamily: "var(--font-sans)",
    color: "var(--secondary-dark-color)",
    backgroundColor: "transparent",
+    height: "100%",
  },
  ".cm-cursor": {
    borderColor: "var(--secondary-color)",
@@ -198,6 +209,7 @@ export const inputTheme = EditorView.theme({
  ".cm-panels": {
    backgroundColor: "var(--primary-light-color)",
    color: "var(--secondary-light-color)",
+    zIndex: "1",
  },
  ".cm-panels.cm-panels-top": {
    borderBottom: "1px solid var(--divider-light-color)",
@@ -209,25 +221,34 @@ export const inputTheme = EditorView.theme({
    display: "flex",
    alignItems: "center",
    flexWrap: "nowrap",
-    flexShrink: 0,
+    flexShrink: "0",
    overflow: "auto",
+    padding: "0.25rem 0.5rem !important",
  },
  ".cm-search label": {
    display: "inline-flex",
    alignItems: "center",
  },
  ".cm-textfield": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-color)",
    color: "var(--secondary-dark-color)",
    borderColor: "var(--divider-light-color)",
    borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
  },
  ".cm-button": {
-    backgroundColor: "var(--primary-dark-color)",
-    color: "var(--secondary-dark-color)",
+    backgroundColor: "var(--primary-color)",
+    color: "var(--secondary-light-color)",
    backgroundImage: "none",
-    border: "none",
    borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    textTransform: "capitalize",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
  },
  ".cm-completionLabel": {
    color: "var(--secondary-color)",
@@ -290,10 +311,11 @@ export const inputTheme = EditorView.theme({
    textAlign: "center",
  },
  ".cm-line": {
+    lineHeight: "1rem",
    paddingLeft: "1rem",
    paddingRight: "1rem",
-    paddingTop: "0.2rem",
-    paddingBottom: "0.2rem",
+    paddingTop: "0.25rem",
+    paddingBottom: "0.25rem",
  },
  ".cm-activeLineGutter": {
    backgroundColor: "transparent",
--- a/packages/hoppscotch-common/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
@@ -106,6 +106,7 @@
          <RealtimeCommunication
            :show-event-field="true"
            :is-connected="connectionState === 'CONNECTED'"
+            class="cmResponseSecondaryStickyFold"
            event-field-styles="top-upperSecondaryStickyFold"
            sticky-header-styles="top-upperTertiaryStickyFold"
            @send-message="sendMessage($event)"
--- a/packages/hoppscotch-common/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
@@ -46,6 +46,7 @@
        >
          <RealtimeCommunication
            :is-connected="connectionState === 'CONNECTED'"
+            class="cmResponsePrimaryStickyFold"
            sticky-header-styles="top-upperSecondaryStickyFold"
            @send-message="sendMessage($event)"
          />
--- a/packages/hoppscotch-common/windi.config.ts
+++ b/packages/hoppscotch-common/windi.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
        upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
        upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
        upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        upperFourthStickyFold: "var(--upper-fourth-sticky-fold)",
        upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
        upperMobileSecondaryStickyFold:
          "var(--upper-mobile-secondary-sticky-fold)",
@@ -22,6 +23,7 @@ export default defineConfig({
        lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
        lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
        lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
+        lowerFourthStickyFold: "var(--lower-fourth-sticky-fold)",
        sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
        sidebarSecondaryStickyFold: "var(--line-height-body)",
      },