Renamed channels to rooms (#30)

src/app/molecules/room-selector/RoomSelector.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomSelector.scss';
+
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+import { blurOnBubbling } from '../../atoms/button/script';
+
+function RoomSelectorWrapper({
+  isSelected, onClick, content, options,
+}) {
+  return (
+    <div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
+      <button
+        className="room-selector__content"
+        type="button"
+        onClick={onClick}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
+      >
+        {content}
+      </button>
+      <div className="room-selector__options">{options}</div>
+    </div>
+  );
+}
+RoomSelectorWrapper.defaultProps = {
+  options: null,
+};
+RoomSelectorWrapper.propTypes = {
+  isSelected: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  options: PropTypes.node,
+};
+
+function RoomSelector({
+  name, roomId, imageSrc, iconSrc,
+  isSelected, isUnread, notificationCount, isAlert,
+  options, onClick,
+}) {
+  return (
+    <RoomSelectorWrapper
+      isSelected={isSelected}
+      content={(
+        <>
+          <Avatar
+            text={name.slice(0, 1)}
+            bgColor={colorMXID(roomId)}
+            imageSrc={imageSrc}
+            iconSrc={iconSrc}
+            size="extra-small"
+          />
+          <Text variant="b1">{name}</Text>
+          { isUnread && (
+            <NotificationBadge
+              alert={isAlert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
+        </>
+      )}
+      options={options}
+      onClick={onClick}
+    />
+  );
+}
+RoomSelector.defaultProps = {
+  imageSrc: null,
+  iconSrc: null,
+  options: null,
+};
+RoomSelector.propTypes = {
+  name: PropTypes.string.isRequired,
+  roomId: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
+  notificationCount: PropTypes.number.isRequired,
+  isAlert: PropTypes.bool.isRequired,
+  options: PropTypes.node,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default RoomSelector;

src/app/molecules/room-selector/RoomSelector.scss

@@ -0,0 +1,88 @@
+.room-selector-flex {
+  display: flex;
+  align-items: center;
+}
+.room-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.room-selector {
+  @extend .room-selector-flex;
+
+  border: 1px solid transparent;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  
+  &--selected {
+    background-color: var(--bg-surface);
+    border-color: var(--bg-surface-border);
+
+    & .room-selector__options {
+      display: flex;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      & .room-selector__options {
+        display: flex;
+      }
+    }
+  }
+  &:focus {
+    outline: none;
+    background-color: var(--bg-surface-hover);
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
+  }
+}
+
+.room-selector__content {
+  @extend .room-selector-flexItem;
+  @extend .room-selector-flex;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__bordered {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .room-selector-flexItem;
+    margin: 0 var(--sp-extra-tight);
+
+    color: var(--tc-surface-normal);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+.room-selector__options {
+  @extend .room-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);
+
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-ultra-tight);
+  }
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn-surface {
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
+}