Merge remote-tracking branch 'gitlab/dev' into drafts-2

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

_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 (
+    <div class={clsx(styles.<%= h.changeCase.pascal(name) %>, props.class)}>
+      <%= h.changeCase.pascal(name) %>
+    </div>
+  )
+}

_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) %>'

_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;
+}

public/icons/up-button.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="26" height="26" stroke="currentColor" stroke-width="2"/>
+<path d="M10 11H13V20H15V11H18L14 7L10 11Z" fill="currentColor"/>
+</svg>

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",

public/locales/ru/translation.json

@@ -187,6 +187,7 @@
   "Send": "Отправить",
   "Send link again": "Прислать ссылку ещё раз",
   "Settings": "Настройки",
+  "Scroll up": "Наверх",
   "Share": "Поделиться",
   "Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
   "Show": "Показать",

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;
@@ -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);
+    }
+  }
 }

src/components/Views/Edit.module.scss

@@ -13,6 +13,8 @@
 }
 
 .container {
+  position: relative;
+
   .titleInput,
   .subtitleInput {
     border: 0;
@@ -98,6 +100,49 @@
   }
 }
 
+.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 {
+  @include font-size(1.4rem);
+
+  display: none;
+  font-weight: bold;
+  left: 100%;
+  padding-left: 0.5em;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .inputContainer {
   position: relative;
 

src/components/Views/Edit.tsx

@@ -10,6 +10,7 @@ import { useRouter } from '../../stores/router'
 import { Editor } from '../Editor/Editor'
 import { Panel } from '../Editor/Panel'
 import { useEditorContext } from '../../context/editor'
+import { Icon } from '../_shared/Icon'
 
 type EditViewProps = {
   shout: Shout
@@ -68,8 +69,20 @@ export const EditView = (props: EditViewProps) => {
     setForm('slug', slug)
   }
 
+  const scrollTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <>
+      <button class={styles.scrollTopButton} onClick={scrollTop}>
+        <Icon name="up-button" class={styles.icon} />
+        <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
+      </button>
+
       <div class={styles.container}>
         <Title>{t('Write an article')}</Title>
         <form>

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;
+    }
+  }
+}