feat: update subscriptions block, update token view in email subscrip…

…tion
umputun · Jan 13, 2024 · f29dbf3 · f29dbf3
1 parent 788d084
commit f29dbf3
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 122 deletions.
diff --git a/frontend/apps/remark42/.browserslistrc b/frontend/apps/remark42/.browserslistrc
@@ -0,0 +1 @@
+> 1%
diff --git a/frontend/apps/remark42/.npmrc b/frontend/apps/remark42/.npmrc
@@ -0,0 +1 @@
+use-node-version=16.15.1
diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.css b/frontend/apps/remark42/app/components/comment-form/comment-form.css
@@ -109,16 +109,6 @@
   }
 }
 
-.comment-form__markdown {
-  margin-bottom: 5px;
-  font-size: 12px;
-}
-
-.comment-form__markdown-link {
-  font-weight: 700;
-  white-space: nowrap;
-}
-
 .comment-form__preview {
   margin-top: 8px;
   padding: 7px 11px;
@@ -137,23 +127,6 @@
   background: var(--color5);
 }
 
-.comment-form__rss {
-  font-size: 12px;
-  line-height: 1;
-}
-
-.comment-form__rss-link {
-  font-weight: 700;
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: pointer;
-  color: var(--color9);
-
-  &:hover {
-    color: var(--color33);
-  }
-}
-
 .comment-form__dropdown_rss {
   text-align: left;
 

diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.module.css b/frontend/apps/remark42/app/components/comment-form/comment-form.module.css
@@ -0,0 +1,20 @@
+.subscriptions {
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.subscriptions > div > div {
+  margin: 0 0.25em;
+}
+
+.link {
+  font-weight: 700;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--color9);
+
+  &:hover {
+    color: var(--color33);
+  }
+}
diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx
@@ -1,6 +1,7 @@
 import { h, Component, createRef, Fragment } from 'preact';
 import { FormattedMessage, IntlShape, defineMessages, useIntl } from 'react-intl';
 import b, { Mix } from 'bem-react-helper';
+import clsx from 'clsx';
 
 import { User, Image, Theme } from 'common/types';
 import { StaticStore } from 'common/static-store';
@@ -9,6 +10,7 @@ import { extractErrorMessageFromResponse } from 'utils/errorUtils';
 import { isUserAnonymous } from 'utils/isUserAnonymous';
 import { sleep } from 'utils/sleep';
 import { replaceSelection } from 'utils/replaceSelection';
+import { useTheme } from 'hooks/useTheme';
 import { Button } from 'components/button';
 import { TextareaAutosize } from 'components/textarea-autosize';
 import { Auth } from 'components/auth';
@@ -23,7 +25,7 @@ import { updatePersistedComments, getPersistedComment, removePersistedComment }
 
 import 'components/raw-content';
 import './comment-form.css';
-import { useTheme } from 'hooks/useTheme';
+import styles from './comment-form.module.css';
 
 type State = {
   preview: string | null;
@@ -344,19 +346,17 @@ class CommentFormComponent extends Component<CommentFormComponentProps, State> {
   };
 
   renderMarkdownTip = () => (
-    <div className="comment-form__markdown">
-      <FormattedMessage
-        id="commentForm.notice-about-styling"
-        defaultMessage="Styling with <a>Markdown</a> is supported"
-        values={{
-          a: (title: string) => (
-            <a class="comment-form__markdown-link" target="_blank" href="markdown-help.html">
-              {title}
-            </a>
-          ),
-        }}
-      />
-    </div>
+    <FormattedMessage
+      id="commentForm.notice-about-styling"
+      defaultMessage="Styling with <a>Markdown</a> is supported"
+      values={{
+        a: (title: string) => (
+          <a target="_blank" href="markdown-help.html" className={styles.link}>
+            {title}
+          </a>
+        ),
+      }}
+    />
   );
 
   renderSubscribeButtons = () => {
@@ -366,29 +366,36 @@ class CommentFormComponent extends Component<CommentFormComponentProps, State> {
     const isTelegramSubscription = isTelegramNotificationsEnabledOnBackend && settings.isTelegramSubscription;
 
     const { isRssSubscription } = settings;
-    if (!isRssSubscription && !isEmailSubscription && !isTelegramSubscription) {
+    const subscriptions: JSX.Element[] = [];
+
+    if (isRssSubscription) {
+      subscriptions.push(<SubscribeByRSS userId={this.props.user?.id} />);
+    }
+
+    if (isEmailSubscription) {
+      subscriptions.push(<SubscribeByEmail />);
+    }
+
+    if (isTelegramSubscription) {
+      subscriptions.push(<SubscribeByTelegram />);
+    }
+
+    if (subscriptions.length === 0) {
       return null;
     }
 
     return (
-      <>
-        <FormattedMessage id="commentForm.subscribe-by" defaultMessage="Subscribe by" />{' '}
-        {isRssSubscription && <SubscribeByRSS userId={this.props.user?.id ?? null} />}
-        {isRssSubscription && isEmailSubscription && (
-          <>
-            {' '}
-            <FormattedMessage id="commentForm.subscribe-or" defaultMessage="or" />{' '}
-          </>
-        )}
-        {isEmailSubscription && <SubscribeByEmail />}
-        {(isRssSubscription && isTelegramSubscription) || (isEmailSubscription && isTelegramSubscription) ? (
-          <>
-            {' '}
-            <FormattedMessage id="commentForm.subscribe-or" defaultMessage="or" />{' '}
-          </>
-        ) : null}
-        {isTelegramSubscription && <SubscribeByTelegram />}
-      </>
+      <div>
+        <FormattedMessage id="commentForm.subscribe-by" defaultMessage="Subscribe by" />
+        {subscriptions.map((c, i, all) => {
+          return (
+            <Fragment key={i}>
+              {c}
+              {i + 1 < all.length && <FormattedMessage id="commentForm.or" defaultMessage="or" />}
+            </Fragment>
+          );
+        })}
+      </div>
     );
   };
 
@@ -482,16 +489,16 @@ class CommentFormComponent extends Component<CommentFormComponentProps, State> {
               </div>
 
               {mode === 'main' && (
-                <div className="comment-form__rss">
-                  {this.renderMarkdownTip()}
+                <div className={clsx('comment-form-subscriptions', styles.subscriptions)}>
+                  <div>{this.renderMarkdownTip()}</div>
                   {this.renderSubscribeButtons()}
                 </div>
               )}
             </>
           ) : (
             <>
               <Auth />
-              {this.renderMarkdownTip()}
+              <div className={clsx('comment-form-subscriptions', styles.subscriptions)}>{this.renderMarkdownTip()}</div>
             </>
           )}
         </div>

diff --git a/...2/app/components/comment-form/components/subscribe-by-email/subscribe-by-email.module.css b/...2/app/components/comment-form/components/subscribe-by-email/subscribe-by-email.module.css
@@ -3,14 +3,38 @@
   flex-wrap: wrap;
   flex-direction: column;
   padding: 8px;
-  width: 200px;
+  width: 240px;
   box-sizing: border-box;
   line-height: 1.2;
   text-align: left;
+  font-size: 14px;
+}
+
+.root > * + * {
+  margin-top: 12px;
+}
+
+.tokenInput {
+  composes: input from 'components/input/input.module.css';
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 60px;
+  max-height: 200px;
+  margin: 0;
+  padding: 4px 8px;
+  resize: vertical;
+  font-size: 16px;
+  font-family: inherit;
+}
+
+.backButton {
+  width: auto;
 }
 
-.rootToken {
-  padding-top: 0;
+.backButtonArrow {
+  display: inline-block;
+  margin-left: -4px;
+  margin-right: 2px;
 }
 
 .rootSubscribed,
@@ -20,37 +44,11 @@
   font-size: 14px;
 }
 
-.title {
-  margin-bottom: 12px;
-}
-
-.button {
-  margin-top: 10px;
-  flex-grow: 1;
-}
-
 .preloader {
   margin: 0 auto;
 }
 
-.tokenInput {
-  resize: vertical;
-  border: 1px solid var(--color31);
-  padding: 4px;
-  font-family: inherit;
-  font-size: 0.8em;
-  font-weight: normal;
-  line-height: 1.5;
-
-  &:focus {
-    box-shadow: 0 0 0 2px var(--color47);
-    border-color: var(--color15);
-    outline: none;
-  }
-}
-
 .error {
-  margin-top: 8px;
   padding: 6px 8px;
   line-height: 1.2;
   background: var(--color26);