keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Added session button types and session button colors

Browse Source
pull/689/head
Vincent 5 years ago
parent 84220f7014
commit 0c4f57e57d
7 changed files with 212 additions and 84 deletions
Show Stats Download Patch File Download Diff File

BIN
fonts/Wasa-Bold.otf
View File

Binary file not shown.

10
js/models/conversations.js
Unescape Escape View File

@ -240,7 +240,10 @@
opacity: '0.3',
});
$('.message-selection-overlay').show();
$('.message-selection-overlay').css({
display: 'block',
'z-index': '1',
});
$('.module-conversation-header').css({
opacity: '0.15',
'pointer-events': 'none',
@ -259,7 +262,10 @@
opacity: '1',
});
$('.message-selection-overlay').hide();
$('.message-selection-overlay').css({
display: 'none',
'z-index': '0',
});
$('.module-conversation-header').css({
opacity: '1',
'pointer-events': 'auto',

0
js/session_ui_manager.js
Unescape Escape View File

174
stylesheets/_session.scss
Unescape Escape View File

@ -22,28 +22,51 @@
font-style: italic;
}
@font-face {
font-family: 'Wasa';
src: url('../fonts/Wasa-Bold.otf') format('truetype');
}
// Session Colors
$session-color-green: #00f782;
$session-color-green-alt-1: #00f17e;
$session-color-green-alt-2: #007e42;
$session-color-green-alt-1: #00f480;
$session-color-green-alt-2: #00fd73;
$session-color-green-alt-3: #00f782;
$session-shade-1: #0c0c0c;
$session-shade-2: #161616;
$session-shade-3: #191818;
$session-shade-4: #1b1b1b;
$session-shade-5: #222325;
$session-shade-6: #232323;
$session-shade-7: #2e2e2e;
$session-shade-8: #2f2f2f;
$session-shade-9: #313131;
$session-shade-10: #3e3e3e;
$session-shade-11: #3f3f3f;
$session-shade-12: #3f4146;
$session-shade-13: #474646;
$session-shade-14: #535865;
$session-shade-15: #5b6c72;
$session-shade-16: #979797;
$session-shade-17: #d8d8d8;
$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
$session-opaque-dark-2: rgba(0, 0, 0, 0.37);
$session-opaque-dark-3: rgba(0, 0, 0, 0.5);
$session-color-white: #fff;
$session-color-black: #000;
$session-color-dark-1: #1b1b1b;
$session-color-dark-2: #151515;
$session-color-dark-3: #404146;
$session-color-dark-4: #5c5d5f;
$session-color-dark-5: #a5a6a8;
$session-color-secondary: #474646;
$session-color-danger: #ff4538;
$session-color-primary: $session-shade-13;
$session-color-secondary: $session-shade-16;
$session-color-warning: $session-shade-17;
$session-color-white-subtle: rgba($session-color-white, 0.6);
$session-color-dark-highlight: #212126;
@mixin session-color-subtle($color) {
color: rgba($color, 0.6);
}
$session-font-family: 'SpaceMono';
$session-font-family: 'Wasa';
$session-transition-duration: 0.25s;
$session-icon-size-sm: 15px;
@ -52,27 +75,27 @@ $session-icon-size-lg: 30px;
$session-conversation-header-height: 60px;
$session-green-gradient: linear-gradient(
$session-gradient-green: linear-gradient(
270deg,
rgba($session-color-green-alt-1, 1),
rgba($session-color-green-alt-1, 0.6)
);
$session-gradient-black: linear-gradient(
90deg,
rgba($session-shade-3, 1),
rgba($session-shade-4, 0.6)
);
$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
$session_message-container-border-radius: 5px;
.button-group > div {
margin-left: 5px;
margin-right: 5px;
}
.session-button {
min-width: 165px;
width: auto;
height: 45px;
line-height: 45px;
padding: 0 35px 0 35px;
font-size: 15px;
font-family: $session-font-family;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
border-radius: 500px;
@mixin transparent-background($textAndBorderColor) {
background-color: Transparent;
background-repeat: no-repeat;
@ -81,27 +104,86 @@ $session_message-container-border-radius: 5px;
color: $textAndBorderColor;
border: 2px solid $textAndBorderColor;
}
&.full-green {
background-color: $session-color-green;
width: auto;
display: flex;
justify-content: center;
font-weight: 700;
user-select: none;
cursor: pointer;
&.default,
&.square,
&.brand {
color: $session-color-white;
&.green {
background-color: $session-color-green;
}
&.white {
background-color: $session-color-white;
}
&.primary {
background-color: $session-color-primary;
}
&.secondary {
background-color: $session-color-secondary;
}
&.danger {
background-color: $session-color-danger;
}
&.warning {
background-color: $session-color-warning;
}
}
&.green {
@include transparent-background($session-color-green);
&.brand-outline,
&.default-outline,
&.square-outline {
&.green {
@include transparent-background($session-color-green);
}
&.white {
@include transparent-background($session-color-white);
}
&.primary {
@include transparent-background($session-color-primary);
}
&.secondary {
@include transparent-background($session-color-secondary);
}
&.danger {
@include transparent-background($session-color-danger);
}
&.warning {
@include transparent-background($session-color-warning);
}
}
&.white {
@include transparent-background($session-color-white);
&.brand {
min-width: 165px;
height: 45px;
line-height: 45px;
padding: 0 35px 0 35px;
font-size: 15px;
font-family: $session-font-family;
border-radius: 500px;
}
@mixin square-button($background-color) {
&.default,
&.square,
&.default-outline,
&.square-outline {
border-radius: 2px;
height: 33px;
background-color: $background-color;
}
&.secondary {
@include square-button($session-color-secondary);
padding: 0px 18px;
line-height: 33px;
font-size: 13px;
}
&.danger {
@include square-button($session-color-danger);
&.square,
&.square-outline {
border-radius: 0px;
}
}
@ -178,6 +260,15 @@ $session_message-container-border-radius: 5px;
border-radius: $session_message-container-border-radius;
}
.module-message__attachment-container,
.module-image--curved-bottom-right,
.module-image--curved-bottom-left {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $session_message-container-border-radius;
border-bottom-right-radius: $session_message-container-border-radius;
}
.conversation-header .session-icon-button {
@include standard-icon-button();
}
@ -195,7 +286,8 @@ $session_message-container-border-radius: 5px;
.close-button {
float: left;
margin-top: 10px;
margin-top: 17px;
margin-left: 7px;
}
}
.message-selection-overlay div[role='button'] {

39
stylesheets/_session_theme_dark.scss
Unescape Escape View File

@ -1,36 +1,29 @@
// Messages
.dark-theme {
.module-conversation-header {
background-color: $session-color-dark-1;
background-color: $session-shade-4;
}
.discussion-container {
background-color: $session-color-dark-2;
background-image: $session-gradient-black;
}
.module-conversation-header {
border-bottom: none;
}
.module-message__author {
color: $session-color-dark-5;
}
.module-message__metadata__badge {
color: $session-color-dark-4;
}
.module-message__metadata__date--incoming {
color: $session-color-dark-4;
}
.module-message__author,
.module-message__metadata__badge,
.module-message__metadata__date--incoming,
.module-message__metadata__date--outgoing {
color: $session-color-dark-5;
@include session-color-subtle($session-color-white);
}
.module-message__container--incoming {
background-color: $session-color-dark-1;
background-color: $session-shade-11;
}
.module-message__container--outgoing {
background-color: $session-color-dark-3;
background-color: $session-shade-5;
}
.module-message__container {
@ -38,29 +31,19 @@
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69);
}
.message-highlighted {
background-color: $session-color-dark-highlight;
background-color: $session-shade-5;
border-radius: 0;
}
.message-selected {
.module-message__container {
background-image: $session-green-gradient;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
background-image: $session-gradient-green;
box-shadow: $session-dark-shadow;
}
.module-message__author {
color: $session-color-white;
}
.module-message__metadata__badge {
color: $session-color-white;
}
.module-message__metadata__date--incoming {
color: $session-color-white-subtle;
}
.module-message__metadata__date--outgoing {
color: $session-color-white-subtle;
}
}
}

18
ts/components/conversation/ConversationHeader.tsx
Unescape Escape View File

@ -16,7 +16,11 @@ import {
SessionIconType,
} from '../session/icon';
import { SessionButton, SessionButtonTypes } from '../session/SessionButton';
import {
SessionButton,
SessionButtonColor,
SessionButtonType,
} from '../session/SessionButton';
interface TimerOption {
name: string;
@ -298,24 +302,30 @@ export class ConversationHeader extends React.Component<Props> {
}
public renderSelectionOverlay() {
const { onDeleteMessages } = this.props;
return (
<div className="message-selection-overlay">
<div className="close-button">
<SessionIconButton
iconType={SessionIconType.Exit}
iconSize={SessionIconSize.Large}
iconSize={SessionIconSize.Medium}
/>
</div>
<div className="button-group">
<SessionButton
buttonType={SessionButtonTypes.secondary}
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Primary}
text={'Forward'}
onClick={onDeleteMessages}
/>
<SessionButton
buttonType={SessionButtonTypes.danger}
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Danger}
text={'Delete'}
onClick={onDeleteMessages}
/>
</div>
</div>

55
ts/components/session/SessionButton.tsx
Unescape Escape View File

@ -3,28 +3,65 @@ import classNames from 'classnames';
//import { LocalizerType } from '../../types/Util';
export enum SessionButtonTypes {
fullGreen = 'fullGreen',
white = 'white',
green = 'green',
secondary = 'secondary',
danger = 'danger',
export enum SessionButtonType {
Brand = 'brand',
BrandOutline = 'brand-outline',
Default = 'default',
DefaultOutline = 'default-outline',
Square = 'square',
SquareOutline = 'square-outline',
Simple = 'simple',
}
export enum SessionButtonColor {
Green = 'green',
White = 'white',
Primary = 'primary',
Secondary = 'secondary',
Danger = 'danger',
Warning = 'warning',
}
interface Props {
//i18n: LocalizerType;
text: string;
buttonType: SessionButtonTypes;
buttonType: SessionButtonType;
buttonColor: SessionButtonColor;
onClick: any;
}
export class SessionButton extends React.PureComponent<Props> {
public static defaultProps = {
buttonType: SessionButtonType.Default,
buttonColor: SessionButtonColor.Primary,
onClick: () => null,
};
constructor(props: any) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
}
public render() {
const { buttonType, text } = this.props;
const { buttonType, buttonColor, text } = this.props;
return (
<div className={classNames('session-button', buttonType)} role="button">
<div
onClick={e => {
this.clickHandler(e);
}}
className={classNames('session-button', buttonType, buttonColor)}
role="button"
>
{text}
</div>
);
}
private clickHandler(e: any) {
if (this.props.onClick) {
e.stopPropagation();
this.props.onClick();
}
}
}

Write Preview
Loading…
Cancel
Save