fix: Image letter change error (#539)

* fix: Table actions column style
openpitrix · Nov 9, 2018 · e6930a6 · e6930a6
1 parent d5ef194
commit e6930a6
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 31 deletions.
diff --git a/src/components/Base/Image/index.jsx b/src/components/Base/Image/index.jsx
@@ -50,7 +50,7 @@ export default class Image extends React.Component {
         width: iconSize + 'px',
         height: iconSize + 'px'
       };
-      const letter = iconLetter[0].toLocaleUpperCase();
+      const letter = iconLetter.substr(0, 1).toLocaleUpperCase();
 
       if (letter) {
         style.fontSize = iconSize / 2 + 'px';

diff --git a/src/components/Base/Table/index.scss b/src/components/Base/Table/index.scss
@@ -90,9 +90,10 @@
       letter-spacing: 0;
       background-color: $N10;
 
-      &:last-child{
+      &.actions {
         text-align: center;
       }
+
       &::before {
         content: "";
         position: absolute;
@@ -155,9 +156,6 @@
 
       &:last-child {
         //border-right: 48px solid #fff;
-        [class*='TimeShow'] {
-          text-align: center;
-        }
       }
 
     }

diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
@@ -25,7 +25,6 @@ class Card extends PureComponent {
   render() {
     const { icon, name, desc, fold } = this.props;
     const iconSize = fold ? 36 : 48;
-    const noneIcon = '/none.svg';
 
     return (
       <div
@@ -34,7 +33,7 @@ class Card extends PureComponent {
       >
         <div className={styles.title}>
           <span className={styles.icon}>
-            <Image src={icon || noneIcon} alt="Icon" iconSize={iconSize} />
+            <Image src={icon} alt="Icon" iconSize={iconSize} iconLetter={name} />
           </span>
           <p className={styles.name}>{name}</p>
           <p className={classnames(styles.desc, { [styles.hide]: !fold })} title={desc}>

diff --git a/src/components/Layout/TitleBanner.jsx b/src/components/Layout/TitleBanner.jsx
@@ -63,7 +63,7 @@ class TitleBanner extends Component {
         <div className={styles.wrapper}>
           {hasImage && (
             <span className={styles.image}>
-              <Image src={detail.icon} iconSize={48} />
+              <Image src={detail.icon} iconSize={48} iconLetter={detail.name} />
             </span>
           )}
           {type === 'runtimeDetail' && (

diff --git a/src/pages/AppDetail/Meta/index.jsx b/src/pages/AppDetail/Meta/index.jsx
@@ -7,12 +7,10 @@ import { get } from 'lodash';
 import styles from './index.scss';
 
 const Meta = ({ app }) => {
-  const iconSrc = '/none.svg';
-
   return (
     <div className={styles.meta}>
       <span className={styles.icon}>
-        <Image src={app.icon || iconSrc} iconSize={48} />
+        <Image src={app.icon} iconSize={48} iconLetter={app.name} />
       </span>
       <div className={styles.title}>
         {app.name}

diff --git a/src/pages/Dashboard/Apps/Deploy/index.jsx b/src/pages/Dashboard/Apps/Deploy/index.jsx
@@ -179,7 +179,7 @@ export default class AppDeploy extends Component {
     return (
       <div className={styles.aside}>
         <div className={styles.appIntro}>
-          <Image src={appDetail.icon} className={styles.icon} />
+          <Image src={appDetail.icon} className={styles.icon} iconLetter={appDetail.name} />
           <span className={styles.name}>{appDetail.name}</span>
         </div>
         <p>{t('Deploy App explain')}</p>

diff --git a/src/pages/Dashboard/Apps/Detail/DetailBlock/index.jsx b/src/pages/Dashboard/Apps/Detail/DetailBlock/index.jsx
@@ -29,7 +29,7 @@ export default class DetailBlock extends React.Component {
       <div className={styles.detailBlock}>
         <div className={styles.titleOuter}>
           <span className={styles.icon}>
-            <Image src={appDetail.icon} alt="Icon" iconSize={32} />
+            <Image src={appDetail.icon} alt="Icon" iconSize={32} iconLetter={appDetail.name} />
           </span>
           <div className={styles.title}>
             <div className={styles.name}>{appDetail.name}</div>

diff --git a/src/pages/Dashboard/Apps/index.jsx b/src/pages/Dashboard/Apps/index.jsx
@@ -285,12 +285,11 @@ export default class Apps extends Component {
         title: t('Actions'),
         key: 'actions',
         width: '84px',
+        className: 'actions',
         render: item => (
-          <div className={styles.actions}>
-            <Popover content={this.renderHandleMenu(item)} className="actions">
-              <Icon name="more" />
-            </Popover>
-          </div>
+          <Popover content={this.renderHandleMenu(item)} className="actions">
+            <Icon name="more" />
+          </Popover>
         )
       }
     ];

diff --git a/src/pages/Dashboard/Clusters/index.jsx b/src/pages/Dashboard/Clusters/index.jsx
@@ -275,12 +275,11 @@ export default class Clusters extends Component {
         title: t('Actions'),
         key: 'actions',
         width: '84px',
-        render: (text, cl) => (
-          <div className={styles.actions}>
-            <Popover content={this.renderHandleMenu(cl)} className="actions">
-              <Icon name="more" />
-            </Popover>
-          </div>
+        className: 'actions',
+        render: cl => (
+          <Popover content={this.renderHandleMenu(cl)} className="actions">
+            <Icon name="more" />
+          </Popover>
         )
       }
     ];

diff --git a/src/pages/Dashboard/Repos/Detail/tabs/runtime-columns.js b/src/pages/Dashboard/Repos/Detail/tabs/runtime-columns.js
@@ -18,6 +18,7 @@ export default function(clusters, users) {
           name={item.name}
           description={item.runtime_id}
           linkUrl={`/dashboard/runtime/${item.runtime_id}`}
+          noIcon
         />
       )
     },

diff --git a/src/pages/Dashboard/Runtimes/index.jsx b/src/pages/Dashboard/Runtimes/index.jsx
@@ -189,12 +189,11 @@ export default class Runtimes extends Component {
         title: t('Actions'),
         key: 'actions',
         width: '84px',
-        render: (text, item) => (
-          <div className={styles.actions}>
-            <Popover content={this.renderHandleMenu(item)} className="actions">
-              <Icon name="more" />
-            </Popover>
-          </div>
+        className: 'actions',
+        render: runtime => (
+          <Popover content={this.renderHandleMenu(runtime)} className="actions">
+            <Icon name="more" />
+          </Popover>
         )
       }
     ];

diff --git a/src/pages/Dashboard/Users/index.jsx b/src/pages/Dashboard/Users/index.jsx
@@ -269,6 +269,7 @@ export default class Users extends Component {
         title: t('Actions'),
         key: 'actions',
         width: '84px',
+        className: 'actions',
         render: item => (
           <Popover content={this.renderHandleMenu(item)} className="actions">
             <Icon name="more" />

diff --git a/src/pages/Purchased/index.jsx b/src/pages/Purchased/index.jsx
@@ -181,7 +181,7 @@ export default class Purchased extends Component {
             onClick={() => this.selectClusters(app.app_id)}
           >
             <span className={styles.image}>
-              <Image src={app.icon} iconSize={36} />
+              <Image src={app.icon} iconSize={36} iconLetter={app.name} />
             </span>
             <div className={styles.word}>
               <div className={styles.name}>{app.name}</div>
@@ -269,6 +269,7 @@ export default class Purchased extends Component {
         title: t('Actions'),
         key: 'actions',
         width: '84px',
+        className: 'actions',
         render: item => (
           <Popover content={this.renderHandleMenu(item)} className="actions">
             <Icon name="more" />

diff --git a/src/utils/columns/runtime-columns.js b/src/utils/columns/runtime-columns.js
@@ -17,6 +17,7 @@ export default clusters => {
           name={item.name}
           description={item.runtime_id}
           linkUrl={`/dashboard/runtime/${item.runtime_id}`}
+          noIcon
         />
       )
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ export default function(clusters, users) { @@
               name={item.name}
               description={item.runtime_id}
               linkUrl={`/dashboard/runtime/${item.runtime_id}`}
+              noIcon
             />
           )
         },
@@ Expand Down @@