Merge pull request #205 from tsukuba-cojt/feature/203-involve-border-…

…radius

コンテンツが存在しないときのUIを改善

src/components/tabitems/block/BlockCustomizer.tsx

@@ -8,6 +8,8 @@ import { PropsContext } from '../../../contexts/PropsContext';
 import { setFormatsAndPushToAry } from '../../../features/formatter';
 import { getCssSelector } from '../../../utils/CSSUtils';
 import InteractiveStyler from './styler/InteractiveStyler';
+import NoItem from '../common/NoItem';
+import { IconClick } from '@tabler/icons-react';
 
 const Wrapper = styled.div``;
 
@@ -68,7 +70,11 @@ const BlockCustomizer = () => {
             ))}
         </>
       )}
-      {!elementSelection.selectedElement && <p>要素を選択してください</p>}
+      {!elementSelection.selectedElement &&
+        <NoItem icon={<IconClick size={96} color={'#999999'} />} offset={140} text={"要素を選択してください"}>
+          <p>ヒント：編集したい要素の上でマウスをクリックすることで要素を選択できます。</p>
+        </NoItem>
+      }
     </Wrapper>
   );
 };

src/components/tabitems/common/NoItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div<{offset: number}>`
+  height: ${(props) => `calc(100vh - ${props.offset}px)`};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666666;
+  padding: 16px;
+`;
+
+const DescriptionWrapper = styled.div`
+  text-align: center;
+  padding: 32px 0 16px;
+  color: #666666;
+  word-break: auto-phrase;
+`;
+
+type Props = {
+  icon: React.ReactNode;
+  text: string;
+  children?: React.ReactNode;
+  offset?: number;
+}
+export default function NoItem({icon, text, children, offset = 190}: Props) {
+  return (
+    <Wrapper offset={offset}>
+      {icon}
+      <DescriptionWrapper>
+        <p>{text}</p>
+      </DescriptionWrapper>
+      {children}
+    </Wrapper>
+  )
+}

src/components/tabitems/font/FontCustomizer.tsx

@@ -21,9 +21,10 @@ import IconButton from '../../controls/IconButton';
 import InputNumberWithUnit from '../../controls/InputNumberWithUnit';
 import ColorPicker from '../../controls/ColorPicker';
 import {
+  IconClick,
   IconLetterSpacing,
   IconSpace,
-  IconTypography,
+  IconTypography
 } from '@tabler/icons-react';
 import Section from '../common/Section';
 import SubTitle from '../common/SubTitle';
@@ -38,6 +39,7 @@ import { defaultFontFamilies } from '../../../consts/cssValues';
 import { getCssSelector, kebabToCamel } from '../../../utils/CSSUtils';
 import { setFormatsAndPushToAry } from '../../../features/formatter';
 import { PropsContext } from '../../../contexts/PropsContext';
+import NoItem from '../common/NoItem';
 
 const Wrapper = styled.div``;
 
@@ -433,7 +435,11 @@ const FontCustomizer = () => {
           </Section>
         </>
       )}
-      {!elementSelection.selectedElement && <p>要素を選択してください</p>}
+      {!elementSelection.selectedElement &&
+        <NoItem icon={<IconClick size={96} color={'#999999'} />} offset={140} text={"要素を選択してください"}>
+          <p>ヒント：編集したい要素の上でマウスをクリックすることで要素を選択できます。</p>
+        </NoItem>
+      }
     </Wrapper>
   );
 };

src/components/tabitems/template/ImportedStylesList.tsx

@@ -9,13 +9,11 @@ import {
 import t from '../../../features/translator';
 import { Button, Card, Popconfirm } from 'antd';
 import { PropsContext } from '../../../contexts/PropsContext';
+import { IconShoppingBagX } from '@tabler/icons-react';
+import NoItem from '../common/NoItem';
 
 const Wrapper = styled.div``;
 
-const DescriptionWrapper = styled.div`
-  padding-bottom: 12px;
-`;
-
 const Author = styled.p`
   padding-bottom: 8px;
 `;
@@ -106,10 +104,6 @@ const ImportedStylesList = () => {
   const [styles, setStyles] = useState<ImportedFormatAbstract[]>([]);
   const props = useContext(PropsContext);
 
-  const onOpenStoreClick = () => {
-    window.open('https://resta-frontend.pages.dev/style/', '_blank');
-  };
-
   const updateTree = async () => {
     const styles = getImportedFormats(props);
     setStyles(styles);
@@ -123,14 +117,11 @@ const ImportedStylesList = () => {
     <Wrapper>
       {styles.length !== 0 && <Cards styles={styles} updateFunc={updateTree} />}
       {styles.length === 0 && (
-        <>
-          <DescriptionWrapper>
-            <p>{t('no_imported_styles')}</p>
-          </DescriptionWrapper>
-          <Button type="primary" onClick={onOpenStoreClick} block>
-            {t('open_resta_store')}
+        <NoItem icon={<IconShoppingBagX size={96} color={'#999999'} />} text={t('no_imported_styles')}>
+          <Button type="link" onClick={() => window.open('https://resta-frontend.pages.dev/style/', '_blank')} block>
+            <span style={{color: '#00b7ee'}}>{t('open_resta_store')}</span>
           </Button>
-        </>
+        </NoItem>
       )}
     </Wrapper>
   );

src/components/tabitems/template/TemplateList.tsx

@@ -4,6 +4,10 @@ import { Template } from '../../../types/Template';
 import TemplateCard from './TemplateCard';
 import { ElementSelectionContext } from '../../../contexts/ElementSelectionContext';
 import { PropsContext } from '../../../contexts/PropsContext';
+import NoItem from '../common/NoItem';
+import { IconPuzzleOff } from '@tabler/icons-react';
+import t from '../../../features/translator';
+import { Button } from 'antd';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -94,7 +98,13 @@ const TemplateList = ({ templates }: TemplateListProps) => {
           </CardsWrapper>
         </Wrapper>
       )}
-      {length === 0 && <p>この要素に適用できるテンプレートはありません</p>}
+      {length === 0 &&
+        <NoItem icon={<IconPuzzleOff size={96} color={'#999999'} />} text={'この要素に適用できるテンプレートはありません'}>
+          <Button type="link" onClick={() => window.open('https://resta-frontend.pages.dev/style/', '_blank')} block>
+            <span style={{color: '#00b7ee'}}>{t('open_resta_store')}</span>
+          </Button>
+        </NoItem>
+      }
     </>
   );
 };