PLT-6828 - Removing urls for links (mattermost#53)

* PLT-6828 - Removing urls for links * Updating header sizes * Fixing some conflicts * Fixing minor issues with some links * Pushing more fixes * Updating dropdown items * Updating span and divs to buttons
sudheerDev · Oct 16, 2017 · 01bceb7 · 01bceb7
1 parent aca6c55
commit 01bceb7
Show file tree

Hide file tree

Showing 34 changed files with 282 additions and 247 deletions.
diff --git a/components/audit_table.jsx b/components/audit_table.jsx
@@ -237,18 +237,17 @@ function AuditTable(props) {
  sContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.sessionId}</td>;
  }
 
- const descStyle = {};
+ let descStyle = '';
  if (auditInfo.desc.toLowerCase().indexOf('fail') !== -1) {
- descStyle.color = 'red';
+ descStyle = ' color--error';
  }
 
  accessList[i] = (
  <tr key={audit.id}>
  <td className='whitespace--nowrap word-break--all'>{auditInfo.timestamp}</td>
  {uContent}
  <td
- className='word-break--all'
- style={descStyle}
+ className={'word-break--all' + descStyle}
  >
  {auditInfo.desc}
  </td>

diff --git a/components/channel_header/channel_header.jsx b/components/channel_header/channel_header.jsx
@@ -111,9 +111,7 @@ export default class ChannelHeader extends React.Component {
  }
  }
 
- toggleFavorite = (e) => {
- e.preventDefault();
-
+ toggleFavorite = () => {
  if (this.props.isFavorite) {
  this.props.actions.unfavoriteChannel(this.props.channel.id);
  } else {
@@ -303,8 +301,8 @@ export default class ChannelHeader extends React.Component {
 
  webrtc = (
  <div className='webrtc__header channel-header__icon'>
- <a
- href='#'
+ <button
+ className='style--none'
  onClick={() => this.initWebrtc(dmUserId, !isOffline)}
  disabled={isOffline}
  >
@@ -321,7 +319,7 @@ export default class ChannelHeader extends React.Component {
  <span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
  </div>
  </OverlayTrigger>
- </a>
+ </button>
  </div>
  );
  }
@@ -404,17 +402,17 @@ export default class ChannelHeader extends React.Component {
  key='add_members'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelAddMembersGroup'
  role='menuitem'
- href='#'
  onClick={this.openDirectMessageModal}
  >
  <FormattedMessage
  id='channel_header.addMembers'
  defaultMessage='Add Members'
  />
- </a>
+ </button>
  </li>
  );
  } else {
@@ -443,17 +441,17 @@ export default class ChannelHeader extends React.Component {
  key='manage_members'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelManageMembers'
  role='menuitem'
- href='#'
  onClick={() => this.setState({showMembersModal: true})}
  >
  <FormattedMessage
  id='channel_header.viewMembers'
  defaultMessage='View Members'
  />
- </a>
+ </button>
  </li>
  );
  }
@@ -515,17 +513,17 @@ export default class ChannelHeader extends React.Component {
  key='manage_members'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelManageMembers'
  role='menuitem'
- href='#'
  onClick={() => this.setState({showMembersModal: true})}
  >
  <FormattedMessage
  id='channel_header.manageMembers'
  defaultMessage='Manage Members'
  />
- </a>
+ </button>
  </li>
  );
  } else {
@@ -534,17 +532,17 @@ export default class ChannelHeader extends React.Component {
  key='view_members'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelViewMembers'
  role='menuitem'
- href='#'
  onClick={() => this.setState({showMembersModal: true})}
  >
  <FormattedMessage
  id='channel_header.viewMembers'
  defaultMessage='View Members'
  />
- </a>
+ </button>
  </li>
  );
  }
@@ -582,17 +580,17 @@ export default class ChannelHeader extends React.Component {
  key='set_channel_purpose'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelEditPurpose'
  role='menuitem'
- href='#'
  onClick={() => this.setState({showEditChannelPurposeModal: true})}
  >
  <FormattedMessage
  id='channel_header.setPurpose'
  defaultMessage='Edit Channel Purpose'
  />
- </a>
+ </button>
  </li>
  );
 
@@ -601,17 +599,17 @@ export default class ChannelHeader extends React.Component {
  key='rename_channel'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelRename'
  role='menuitem'
- href='#'
  onClick={this.showRenameChannelModal}
  >
  <FormattedMessage
  id='channel_header.rename'
  defaultMessage='Rename Channel'
  />
- </a>
+ </button>
  </li>
  );
  }
@@ -650,17 +648,17 @@ export default class ChannelHeader extends React.Component {
  key='leave_channel'
  role='presentation'
  >
- <a
+ <button
+ className='style--none'
  id='channelLeave'
  role='menuitem'
- href='#'
  onClick={this.handleLeave}
  >
  <FormattedMessage
  id='channel_header.leave'
  defaultMessage='Leave Channel'
  />
- </a>
+ </button>
  </li>
  );
  }
@@ -722,15 +720,15 @@ export default class ChannelHeader extends React.Component {
  let editMessage;
  if (ChannelUtils.showManagementOptions(channel, isChannelAdmin, isTeamAdmin, isSystemAdmin)) {
  editMessage = (
- <a
- href='#'
+ <button
+ className='style--none'
  onClick={() => this.setState({showEditChannelHeaderModal: true})}
  >
  <FormattedMessage
  id='channel_header.addChannelHeader'
  defaultMessage='Add a channel description'
  />
- </a>
+ </button>
  );
  }
  headerTextContainer = (
@@ -780,14 +778,13 @@ export default class ChannelHeader extends React.Component {
  placement='bottom'
  overlay={toggleFavoriteTooltip}
  >
- <a
+ <button
  id='toggleFavorite'
- href='#'
  onClick={this.toggleFavorite}
- className={'channel-header__favorites ' + (this.props.isFavorite ? 'active' : 'inactive')}
+ className={'style--none color--link channel-header__favorites ' + (this.props.isFavorite ? 'active' : 'inactive')}
  >
  <i className={'icon fa ' + (this.props.isFavorite ? 'fa-star' : 'fa-star-o')}/>
- </a>
+ </button>
  </OverlayTrigger>
  );
 
@@ -827,17 +824,16 @@ export default class ChannelHeader extends React.Component {
  <div className='channel-header__info'>
  {toggleFavorite}
  <div className='channel-header__title dropdown'>
- <a
+ <button
  id='channelHeaderDropdown'
- href='#'
- className='dropdown-toggle theme'
+ className='dropdown-toggle theme style--none'
  type='button'
  data-toggle='dropdown'
  aria-expanded='true'
  >
  <strong className='heading'>{channelTitle} </strong>
  <span className='fa fa-angle-down header-dropdown__icon'/>
- </a>
+ </button>
  <ul
  className='dropdown-menu'
  role='menu'
@@ -862,16 +858,16 @@ export default class ChannelHeader extends React.Component {
  placement='bottom'
  overlay={pinnedPostTooltip}
  >
- <div
- className={pinnedIconClass}
+ <button
+ className={'style--none ' + pinnedIconClass}
  onClick={this.getPinnedPosts}
  >
  <span
  className='icon icon__pin'
  dangerouslySetInnerHTML={{__html: pinIcon}}
  aria-hidden='true'
  />
- </div>
+ </button>
  </OverlayTrigger>
  </div>
  <div className='flex-child search-bar__container'>
@@ -887,16 +883,16 @@ export default class ChannelHeader extends React.Component {
  placement='bottom'
  overlay={recentMentionsTooltip}
  >
- <div
- className='channel-header__icon icon--hidden'
+ <button
+ className='channel-header__icon icon--hidden style--none'
  onClick={this.searchMentions}
  >
  <span
  className='icon icon__mentions'
  dangerouslySetInnerHTML={{__html: mentionsIcon}}
  aria-hidden='true'
  />
- </div>
+ </button>
  </OverlayTrigger>
  </div>
  <div className='flex-child'>
@@ -906,16 +902,16 @@ export default class ChannelHeader extends React.Component {
  placement='bottom'
  overlay={flaggedTooltip}
  >
- <div
- className='channel-header__icon icon--hidden'
+ <button
+ className='channel-header__icon icon--hidden style--none'
  onClick={this.getFlagged}
 
  >
  <span
  className='icon icon__flag'
  dangerouslySetInnerHTML={{__html: flagIcon}}
  />
- </div>
+ </button>
  </OverlayTrigger>
  </div>
  </div>

diff --git a/components/channel_members_dropdown/channel_members_dropdown.jsx b/components/channel_members_dropdown/channel_members_dropdown.jsx
@@ -190,17 +190,16 @@ export default class ChannelMembersDropdown extends React.Component {
  if ((makeChannelMember || makeChannelAdmin) && removeFromChannel) {
  return (
  <div className='dropdown member-drop'>
- <a
+ <button
  id='channelMemberDropdown'
- href='#'
- className='dropdown-toggle theme'
+ className='dropdown-toggle theme color--link style--none'
  type='button'
  data-toggle='dropdown'
  aria-expanded='true'
  >
  <span>{role} </span>
  <span className='fa fa-chevron-down'/>
- </a>
+ </button>
  <ul
  className='dropdown-menu member-menu'
  role='menu'

diff --git a/components/common/comment_icon.jsx b/components/common/comment_icon.jsx
@@ -29,18 +29,17 @@ export default function CommentIcon(props) {
  const id = Utils.createSafeId(props.idPrefix + '_' + props.id);
 
  return (
- <a
+ <button
  id={id}
- href='#'
- className={iconStyle + ' ' + selectorId}
+ className={iconStyle + ' color--link style--none ' + selectorId}
  onClick={props.handleCommentClick}
  >
  <span
  className='comment-icon'
  dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
  />
  {commentCountSpan}
- </a>
+ </button>
  );
 }
 

diff --git a/components/dot_menu/dot_menu.jsx b/components/dot_menu/dot_menu.jsx
@@ -213,10 +213,9 @@ export default class DotMenu extends Component {
  <div
  id={this.props.idPrefix + '_dropdown' + this.props.post.id}
  >
- <a
+ <button
  ref='dropdownToggle'
- href='#'
- className='dropdown-toggle post__dropdown theme'
+ className='dropdown-toggle post__dropdown color--link style--none'
  type='button'
  data-toggle='dropdown'
  aria-expanded='false'

diff --git a/components/dot_menu/dot_menu_edit.jsx b/components/dot_menu/dot_menu_edit.jsx
@@ -24,8 +24,8 @@ export default function DotMenuEdit(props) {
  key={props.idPrefix}
  role='presentation'
  >
- <a
- href='#'
+ <button
+ className='style--none'
  role='menuitem'
  data-toggle='modal'
  data-target='#edit_post'
@@ -40,7 +40,7 @@ export default function DotMenuEdit(props) {
  id='post_info.edit'
  defaultMessage='Edit'
  />
- </a>
+ </button>
  </li>
  );
 }