Merge branch 'master' into docs-metadata

2026-07-10 23:25:18 +08:00 · 2017-07-13 11:47:40 -04:00
parent d05a63bc2e 244a276e1a
commit b32aebd6f1
21 changed files with 69 additions and 30 deletions
@@ -157,3 +157,8 @@
 .enter {
  animation: enter 1000ms;
 }
+
+.timerIcon {
+  vertical-align: middle;
+  font-size: 14px;
+}
@@ -145,7 +145,7 @@ export class EditableCommentContent extends React.Component {
                      }
                    </span>
                  : <span>
-                      <Icon name="timer"/> {t('edit_comment.edit_window_timer_prefix')}
+                      <Icon name="timer" className={styles.timerIcon}/> {t('edit_comment.edit_window_timer_prefix')}
                      <CountdownSeconds
                        until={this.getEditableUntil()}
                        classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }
@@ -22,5 +22,8 @@
 }

 .tabContainer {
+  position: relative;
  margin-top: 28px;
+  padding-bottom: 50px;
+  min-height: 600px;
 }
@@ -21,18 +21,6 @@ body {
  padding: 4px;
 }

-.talk-stream-tab-container {
-  padding-bottom: 50px;
-  min-height: 600px;
-}
-
-.talk-stream-tab-container .material-icons {
-  vertical-align: middle;
-  width: 1em;
-  font-size: 1em;
-  overflow: hidden;
-}
-
 .expandForSignin {
  min-height: 600px;
 }
@@ -283,11 +271,6 @@ body {
  float: left;
 }

-.comment__action-container .material-icons {
-  font-size: 12px;
-  margin-left: 3px;
-}
-
 button.comment__action-button,
 .comment__action-button button {
  cursor: pointer;
@@ -2,3 +2,13 @@
  composes: buttonReset from "coral-framework/styles/reset.css";
  margin: 5px 10px 5px 0px;
 }
+
+.tagIcon {
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 12px;
+  vertical-align: middle;
+}
@@ -18,7 +18,7 @@ const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].

 // Put this on a comment to show that it is best

-export const BestIndicator = ({children = <Icon name='star'/>}) => (
+export const BestIndicator = ({children = <Icon name='star' className={styles.tagIcon} />}) => (
  <span aria-label={t('comment_is_best')}>
    { children }
  </span>
@@ -98,7 +98,7 @@ export class BestButton extends Component {
              disabled={disabled}
              className={cn(styles.button, `${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
              aria-label={t(isBest ? 'unset_best' : 'set_best')}>
-        <Icon name={ isBest ? 'star' : 'star_border' } />
+        <Icon name={ isBest ? 'star' : 'star_border' } className={styles.icon} />
      </button>
    );
  }
@@ -155,7 +155,7 @@ export default class FlagButton extends Component {
              : <span className={`${name}-button-text`}>{t('report')}</span>
            }
            <i className={
-              cn(`${name}-icon`, 'material-icons', {
+              cn(`${name}-icon`, 'material-icons', styles.icon, {
                flaggedIcon: flagged,
                [styles.flaggedIcon]: flagged,
              })}
@@ -6,3 +6,9 @@
 .flaggedIcon {
  color: #f00
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}
@@ -75,3 +75,8 @@
  margin: inherit;
  color: inherit;
 }
+
+.iconView, .iconDate {
+  vertical-align: middle;
+  padding-bottom: 1px;
+}
@@ -30,11 +30,11 @@ const Comment = (props) => {
        <ul>
          <li>
            <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
-              <Icon name="open_in_new" />{t('view_conversation')}
+              <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
            </a>
          </li>
          <li>
-            <Icon name="schedule" />
+            <Icon name="schedule" className={styles.iconDate}/>
            <PubDate
              className={styles.pubdate}
              created_at={props.comment.created_at}
@@ -8,3 +8,9 @@
    display: none;
  }
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}
@@ -15,7 +15,7 @@ const ReplyButton = ({onClick}) => {
      <span className={cn(`${name}-label`, styles.label)}>
        {t('reply')}
      </span>
-      <i className={`${name}-icon material-icons`}
+      <i className={cn(`${name}-icon`, 'material-icons', styles.icon)}
        aria-hidden={true}>reply</i>
    </button>
  );
@@ -0,0 +1,3 @@
+
+.root {
+}
@@ -1,8 +1,10 @@
 import React, {PropTypes} from 'react';
 import {Icon as IconMDL}  from 'react-mdl';
+import cn from 'classnames';
+import styles from './Icon.css';

 const Icon = ({className = '', name}) => (
-  <IconMDL className={className} name={name} />
+  <IconMDL className={cn(styles.root, className)} name={name} />
 );

 Icon.propTypes = {
@@ -25,7 +25,9 @@
 }

 .icon {
-  padding: 0 2px;
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
 }

@media (max-width: 425px) {
@@ -25,7 +25,9 @@
 }

 .icon {
-  padding: 0 2px;
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
 }

@media (max-width: 425px) {
@@ -26,7 +26,8 @@
 }

 .icon {
-  padding: 0 2px;
+  font-size: 12px;
+  padding: 0 3px;
 }

@media (max-width: 425px) {
@@ -24,3 +24,8 @@
  list-style: none;
  white-space: nowrap;
 }
+
+.icon {
+  font-size: 14px;
+  vertical-align: middle;
+}
@@ -24,7 +24,7 @@ const ViewingOptions = (props) => {
      <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
        <div>
          <button className={styles.button} onClick={toggleOpen}>Viewing Options
-            {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
+            {props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
          </button>
        </div>
        {
@@ -72,7 +72,7 @@ export default class PermalinkButton extends React.Component {
            onClick={this.toggle}
            className={cn(`${name}-button`, styles.button)}>
              {t('permalink')}
-            <Icon name="link" />
+            <Icon name="link" className={styles.icon}/>
          </button>

          <div
@@ -82,3 +82,9 @@
 .active {
  display: block;
 }
+
+.icon {
+  padding: 0 2px;
+  font-size: 12px;
+  vertical-align: middle;
+}