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

refactor: remove font sizes from the app (#3341)

Browse Source 
* refactor: remove font size from settings

* refactor: remove font size from themes

* refactor: remove font size from spotlight

* refactor: remove default font size

* chore: clean up

---------

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2023-09-13 11:45:38 +05:30
committed by GitHub
parent 65ef4db86f
commit a6b57777e3
11 changed files with 70 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
packages/hoppscotch-common/assets/scss/themes.scss
View File

@@ -2,7 +2,20 @@
--font-sans: "Inter Variable", sans-serif;
--font-icon: "Material Symbols Rounded Variable";
--font-mono: "Roboto Mono Variable", monospace;
--font-size-tiny: calc(var(--font-size-body) - 0.062rem);
--font-size-body: 0.75rem;
--font-size-tiny: 0.688rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@mixin dark-theme {
@@ -200,8 +213,8 @@
:root {
@include base-theme;
@include dark-theme;
@include green-theme;
@include dark-editor-theme;
@include green-theme;
}
:root.light {
@@ -257,63 +270,3 @@
:root[data-accent="yellow"] {
@include yellow-theme;
}
@mixin font-small {
--font-size-body: 0.75rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@mixin font-medium {
--font-size-body: 0.875rem;
--line-height-body: 1.25rem;
--upper-primary-sticky-fold: 4.375rem;
--upper-secondary-sticky-fold: 6.688rem;
--upper-tertiary-sticky-fold: 9rem;
--upper-mobile-primary-sticky-fold: 7.125rem;
--upper-mobile-secondary-sticky-fold: 9.438rem;
--upper-mobile-sticky-fold: 11.75rem;
--upper-mobile-tertiary-sticky-fold: 9rem;
--lower-primary-sticky-fold: 3.25rem;
--lower-secondary-sticky-fold: 5.563rem;
--lower-tertiary-sticky-fold: 7.875rem;
--sidebar-primary-sticky-fold: 2.25rem;
}
@mixin font-large {
--font-size-body: 1rem;
--line-height-body: 1.5rem;
--upper-primary-sticky-fold: 4.625rem;
--upper-secondary-sticky-fold: 7.188rem;
--upper-tertiary-sticky-fold: 9.75rem;
--upper-mobile-primary-sticky-fold: 7.625rem;
--upper-mobile-secondary-sticky-fold: 10.188rem;
--upper-mobile-sticky-fold: 12.75rem;
--upper-mobile-tertiary-sticky-fold: 9.75rem;
--lower-primary-sticky-fold: 3.5rem;
--lower-secondary-sticky-fold: 6.063rem;
--lower-tertiary-sticky-fold: 8.625rem;
--sidebar-primary-sticky-fold: 2.5rem;
}
:root[data-font-size="small"] {
@include font-small;
}
:root[data-font-size="medium"] {
@include font-medium;
}
:root[data-font-size="large"] {
@include font-large;
}

6
packages/hoppscotch-common/src/components/realtime/LogEntry.vue
View File

@@ -17,7 +17,7 @@
<span
v-tippy="{ theme: 'tooltip' }"
:title="relativeTime"
class="mx-auto truncate ts-font text-secondaryLight hover:text-secondary hover:text-center"
class="mx-auto truncate text-tiny text-secondaryLight hover:text-secondary hover:text-center"
>
{{ shortDateTime(entry.ts) }}
</span>
@@ -406,8 +406,4 @@ const icon = computed(() => markRaw(ICONS[props.entry.source].icon))
@apply transition;
@apply hover: text-secondary;
}
.ts-font {
font-size: 0.6rem;
}
</style>

71
packages/hoppscotch-common/src/components/smart/FontSizePicker.vue
View File

@@ -1,71 +0,0 @@
<template>
<span class="inline-flex">
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.change_font_size')"
class="pr-8"
:icon="IconType"
outline
:label="`${getFontSizeName(
fontSizes.find((size) => size === active)
)}`"
/>
</span>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
<HoppSmartItem
v-for="(size, index) in fontSizes"
:key="`size-${index}`"
:label="`${getFontSizeName(size)}`"
:icon="size === active ? IconCircleDot : IconCircle"
:active="size === active"
@click="
() => {
setActiveFont(size)
hide()
}
"
/>
</div>
</template>
</tippy>
</span>
</template>
<script setup lang="ts">
import IconCircleDot from "~icons/lucide/circle-dot"
import IconCircle from "~icons/lucide/circle"
import IconType from "~icons/lucide/type"
import { HoppFontSizes, HoppFontSize, applySetting } from "~/newstore/settings"
import { useSetting } from "@composables/settings"
import { useI18n } from "@composables/i18n"
import { ref } from "vue"
const t = useI18n()
const fontSizes = HoppFontSizes
const active = useSetting("FONT_SIZE")
const getFontSizeName = (size: HoppFontSize) => {
return t(`settings.font_size_${size}`)
}
const setActiveFont = (size: HoppFontSize) => {
applySetting("FONT_SIZE", size)
}
// Template refs
const tippyActions = ref<any | null>(null)
</script>

22
packages/hoppscotch-common/src/layouts/default.vue
View File

@@ -79,7 +79,6 @@ const router = useRouter()
const showSearch = ref(false)
const showSupport = ref(false)
const fontSize = useSetting("FONT_SIZE")
const expandNavigation = useSetting("EXPAND_NAVIGATION")
const rightSidebar = useSetting("SIDEBAR")
const columnLayout = useSetting("COLUMN_LAYOUT")
@@ -132,24 +131,9 @@ watch(mdAndLarger, () => {
columnLayout.value = true
}
})
const spacerClass = computed(() => {
if (fontSize.value === "small" && expandNavigation.value)
return "spacer-small"
if (fontSize.value === "medium" && expandNavigation.value)
return "spacer-medium"
if (fontSize.value === "large" && expandNavigation.value)
return "spacer-large"
if (
(fontSize.value === "small" ||
fontSize.value === "medium" ||
fontSize.value === "large") &&
!expandNavigation.value
)
return "spacer-expand"
return ""
})
const spacerClass = computed(() =>
expandNavigation.value ? "spacer-small" : "spacer-expand"
)
defineActionHandler("modals.search.toggle", () => {
showSearch.value = !showSearch.value

14
packages/hoppscotch-common/src/modules/theming.ts
View File

@@ -68,23 +68,9 @@ const applyAccentColor = (_app: App) => {
)
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const applyFontSize = (_app: App) => {
const [pref] = useSettingStatic("FONT_SIZE")
watch(
pref,
(newPref) => {
document.documentElement.setAttribute("data-font-size", newPref)
},
{ immediate: true }
)
}
export default <HoppModule>{
onVueAppInit(app) {
applyColorMode(app)
applyAccentColor(app)
applyFontSize(app)
},
}

6
packages/hoppscotch-common/src/newstore/settings.ts
View File

@@ -23,10 +23,6 @@ export const HoppAccentColors = [
export type HoppAccentColor = (typeof HoppAccentColors)[number]
export const HoppFontSizes = ["small", "medium", "large"] as const
export type HoppFontSize = (typeof HoppFontSizes)[number]
export type SettingsDef = {
syncCollections: boolean
syncHistory: boolean
@@ -49,7 +45,6 @@ export type SettingsDef = {
EXPAND_NAVIGATION: boolean
SIDEBAR: boolean
SIDEBAR_ON_LEFT: boolean
FONT_SIZE: HoppFontSize
COLUMN_LAYOUT: boolean
}
@@ -75,7 +70,6 @@ export const getDefaultSettings = (): SettingsDef => ({
EXPAND_NAVIGATION: true,
SIDEBAR: true,
SIDEBAR_ON_LEFT: true,
FONT_SIZE: "small",
COLUMN_LAYOUT: true,
})

10
packages/hoppscotch-common/src/pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="container space-y-8 divide-y divide-dividerLight">
<div class="container divide-y divide-dividerLight">
<div class="md:grid md:gap-4 md:grid-cols-3">
<div class="p-8 md:col-span-1">
<h3 class="heading">
@@ -36,14 +36,6 @@
<SmartAccentModePicker />
</div>
</section>
<section>
<h4 class="font-semibold text-secondaryDark">
{{ t("settings.font_size") }}
</h4>
<div class="mt-4">
<SmartFontSizePicker />
</div>
</section>
<section>
<h4 class="font-semibold text-secondaryDark">
{{ t("settings.language") }}

68
packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts
View File

@@ -14,7 +14,6 @@ import IconGlobe from "~icons/lucide/globe"
import IconMonitor from "~icons/lucide/monitor"
import IconMoon from "~icons/lucide/moon"
import IconSun from "~icons/lucide/sun"
import IconCircle from "~icons/lucide/circle"
import IconCheckCircle from "~icons/lucide/check-circle"
type Doc = {
@@ -34,7 +33,6 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
private t = getI18n()
private activeFontSize = useSetting("FONT_SIZE")
private activeTheme = useSetting("BG_COLOR")
public readonly searcherID = "settings"
@@ -91,60 +89,7 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
: markRaw(IconMoon)
),
},
font_size_sm: {
text: [
this.t("settings.font_size"),
this.t("spotlight.settings.font.size_sm"),
],
onClick: () => {
console.log("clicked")
},
alternates: [
"font size",
"change font size",
"change font",
"increase font",
],
icon: computed(() =>
this.activeFontSize.value === "small"
? markRaw(IconCheckCircle)
: markRaw(IconCircle)
),
},
font_size_md: {
text: [
this.t("settings.font_size"),
this.t("spotlight.settings.font.size_md"),
],
alternates: [
"font size",
"change font size",
"change font",
"increase font",
],
icon: computed(() =>
this.activeFontSize.value === "medium"
? markRaw(IconCheckCircle)
: markRaw(IconCircle)
),
},
font_size_lg: {
text: [
this.t("settings.font_size"),
this.t("spotlight.settings.font.size_lg"),
],
alternates: [
"font size",
"change font size",
"change font",
"increase font",
],
icon: computed(() =>
this.activeFontSize.value === "large"
? markRaw(IconCheckCircle)
: markRaw(IconCircle)
),
},
change_lang: {
text: [
this.t("spotlight.section.interface"),
@@ -202,17 +147,6 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
case "theme_black":
invokeAction("settings.theme.black")
break
// font size actions
case "font_size_sm":
this.activeFontSize.value = "small"
break
case "font_size_md":
this.activeFontSize.value = "medium"
break
case "font_size_lg":
this.activeFontSize.value = "large"
break
}
}
}

83
packages/hoppscotch-sh-admin/assets/scss/themes.scss
View File

@@ -1,8 +1,21 @@
@mixin base-theme {
--font-sans: "Inter Variable", sans-serif;
--font-icon: "Material Symbols Rounded Variable";
--font-mono: "Roboto Mono Variable", monospace;
--font-size-tiny: calc(var(--font-size-body) - 0.062rem);
--font-sans: 'Inter Variable', sans-serif;
--font-icon: 'Material Symbols Rounded Variable';
--font-mono: 'Roboto Mono Variable', monospace;
--font-size-body: 0.75rem;
--font-size-tiny: 0.688rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@mixin dark-theme {
@@ -200,8 +213,8 @@
:root {
@include base-theme;
@include dark-theme;
@include green-theme;
@include dark-editor-theme;
@include green-theme;
}
:root.light {
@@ -257,63 +270,3 @@
:root[data-accent='yellow'] {
@include yellow-theme;
}
@mixin font-small {
--font-size-body: 0.75rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@mixin font-medium {
--font-size-body: 0.875rem;
--line-height-body: 1.25rem;
--upper-primary-sticky-fold: 4.375rem;
--upper-secondary-sticky-fold: 6.688rem;
--upper-tertiary-sticky-fold: 9rem;
--upper-mobile-primary-sticky-fold: 7.125rem;
--upper-mobile-secondary-sticky-fold: 9.438rem;
--upper-mobile-sticky-fold: 11.75rem;
--upper-mobile-tertiary-sticky-fold: 9rem;
--lower-primary-sticky-fold: 3.25rem;
--lower-secondary-sticky-fold: 5.563rem;
--lower-tertiary-sticky-fold: 7.875rem;
--sidebar-primary-sticky-fold: 2.25rem;
}
@mixin font-large {
--font-size-body: 1rem;
--line-height-body: 1.5rem;
--upper-primary-sticky-fold: 4.625rem;
--upper-secondary-sticky-fold: 7.188rem;
--upper-tertiary-sticky-fold: 9.75rem;
--upper-mobile-primary-sticky-fold: 7.625rem;
--upper-mobile-secondary-sticky-fold: 10.188rem;
--upper-mobile-sticky-fold: 12.75rem;
--upper-mobile-tertiary-sticky-fold: 9.75rem;
--lower-primary-sticky-fold: 3.5rem;
--lower-secondary-sticky-fold: 6.063rem;
--lower-tertiary-sticky-fold: 8.625rem;
--sidebar-primary-sticky-fold: 2.5rem;
}
:root[data-font-size='small'] {
@include font-small;
}
:root[data-font-size='medium'] {
@include font-medium;
}
:root[data-font-size='large'] {
@include font-large;
}

35
packages/hoppscotch-sh-admin/index.html
View File

@@ -1,20 +1,17 @@
<!DOCTYPE html>
<html lang="en" data-font-size="medium">
<head>
<script>
globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
</script>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoppscotch Admin</title>
<meta property="og:image" content="/cover.jpg" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<html lang="en">
<head>
<script>
globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
</script>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hoppscotch Admin</title>
<meta property="og:image" content="/cover.jpg" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

77
packages/hoppscotch-ui/src/assets/scss/themes.scss
View File

@@ -2,7 +2,20 @@
--font-sans: "Inter Variable", sans-serif;
--font-icon: "Material Symbols Rounded Variable";
--font-mono: "Roboto Mono Variable", monospace;
--font-size-tiny: calc(var(--font-size-body) - 0.062rem);
--font-size-body: 0.75rem;
--font-size-tiny: 0.688rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@mixin dark-theme {
@@ -200,8 +213,8 @@
:root {
@include base-theme;
@include dark-theme;
@include green-theme;
@include dark-editor-theme;
@include green-theme;
}
:root.light {
@@ -257,63 +270,3 @@
:root[data-accent="yellow"] {
@include yellow-theme;
}
@mixin font-small {
--font-size-body: 0.75rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@mixin font-medium {
--font-size-body: 0.875rem;
--line-height-body: 1.25rem;
--upper-primary-sticky-fold: 4.375rem;
--upper-secondary-sticky-fold: 6.688rem;
--upper-tertiary-sticky-fold: 9rem;
--upper-mobile-primary-sticky-fold: 7.125rem;
--upper-mobile-secondary-sticky-fold: 9.438rem;
--upper-mobile-sticky-fold: 11.75rem;
--upper-mobile-tertiary-sticky-fold: 9rem;
--lower-primary-sticky-fold: 3.25rem;
--lower-secondary-sticky-fold: 5.563rem;
--lower-tertiary-sticky-fold: 7.875rem;
--sidebar-primary-sticky-fold: 2.25rem;
}
@mixin font-large {
--font-size-body: 1rem;
--line-height-body: 1.5rem;
--upper-primary-sticky-fold: 4.625rem;
--upper-secondary-sticky-fold: 7.188rem;
--upper-tertiary-sticky-fold: 9.75rem;
--upper-mobile-primary-sticky-fold: 7.625rem;
--upper-mobile-secondary-sticky-fold: 10.188rem;
--upper-mobile-sticky-fold: 12.75rem;
--upper-mobile-tertiary-sticky-fold: 9.75rem;
--lower-primary-sticky-fold: 3.5rem;
--lower-secondary-sticky-fold: 6.063rem;
--lower-tertiary-sticky-fold: 8.625rem;
--sidebar-primary-sticky-fold: 2.5rem;
}
:root[data-font-size="small"] {
@include font-small;
}
:root[data-font-size="medium"] {
@include font-medium;
}
:root[data-font-size="large"] {
@include font-large;
}