160341-172821 Implement Text Style Tab#10779
160341-172821 Implement Text Style Tab#10779yuki-takei merged 7 commits intofeat/160341-editor-guidefrom
Conversation
|
mariko-h
changed the title
| <p className="mb-0">Click the close button or the background to close.</p> | ||
| {activeTab === 'textstyle' && <TextStyleTab />} | ||
| {activeTab === 'layout' && <LayoutTab />} | ||
| {activeTab === 'decoration' && <DecorationTab />} |
There was a problem hiding this comment.
| { | ||
| id: 'link-sandbox', | ||
| title: '', | ||
| code: '[砂場ページはこちら](/Sandbox)', |
There was a problem hiding this comment.
GROWI 本体は多言語対応しているので useTranslation を使って書いてください。(ここ以外の日本語で書かれている部分も)
ソースコード内部で useTranslation で全文検索するとどういう使われ方をしているのかわかると思います。
|
現在の表示はこちらになります。 |
| <CustomNavTab | ||
| activeTab={activeTab} | ||
| navTabMapping={navTabMapping} | ||
| onNavSelected={tab => setActiveTab(tab as TabType)} |
There was a problem hiding this comment.
assertion を書かずに実装できますか？(TS の恩恵が薄れるのでなるべく as を書きたくないです)
| const navTabMapping = useMemo(() => { | ||
| return { | ||
| textstyle: { | ||
| i18n: 'テキストスタイル', |
There was a problem hiding this comment.
これ動いてますか？
editor_guide.tabs.textstyle みたいな、i18n の key を入れれないといけないんじゃないかと思っていました。(間違っていたらすみません）
また i18n に入れたものはどこで消費されていますか？
使用例
| width: 'fit-content', | ||
| color: '#D63384', // 文字の色 | ||
| border: '1px solid #D63384', // 枠線の色（太さ1px、実線、指定の色） | ||
| backgroundColor: 'transparent', // 背景を透明にする場合（必要に応じて） |
There was a problem hiding this comment.
ソースコード内のコメントは全て英語でお願いします (DeepL や Nani 等の機械翻訳で構いません)
|
|
||
| export const TextStyleTab: React.FC = () => { | ||
| const { t } = useTranslation(); | ||
| const ts = 'editor_guide.textstyle'; |
apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.tsx
Show resolved
Hide resolved
apps/app/src/client/components/PageEditor/EditorGuideModal/EditorGuideModal.tsx
Show resolved
Hide resolved
|
現在の表示はこちらになります。 |
| color: '#ABB2BF', | ||
| verticalAlign: 'middle', | ||
| marginLeft: '4px', | ||
| }} |
There was a problem hiding this comment.
style をこんなに細かく書きたくないですね
特に色はテーマによって変わるものなので
| {t(`${i18nKey}.this`)} <strong>{t(`${i18nKey}.bold`)}</strong> {t(`${i18nKey}.is`)} | ||
| </div> | ||
| ), | ||
| }, |
There was a problem hiding this comment.
この構造のオブジェクトの type を定義して、ここの宣言部分と GuideRow の props と両方で同じものを使ってください
TEXT_STYLE_GUIDES に適当な型のオブジェクトが紛れ込まないように
3 participants
タスク: https://redmine.weseek.co.jp/issues/172821