Imprv/gw5589 bot type ui #3603

kaori-tokashiki · 2021-04-08T07:29:30Z

タスク

GW-5589 Bot type選択のUI改善(defalt)
GW-5594 Bot type選択時のUIを整える
PR分けてレビュー依頼出そうと思っていたのですが、同時にやってしまいました。
完全に再現するとなると大変なので、微調整やコンポーネント化(共通化)は後続タスクで着手します。

表示

XD
なぜか中国語の表示が切り替えられなかったので日本語版と英語版のみにしてます。

日本語

ダークモード

後続タスク

GW-5607 bot type項目のコンポーネント化
GW-5608 bot type ui 微調整タスク
- margin / padding / 文字やアイコンの大きさ調整/ border radius
- Official botのバッジとアイコン

…ze smaller than h2

…bot-types

kaori-tokashiki · 2021-04-08T07:52:11Z

src/client/styles/scss/theme/_apply-colors.scss

+/*
+  Slack Integration
+*/
+.selecting-bot-type {
+  .bot-type-disc-easy {
+    color: #33d541;
+  }
+  .bot-type-disc-normal {
+    color: #e6a63c;
+  }
+  .bot-type-disc-difficult {
+    color: #ff5757;
+  }
+  .bot-type-disc-possible {
+    color: $info;
+  }
+  .bot-type-disc-impossible {
+    color: $gray-500;
+  }
+}


ここでのみ使用する色は直書きでカラーコードを書いています。

kaori-tokashiki · 2021-04-08T08:02:26Z

src/client/styles/scss/_admin.scss

+.selecting-bot-type {
+  .btn-link {
+    font-size: 1rem;
+    cursor: pointer;
+  }
+  .supplementary-desc {
+    font-size: 1rem;
+  }
+  .badge-info {
+    font-size: 0.6rem;
+  }


見出しの隣にあるアイコンやバッジは、headerにつられてサイズが大きくなってしまうのでfont-sizeを指定しています。

これは、ページの見出しにある編集アイコンを参考にしています。

kaori-tokashiki · 2021-04-08T12:35:38Z

src/client/styles/scss/_admin.scss

@@ -84,6 +84,7 @@
  }

  .admin-bot-card {
+    min-width: 280px;


min-widthを指定することで、文字のはみ出しを防いでいます。

itizawa

コメントしました。確認お願いします

itizawa · 2021-04-09T03:14:23Z

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -103,6 +103,16 @@ const SlackIntegration = (props) => {
      break;
  }

+  const showBotTypeLebel = (level) => {


修正しました...!

itizawa · 2021-04-09T03:19:15Z

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

+                  <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' && 'bg-primary text-light'}`} aria-hidden="true"></i>
+                </h3>
+              </div>
+              <div className="card-body p-4">


丸みは消滅しました...?
その結果微妙な白いスペースが... 😭

https://zenn.dev/seya/articles/f642acf1c47358

三角は意外と簡単に実装できるかも？

ありがとうございます!
ただ、武井さんと話し合った結果、三角いらないだろうという話になりました。。。

itizawa · 2021-04-09T03:22:03Z

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

-              <h5 className="card-title">Custom Bot (With Proxy)</h5>
-              <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+            <div
+              className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-with-proxy' && 'border-primary'}`}


この書き方、僕も前やっていたのですが。 false が混入してしまうのでやめたほうが良いですね

なるほど、修正しました。

itizawa · 2021-04-09T03:23:55Z

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

+                <span className="supplementary-desc mr-2">
+                  {t('admin:slack_integration.selecting_bot_types.with_proxy')}
+                </span>
+                <i className={`fa fa-external-link btn-link ${currentBotType === 'custom-bot-with-proxy' && 'bg-primary text-light'}`} aria-hidden="true"></i>


これって Docs へのリンクですよね。
忘れてしまいそうなので、後ほど追加する予定であれば TODO コメントをしておいて欲しいですね

itizawa · 2021-04-09T03:25:40Z

src/client/styles/scss/_admin.scss

+.selecting-bot-type {
+  .btn-link {
+    font-size: 1rem;
+    cursor: pointer;


btn-link はもともと cursor: pointer; が設定されていそうです

指摘ありがとうございます。削除しました。

itizawa · 2021-04-09T03:34:51Z

src/client/styles/scss/_admin.scss

+    font-size: 0.6rem;
+  }
+  .border-primary {
+    border-width: 2px;


その結果微妙な白いスペースが... 😭
上記のスペースの原因はこれかも？

…bot-types

kaori-tokashiki · 2021-04-09T06:41:37Z

src/client/styles/scss/_admin.scss

+    .admin-bot-card {
+      min-width: 280px;
+      cursor: pointer;
+      border-radius: 0.5rem !important;
+    }


!importantつけないと反映されないので追加しました。

kaori-tokashiki · 2021-04-09T06:42:44Z

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

+            {/* TODO: add an appropriate link by GW-5614 */}
+            <i className="fa fa-external-link" aria-hidden="true"></i>


linkの指定は後続タスクで着手します
TODO commentを記載しました。

GW-5614 Docsに飛ぶリンクを指定する

kaori-tokashiki · 2021-04-09T07:00:17Z

FB対応後お対応後の見た目です。

itizawa · 2021-04-09T07:20:34Z

src/client/styles/scss/_admin.scss

+    }
+    .admin-bot-card {
+      min-width: 280px;
+      cursor: pointer;


twbs/bootstrap#23709
role='button' 使ってねって書いてますね

修正しました。

kaori added 30 commits April 6, 2021 18:58

apply i18n for Official bot

8b94b05

style adjustment

33e6dee

remove unnecessary codes

7329e61

add margin bottom for each text

e035601

apply i18n

6f34f91

remove unnecessary under bar

6d585f0

apply color

e770a81

add icons for official bot description

255d0d9

add a link for slack bot

e76e8be

surrounded official bot content with a div tag and made badge info si…

0dd39ae

…ze smaller than h2

replace icons to words

0754426

easy

e84a41f

created showDescription

8db6bff

show labels with showBotTypeLabel

6c84abf

add function to show levels

0d74e59

change info to primary

fc7c6cf

apply bg-color to card header

96e0292

clean codes

a441dc7

add custom bot cards

ff01486

fix colors

1aca7fa

clean codes

b639bbb

apply colors to bot type desc

32c04c7

i18n

5fb472e

improve css

93cd695

i18n

09a4646

clean codes

79449b8

change text size "with proxy"

bdc45f3

Merge branch 'feat/growi-bot' into imprv/gw5589-design-for-selecting-…

9ebc3bd

…bot-types

add margin to slack bot type content

3a259ad

remove one line

3e406b5

kaori added 3 commits April 8, 2021 16:44

fix set up

deb318a

i18n for US

36f91bf

i18n CN

c90b1eb

kaori-tokashiki commented Apr 8, 2021

View reviewed changes

style adjustment

db00e4d

kaori-tokashiki commented Apr 8, 2021

View reviewed changes

itizawa reviewed Apr 9, 2021

View reviewed changes

kaori added 4 commits April 9, 2021 12:54

Merge branch 'feat/growi-bot' into imprv/gw5589-design-for-selecting-…

75a7f41

…bot-types

FB: fix typo

c6cf94f

FB: removed cursor-pointer, applied border-radius to admin-bot-card

12a4712

FB

ab1fe24

kaori-tokashiki commented Apr 9, 2021

View reviewed changes

i18n

b1c4844

fix i18n keys

8b6923c

itizawa reviewed Apr 9, 2021

View reviewed changes

FB 2

ab1b6cd

kaori-tokashiki merged commit 066f408 into feat/growi-bot Apr 9, 2021

kaori-tokashiki deleted the imprv/gw5589-design-for-selecting-bot-types branch April 9, 2021 12:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Imprv/gw5589 bot type ui #3603

Imprv/gw5589 bot type ui #3603

kaori-tokashiki commented Apr 8, 2021 •

edited

Loading

kaori-tokashiki Apr 8, 2021

kaori-tokashiki Apr 8, 2021 •

edited

Loading

kaori-tokashiki Apr 8, 2021

itizawa left a comment

itizawa Apr 9, 2021

kaori-tokashiki Apr 9, 2021

itizawa Apr 9, 2021

itizawa Apr 9, 2021

kaori-tokashiki Apr 9, 2021

itizawa Apr 9, 2021

kaori-tokashiki Apr 9, 2021

itizawa Apr 9, 2021

itizawa Apr 9, 2021

kaori-tokashiki Apr 9, 2021 •

edited

Loading

itizawa Apr 9, 2021

kaori-tokashiki Apr 9, 2021

kaori-tokashiki Apr 9, 2021 •

edited

Loading

kaori-tokashiki commented Apr 9, 2021 •

edited

Loading

itizawa Apr 9, 2021

kaori-tokashiki Apr 9, 2021

		{/* TODO: add an appropriate link by GW-5614 */}
		<i className="fa fa-external-link" aria-hidden="true"></i>

Imprv/gw5589 bot type ui #3603

Imprv/gw5589 bot type ui #3603

Conversation

kaori-tokashiki commented Apr 8, 2021 • edited Loading

タスク

表示

日本語

ダークモード

後続タスク

Choose a reason for hiding this comment

kaori-tokashiki Apr 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itizawa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kaori-tokashiki Apr 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kaori-tokashiki Apr 9, 2021 • edited Loading

Choose a reason for hiding this comment

kaori-tokashiki commented Apr 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kaori-tokashiki commented Apr 8, 2021 •

edited

Loading

kaori-tokashiki Apr 8, 2021 •

edited

Loading

kaori-tokashiki Apr 9, 2021 •

edited

Loading

kaori-tokashiki Apr 9, 2021 •

edited

Loading

kaori-tokashiki commented Apr 9, 2021 •

edited

Loading