From ff094f7c75201fd1ee565cdfb5ae44253dcbb849 Mon Sep 17 00:00:00 2001 From: bniwredyc Date: Sat, 6 May 2023 13:11:45 +0200 Subject: [PATCH 1/4] hygen component generator --- README.md | 5 +++++ _templates/component/new/component.ejs.t | 18 ++++++++++++++++++ _templates/component/new/index.ejs.t | 4 ++++ _templates/component/new/styles.ejs.t | 7 +++++++ .../context/new/{hello.ejs.t => context.ejs.t} | 0 5 files changed, 34 insertions(+) create mode 100644 _templates/component/new/component.ejs.t create mode 100644 _templates/component/new/index.ejs.t create mode 100644 _templates/component/new/styles.ejs.t rename _templates/context/new/{hello.ejs.t => context.ejs.t} (100%) diff --git a/README.md b/README.md index 838c472a..12c7733a 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,11 @@ npm run typecheck:watch ``` ## Code generation +generate new SolidJS component: +``` +npx hygen component new NewComponentName +``` + generate new SolidJS context: ``` npx hygen context new NewContextName diff --git a/_templates/component/new/component.ejs.t b/_templates/component/new/component.ejs.t new file mode 100644 index 00000000..6f6a7c04 --- /dev/null +++ b/_templates/component/new/component.ejs.t @@ -0,0 +1,18 @@ +--- +to: src/components/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.tsx +--- + +import { clsx } from 'clsx' +import styles from './<%= h.changeCase.pascal(name) %>.module.scss' + +type Props = { + class?: string +} + +export const <%= h.changeCase.pascal(name) %> = (props: Props) => { + return ( +
, props.class)}> + <%= h.changeCase.pascal(name) %> +
+ ) +} diff --git a/_templates/component/new/index.ejs.t b/_templates/component/new/index.ejs.t new file mode 100644 index 00000000..13e22de4 --- /dev/null +++ b/_templates/component/new/index.ejs.t @@ -0,0 +1,4 @@ +--- +to: src/components/<%= h.changeCase.pascal(name) %>/index.ts +--- +export { <%= h.changeCase.pascal(name) %> } from './<%= h.changeCase.pascal(name) %>' diff --git a/_templates/component/new/styles.ejs.t b/_templates/component/new/styles.ejs.t new file mode 100644 index 00000000..2a0ed70c --- /dev/null +++ b/_templates/component/new/styles.ejs.t @@ -0,0 +1,7 @@ +--- +to: src/components/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.module.scss +--- + +.<%= h.changeCase.pascal(name) %> { + display: block; +} diff --git a/_templates/context/new/hello.ejs.t b/_templates/context/new/context.ejs.t similarity index 100% rename from _templates/context/new/hello.ejs.t rename to _templates/context/new/context.ejs.t From 525ca626fbdf06fc53474aa4b1e72a9acfb00d33 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Sat, 6 May 2023 18:04:50 +0300 Subject: [PATCH 2/4] Added scroll up button in the editor --- public/icons/up-button.svg | 4 +++ public/locales/en/translation.json | 1 + public/locales/ru/translation.json | 1 + src/components/Views/Edit.module.scss | 44 +++++++++++++++++++++++++++ src/components/Views/Edit.tsx | 13 ++++++++ 5 files changed, 63 insertions(+) create mode 100644 public/icons/up-button.svg diff --git a/public/icons/up-button.svg b/public/icons/up-button.svg new file mode 100644 index 00000000..a5a436ca --- /dev/null +++ b/public/icons/up-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 087436bb..637bc0e0 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -166,6 +166,7 @@ "Restore password": "Restore password", "Save draft": "Save draft", "Save settings": "Save settings", + "Scroll up": "Scroll up", "Search": "Search", "Search author": "Search author", "Search topic": "Search topic", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index d11e92d0..8ea0c002 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -187,6 +187,7 @@ "Send": "Отправить", "Send link again": "Прислать ссылку ещё раз", "Settings": "Настройки", + "Scroll up": "Наверх", "Share": "Поделиться", "Short opening": "Небольшое вступление, чтобы заинтересовать читателя", "Show": "Показать", diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index f65a9d8a..46648131 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -13,6 +13,8 @@ } .container { + position: relative; + .titleInput, .subtitleInput { border: 0; @@ -97,3 +99,45 @@ } } } + +.scrollTopButton { + cursor: pointer; + left: 2rem; + position: sticky; + top: calc(100vh - 40px); + width: 2.8rem; + z-index: 2; + + @include media-breakpoint-down(md) { + display: none; + } + + @include media-breakpoint-up(xl) { + left: 4rem; + } + + &:hover { + .icon { + opacity: 1; + } + + .scrollTopButtonLabel { + display: block; + } + } + + .icon { + opacity: 0.4; + } +} + +.scrollTopButtonLabel { + display: none; + @include font-size(1.4rem); + font-weight: bold; + left: 100%; + padding-left: 0.5em; + position: absolute; + top: 50%; + transform: translateY(-50%); +} diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index d871fda0..fac37216 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -13,6 +13,7 @@ import { translit } from '../../utils/ru2en' import { Editor } from '../Editor/Editor' import { Panel } from '../Editor/Panel' import { useEditorContext } from '../../context/editor' +import { Icon } from '../_shared/Icon' type EditViewProps = { shout: Shout @@ -73,8 +74,20 @@ export const EditView = (props: EditViewProps) => { setForm('slug', slug) } + const scrollTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }) + } + return ( <> + +
{t('Write an article')} From de61fa09bc8206f9fefaabdaeeae79568c00e43c Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Sat, 6 May 2023 19:12:17 +0300 Subject: [PATCH 3/4] Fixed topics control style --- src/components/Nav/Header.module.scss | 2 +- src/pages/profile/Settings.module.scss | 30 ++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index fe344927..4bdef84f 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -392,7 +392,7 @@ } .userControl { - align-items: baseline; + align-items: center; display: flex; opacity: 1; transition: opacity 0.3s; diff --git a/src/pages/profile/Settings.module.scss b/src/pages/profile/Settings.module.scss index eed12635..24faffb6 100644 --- a/src/pages/profile/Settings.module.scss +++ b/src/pages/profile/Settings.module.scss @@ -189,3 +189,33 @@ h5 { transition: filter 0.3s; } } + +:global(.solid-select-control) { + align-items: center !important; + border: 2px solid #e8e8e8 !important; + border-radius: 2px; + min-height: 61px; + padding: 1rem 0.7rem 0.5rem 1.2rem !important; + + :global(.solid-select-input) { + border: none; + margin-bottom: 0; + padding: 0; + } + + :global(.solid-select-multi-value) { + margin: 0 0.5rem 0.5rem 0; + padding-left: 0.8rem; + padding-bottom: 0.2rem; + } + + :global(.solid-select-multi-value-remove) { + font-size: 2.4rem; + line-height: 1.1; + + &:hover { + opacity: 0.5; + text-shadow: none !important; + } + } +} From f7232cadb1416cc9ede11c91bf3c6ab343b7a998 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Sat, 6 May 2023 19:40:43 +0300 Subject: [PATCH 4/4] Fixed header controls style --- src/components/Nav/Header.module.scss | 30 ++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 4bdef84f..f9e9bb83 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -428,6 +428,7 @@ display: flex; height: 2.4em; justify-content: center; + margin-left: 0.5em; position: relative; transition: margin-left 0.3s; width: 2.4em; @@ -484,11 +485,8 @@ width: 100%; } } - .icon { - display: inline-flex; - align-items: center; - justify-content: center; + .icon { img { height: 20px; width: auto; @@ -508,7 +506,20 @@ } .userControlItemVerbose { - margin-right: 0.5em; + margin-left: 0.5em; + + &:global(.loginbtn) { + .icon { + height: 2.4rem; + width: 2.4rem; + } + + img { + max-width: none; + height: 2.4rem; + width: 2.4rem; + } + } @include media-breakpoint-up(lg) { margin-right: 0; @@ -519,8 +530,7 @@ } .textLabel { - // padding: 0 1.2rem; - + padding: 0 1.2rem; display: inline; position: relative; z-index: 1; @@ -531,4 +541,10 @@ a::before { border-radius: 1.2em !important; } + + a:hover { + .icon { + filter: invert(0); + } + } }