mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Built generalised Icon component as superclass to IconButton
This commit is contained in:
parent
d866e0ca2d
commit
3a03591e00
|
@ -2,16 +2,19 @@
|
|||
font-family: 'SpaceMono';
|
||||
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SpaceMono';
|
||||
src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SpaceMono';
|
||||
src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SpaceMono';
|
||||
src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
|
||||
|
@ -20,11 +23,9 @@
|
|||
}
|
||||
|
||||
$session-font-family: 'SpaceMono';
|
||||
|
||||
$session-color-green: #00f782;
|
||||
$session-color-white: #fff;
|
||||
$session-color-black: #000;
|
||||
|
||||
$session-transition-duration: 0.25s;
|
||||
|
||||
$session-icon-size-sm: 15px;
|
||||
|
@ -44,7 +45,6 @@ $session-icon-size-lg: 30px;
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 500px;
|
||||
|
||||
@mixin transparent-background($textAndBorderColor) {
|
||||
background-color: Transparent;
|
||||
background-repeat: no-repeat;
|
||||
|
@ -53,54 +53,43 @@ $session-icon-size-lg: 30px;
|
|||
color: $textAndBorderColor;
|
||||
border: 2px solid $textAndBorderColor;
|
||||
}
|
||||
|
||||
&.full-green {
|
||||
background-color: $session-color-green;
|
||||
color: $session-color-white;
|
||||
}
|
||||
|
||||
&.green {
|
||||
@include transparent-background($session-color-green);
|
||||
}
|
||||
|
||||
&.white {
|
||||
@include transparent-background($session-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
.session-icon-button {
|
||||
fill: $session-color-white;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: opacity $session-transition-duration;
|
||||
|
||||
@mixin adjust-icon-size($size) {
|
||||
line-height: $size;
|
||||
height: $size;
|
||||
width: $size;
|
||||
|
||||
margin: $size / 3;
|
||||
|
||||
img {
|
||||
height: $size;
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
@include adjust-icon-size($session-icon-size-sm);
|
||||
}
|
||||
|
||||
&.medium {
|
||||
@include adjust-icon-size($session-icon-size-md);
|
||||
}
|
||||
|
||||
&.large {
|
||||
@include adjust-icon-size($session-icon-size-lg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@mixin set-icon-margin($size) {
|
||||
margin: $size / 3;
|
||||
}
|
||||
|
||||
&.small {
|
||||
@include set-icon-margin($session-icon-size-sm);
|
||||
}
|
||||
|
||||
&.medium {
|
||||
@include set-icon-margin($session-icon-size-sm);
|
||||
}
|
||||
|
||||
&.large {
|
||||
@include set-icon-margin($session-icon-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.session-icon {
|
||||
fill: $session-color-white;
|
||||
}
|
||||
|
|
241
ts/components/session/SessionIcon.tsx
Normal file
241
ts/components/session/SessionIcon.tsx
Normal file
File diff suppressed because one or more lines are too long
|
@ -1,63 +1,30 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { exists } from 'fs';
|
||||
|
||||
export enum SessionIconButtonTypes {
|
||||
'exit' = 'exit',
|
||||
'search' = 'search',
|
||||
'back' = 'back',
|
||||
'attachment' = 'attachment',
|
||||
'emoji' = 'emoji',
|
||||
'favorite' = 'favorite',
|
||||
'group' = 'group',
|
||||
'menu' = 'menu',
|
||||
'message' = 'message',
|
||||
'microphone' = 'microphone',
|
||||
'network' = 'network',
|
||||
'options' = 'options',
|
||||
'theme' = 'theme',
|
||||
}
|
||||
import { SessionIcon } from './SessionIcon';
|
||||
|
||||
export enum SessionIconButtonSizes {
|
||||
'small' = 'small',
|
||||
'medium' = 'medium',
|
||||
'large' = 'large',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
iconType: SessionIconButtonTypes;
|
||||
iconSize: SessionIconButtonSizes;
|
||||
onClick: any;
|
||||
}
|
||||
|
||||
export class SessionIconButton extends React.PureComponent<Props> {
|
||||
export class SessionIconButton extends SessionIcon {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { iconType, iconSize } = this.props;
|
||||
|
||||
const iconPath = `./images/session/icon-${iconType}.svg`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'session-icon-button',
|
||||
iconType === SessionIconButtonTypes.exit ? 'exit' : '',
|
||||
iconType === SessionIconButtonTypes.search ? 'search' : '',
|
||||
iconType === SessionIconButtonTypes.back ? 'back' : '',
|
||||
iconSize === SessionIconButtonSizes.small ? 'small' : '',
|
||||
iconSize === SessionIconButtonSizes.medium ? 'medium' : '',
|
||||
iconSize === SessionIconButtonSizes.large ? 'large' : ''
|
||||
)}
|
||||
className={classNames('session-icon-button', this.props.iconSize)}
|
||||
role="button"
|
||||
onClick={e => {
|
||||
this.clickHandler(e);
|
||||
}}
|
||||
>
|
||||
<img src={iconPath} alt="Icon Button" />
|
||||
<SessionIcon
|
||||
iconType={this.props.iconType}
|
||||
iconSize={this.props.iconSize}
|
||||
iconColor={this.props.iconSize}
|
||||
iconRotation={this.props.iconRotation}
|
||||
onClick={this.props.onClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue