From 12011a30d4a9a5a7d9c2201c37cd379b430a0fcd Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 18 Dec 2019 11:50:19 +1100 Subject: [PATCH] Inital dropdown, modal and toggle --- background.html | 1 + js/background.js | 9 +- js/modules/signal.js | 4 + js/views/session_modal_view.js | 0 js/views/session_toggle_view.js | 31 +++++ stylesheets/_session.scss | 118 +++++++++++++++++- ts/components/UserDetailsDialog.tsx | 35 ++++++ ts/components/session/SessionDropdown.tsx | 45 +++++++ ts/components/session/SessionDropdownItem.tsx | 66 ++++++++++ ts/components/session/SessionModal.tsx | 43 +++++++ ts/components/session/SessionToggle.tsx | 48 +++++++ .../session/tools/ComponentTools.tsx | 7 ++ 12 files changed, 401 insertions(+), 6 deletions(-) create mode 100644 js/views/session_modal_view.js create mode 100644 js/views/session_toggle_view.js create mode 100644 ts/components/session/SessionDropdown.tsx create mode 100644 ts/components/session/SessionDropdownItem.tsx create mode 100644 ts/components/session/SessionModal.tsx create mode 100644 ts/components/session/SessionToggle.tsx create mode 100644 ts/components/session/tools/ComponentTools.tsx diff --git a/background.html b/background.html index d0232a1d5..536d1ad05 100644 --- a/background.html +++ b/background.html @@ -701,6 +701,7 @@ + diff --git a/js/background.js b/js/background.js index 7dd29881a..ca0bbcc90 100644 --- a/js/background.js +++ b/js/background.js @@ -802,6 +802,9 @@ appView.openConversation(groupId, {}); }; + + window.generateID = () => Math.random().toString(36).substring(3); + window.toasts = new Map(); window.pushToast = options => { // Setting toasts with the same ID can be used to prevent identical @@ -811,10 +814,7 @@ const params = { title: options.title, id: - options.id || - Math.random() - .toString(36) - .substring(3), + options.id || window.generateID(), description: options.description || '', type: options.type || '', }; @@ -825,7 +825,6 @@ if (toast) { window.toasts.get(toastID).update(params); } else { - // Make new Toast window.toasts.set( toastID, diff --git a/js/modules/signal.js b/js/modules/signal.js index a94083c13..d0e00e394 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -51,6 +51,8 @@ const { const { EditProfileDialog } = require('../../ts/components/EditProfileDialog'); const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog'); const { SessionToast } = require('../../ts/components/session/SessionToast'); +const { SessionToggle } = require('../../ts/components/session/SessionToggle'); +const { SessionModal } = require('../../ts/components/session/SessionModal'); const { SessionRegistrationView, } = require('../../ts/components/session/SessionRegistrationView'); @@ -250,6 +252,8 @@ exports.setup = (options = {}) => { GroupInvitation, BulkEdit, SessionToast, + SessionToggle, + SessionModal, MediaGallery, Message, MessageBody, diff --git a/js/views/session_modal_view.js b/js/views/session_modal_view.js new file mode 100644 index 000000000..e69de29bb diff --git a/js/views/session_toggle_view.js b/js/views/session_toggle_view.js new file mode 100644 index 000000000..60b5d7740 --- /dev/null +++ b/js/views/session_toggle_view.js @@ -0,0 +1,31 @@ +/* global Whisper */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.SessionToastView = Whisper.View.extend({ + initialize(options) { + this.props = { + active: options.active, + }; + }, + + render() { + this.toggleView = new Whisper.ReactWrapperView({ + className: 'session-toggle-wrapper', + Component: window.Signal.Components.SessionToast, + props: this.props, + }); + + this.$el.append(this.toggleView.el); + }, + + toggle() { + this.props.active = !this.props.active; + this.toggleView.update(this.props); + }, + }); +})(); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 730ab25e0..8c183e823 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -60,7 +60,7 @@ $session-opaque-dark-3: rgba(0, 0, 0, 0.5); $session-color-white: #fff; $session-color-dark-grey: #353535; $session-color-black: #000; -$session-color-danger: #ff4538; +$session-color-danger: #FF453A; $session-color-primary: $session-shade-13; $session-color-secondary: $session-shade-16; @@ -489,3 +489,119 @@ label { @include set-toast-theme($session-color-error); } } + +.session-modal { + z-index: 150; + position: fixed; + top: 50%; + left: 50%; + + box-sizing: border-box; + height: 529px; + width: 345px; + background-color: $session-shade-4; + border: 1px solid $session-shade-8; + + .header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: $session-margin-lg; + + font-family: 'Wasa'; + text-align: center; + line-height: 18px; + font-size: 15px; + font-weight: 700; + + .close, + .icons { + width: 70px; + } + .close > div { + float: left; + } + .icons > div { + float: right; + } + } +} + +.session-toggle { + width: 51px; + height: 31px; + border: 1.5px solid #e5e5ea; + border-radius: 16px; + position: relative; + + cursor: pointer; + background-color: rgba(0, 0, 0, 0); + + .knob { + position: absolute; + top: 0.5px; + left: 0.5px; + height: 27px; + width: 27px; + border-radius: 28px; + background-color: $session-color-white; + box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05), + 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); + + transition: transform 0.25s ease, background-color 0.25s ease; + } + + &.active { + background-color: $session-color-green; + border-color: $session-color-green; + + .knob { + transform: translateX(20px); + } + } +} + + +.session-dropdown{ + display: inline-block; + + ul { + display: block; + list-style: none; + padding: 0px; + margin: 0px; + + li { + cursor: pointer; + + height: 25px; + padding-right: 7px; + background-color: #1B1B1B; + + color: $session-color-white; + font-family: 'Wasa'; + font-size: 12px; + line-height: $session-icon-size-sm; + font-weight: 700; + + display: flex; + align-items: center; + + .session-icon { + margin-left: 6px; + } + .item-content { + margin-left: 6px; + } + + &.active, &:hover{ + background-color: $session-shade-7; + } + + &.danger { + color: $session-color-danger; + } + } + } + +} \ No newline at end of file diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index e52f49713..3f07d8631 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { Avatar } from './Avatar'; +import { SessionDropdown, SessionDropDownType } from './session/SessionDropdown'; +import { SessionIconType } from './session/icon'; + declare global { interface Window { displayNameRegex: any; @@ -33,8 +36,40 @@ export class UserDetailsDialog extends React.Component { const cancelText = i18n('cancel'); const startConversation = i18n('startConversation'); + const items = [ + { + id: "myid1", + content: "Copy Chat ID", + icon: SessionIconType.Eye, + type: SessionDropDownType.Default, + active: false + }, + { + id: "myid1", + content: "Invite Friends", + icon: null, + type: SessionDropDownType.Default, + active: false + }, + { + id: "myid1", + content: "Clear Chat History", + icon: SessionIconType.Check, + type: SessionDropDownType.Default, + active: true + }, + { + id: "myid1", + content: "Leave Group", + icon: SessionIconType.Check, + type: SessionDropDownType.Danger, + active: false + }, + ]; + return (
+
{this.renderAvatar()}
diff --git a/ts/components/session/SessionDropdown.tsx b/ts/components/session/SessionDropdown.tsx new file mode 100644 index 000000000..21b6a1f7f --- /dev/null +++ b/ts/components/session/SessionDropdown.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem'; +import { SessionIconType } from './icon/'; + + +interface Props { + items: Array<{ + id: string, + content: string, + icon: SessionIconType | null, + type: SessionDropDownItemType, + active: boolean, + }>, + } + +export class SessionDropdown extends React.PureComponent { + public static readonly defaultProps = SessionDropdownItem.defaultProps; + + constructor(props: any) { + super(props); + } + + public render() { + const { items } = this.props; + + return ( +
+
    + {items.map((item: any) => + )} +
+
+ ); + } + +} + diff --git a/ts/components/session/SessionDropdownItem.tsx b/ts/components/session/SessionDropdownItem.tsx new file mode 100644 index 000000000..f8862f748 --- /dev/null +++ b/ts/components/session/SessionDropdownItem.tsx @@ -0,0 +1,66 @@ + +import React from 'react'; +import classNames from 'classnames'; + +import { SessionIcon, SessionIconSize, SessionIconType } from './icon/'; +import { generateID } from './tools/ComponentTools'; + + +export enum SessionDropDownItemType { + Default = 'default', + Danger = 'danger', +} + +interface Props { + id: string, + content: string, + type: SessionDropDownItemType, + icon: SessionIconType | null, + active: boolean, + onClick: any, +} + +export class SessionDropdownItem extends React.PureComponent { + public static defaultProps = { + id: generateID(), + type: SessionDropDownItemType.Default, + onClick: () => null, + }; + + constructor(props: any) { + super(props); + this.clickHandler = this.clickHandler.bind(this); + } + + public render() { + const { id, content, type, icon, active } = this.props; + + return ( +
  • + { icon ? + : '' + } +
    + {content} +
    +
    • + ); + } + + private clickHandler(e: any){ + if (this.props.onClick) { + e.stopPropagation(); + this.props.onClick(); + } + } + } + + + diff --git a/ts/components/session/SessionModal.tsx b/ts/components/session/SessionModal.tsx new file mode 100644 index 000000000..325f772ec --- /dev/null +++ b/ts/components/session/SessionModal.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/'; + +interface Props { + title: string; + body: any; +} + +export class SessionModal extends React.PureComponent { + constructor(props: any) { + super(props); + } + + public render() { + const { title } = this.props; + + return ( +
    +
    +
    + +
    +
    {title}
    +
    + + +
    +
    +
    + ); + } +} diff --git a/ts/components/session/SessionToggle.tsx b/ts/components/session/SessionToggle.tsx new file mode 100644 index 000000000..7c169c1ed --- /dev/null +++ b/ts/components/session/SessionToggle.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import classNames from 'classnames'; + +interface Props { + active: boolean; +} + +interface State { + active: boolean; +} + +export class SessionToggle extends React.PureComponent { + public static readonly extendedDefaults = { + onClick: () => null, + }; + + constructor(props: any) { + super(props); + this.clickHandler = this.clickHandler.bind(this); + + const { active } = this.props; + + this.state = { + active: active, + }; + } + + public render() { + return ( +
    +
    +
    + ); + } + + private clickHandler() { + this.setState({ + active: !this.state.active, + }); + } +} diff --git a/ts/components/session/tools/ComponentTools.tsx b/ts/components/session/tools/ComponentTools.tsx new file mode 100644 index 000000000..7bdff6063 --- /dev/null +++ b/ts/components/session/tools/ComponentTools.tsx @@ -0,0 +1,7 @@ +// This is a collection of tools which can be ued to simplify the esign and rendering process of your components. + +export function generateID(){ + // Generates a unique ID for your component + return Math.random().toString(36).substring(3); +} +