PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Unify composer and room header icons

Browse source
This commit is contained in:
Jorik Schellekens 2020-07-28 13:19:11 +01:00
parent b71e5f30db
commit 9cd232617d
11 changed files with 39 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_RightPanel.scss
View file

@ -65,7 +65,7 @@ limitations under the License.
left: 4px; // center with parent of 32px left: 4px; // center with parent of 32px
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: $rightpanel-button-color; background-color: $icon-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
@ -100,7 +100,7 @@ limitations under the License.
background: rgba($accent-color, 0.25); background: rgba($accent-color, 0.25);
// make the icon the accent color too // make the icon the accent color too
&::before { &::before {
background-color: $accent-color; background-color: $accent-color !important;
} }
} }

22
res/css/views/rooms/_MessageComposer.scss
View file

@ -21,6 +21,7 @@ limitations under the License.
border-top: 1px solid $primary-hairline-color; border-top: 1px solid $primary-hairline-color;
position: relative; position: relative;
padding-left: 82px; padding-left: 82px;
padding-right: 6px;
} }
.mx_MessageComposer_replaced_wrapper { .mx_MessageComposer_replaced_wrapper {
@ -180,23 +181,34 @@ limitations under the License.
.mx_MessageComposer_button { .mx_MessageComposer_button {
position: relative; position: relative;
margin-right: 12px; margin-right: 6px;
cursor: pointer; cursor: pointer;
height: 20px; height: 26px;
width: 20px; width: 26px;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 3px;
left: 3px;
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: $composer-button-color; background-color: $icon-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
} }
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
&.mx_MessageComposer_hangup::before { &.mx_MessageComposer_hangup::before {
background-color: $warning-color; background-color: $warning-color;
} }
@ -288,7 +300,7 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $composer-button-color; background-color: $icon-button-color;
&.mx_MessageComposer_markdownDisabled { &.mx_MessageComposer_markdownDisabled {
opacity: 0.2; opacity: 0.2;

2
res/css/views/rooms/_RoomHeader.scss
View file

@ -222,7 +222,7 @@ limitations under the License.
left: 4px; // center with parent of 32px left: 4px; // center with parent of 32px
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: $roomheader-button-color; background-color: $icon-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }

3
res/themes/dark/css/_dark.scss
View file

@ -96,10 +96,9 @@ $roomheader-bg-color: $bg-color;
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$roomheader-addroom-fg-color: $text-primary-color; $roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color; $icon-button-color: #8E99A4;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

3
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -95,10 +95,9 @@ $roomheader-color: $text-primary-color;
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity $roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
$roomheader-addroom-fg-color: $text-primary-color; $roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color; $icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

3
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -162,10 +162,9 @@ $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color; $roomheader-addroom-fg-color: $accent-fg-color;
$tagpanel-button-color: #91a1c0; $tagpanel-button-color: #91a1c0;
$roomheader-button-color: #91a1c0;
$groupheader-button-color: #91a1c0; $groupheader-button-color: #91a1c0;
$rightpanel-button-color: #91a1c0; $rightpanel-button-color: #91a1c0;
$composer-button-color: #91a1c0; $icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

3
res/themes/light/css/_light.scss
View file

@ -162,10 +162,9 @@ $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
$roomheader-addroom-fg-color: #5c6470; $roomheader-addroom-fg-color: #5c6470;
$tagpanel-button-color: #91A1C0; $tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0; $rightpanel-button-color: #91A1C0;
$composer-button-color: #91A1C0; $icon-button-color: #C1C6CD;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

1
src/accessibility/context_menu/ContextMenuTooltipButton.tsx
View file

@ -25,6 +25,7 @@ interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton> {
isExpanded: boolean; isExpanded: boolean;
} }
// TODO: replace this the header buttons and the right panel buttons with a single representation
// Semantic component for representing the AccessibleButton which launches a <ContextMenu /> // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
export const ContextMenuTooltipButton: React.FC<IProps> = ({ export const ContextMenuTooltipButton: React.FC<IProps> = ({
isExpanded, isExpanded,

2
src/components/views/right_panel/HeaderButton.js
View file

@ -24,6 +24,8 @@ import classNames from 'classnames';
import Analytics from '../../../Analytics'; import Analytics from '../../../Analytics';
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
// TODO: replace this, the composer buttons and the right panel buttons with a unified
// representation
export default class HeaderButton extends React.Component { export default class HeaderButton extends React.Component {
constructor() { constructor() {
super(); super();

12
src/components/views/rooms/MessageComposer.js
View file

@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, {createRef} from 'react'; import React, {createRef} from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import CallHandler from '../../../CallHandler'; import CallHandler from '../../../CallHandler';
@ -29,7 +30,6 @@ import E2EIcon from './E2EIcon';
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu"; import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
function ComposerAvatar(props) { function ComposerAvatar(props) {
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
return <div className="mx_MessageComposer_avatar"> return <div className="mx_MessageComposer_avatar">
@ -117,9 +117,17 @@ const EmojiButton = ({addEmoji}) => {
</ContextMenu>; </ContextMenu>;
} }
const className = classNames(
"mx_MessageComposer_button",
"mx_MessageComposer_emoji",
{
"mx_RightPanel_headerButton_highlight": menuDisplayed,
},
);
return <React.Fragment> return <React.Fragment>
<ContextMenuTooltipButton <ContextMenuTooltipButton
className="mx_MessageComposer_button mx_MessageComposer_emoji" className={className}
onClick={openMenu} onClick={openMenu}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}
title={_t('Emoji picker')} title={_t('Emoji picker')}

3
src/components/views/rooms/Stickerpicker.js
View file

@ -385,8 +385,9 @@ export default class Stickerpicker extends React.Component {
<AccessibleButton <AccessibleButton
id='stickersButton' id='stickersButton'
key="controls_hide_stickers" key="controls_hide_stickers"
className="mx_MessageComposer_button mx_MessageComposer_stickers mx_Stickers_hideStickers" className="mx_MessageComposer_button mx_MessageComposer_stickers mx_Stickers_hideStickers mx_RightPanel_headerButton_highlight "
onClick={this._onHideStickersClick} onClick={this._onHideStickersClick}
active={this.state.showStickers}
title={_t("Hide Stickers")} title={_t("Hide Stickers")}
> >
</AccessibleButton>; </AccessibleButton>;