Formatting and button positioning

2020-01-22 14:28:29 +11:00 · 2020-01-22 14:28:29 +11:00 · b68b4d8a27
parent c369b0c553
commit b68b4d8a27
7 changed files with 95 additions and 53 deletions
--- a/js/background.js
+++ b/js/background.js
@ -820,7 +820,6 @@
      confirmDialog.render();
    };

-    
    window.showQRDialog = window.owsDesktopApp.appView.showQRDialog;
    window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog;
    window.showPasswordDialog = window.owsDesktopApp.appView.showPasswordDialog;
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@ -219,6 +219,10 @@ $session_message-container-border-radius: 5px;
  margin-right: 5px;
 }

+.message-wrapper {
+  font-family: 'SF Pro Text';
+}
+
 .session-button {
  @mixin transparent-background($textAndBorderColor) {
    background-color: Transparent;
@ -870,7 +874,7 @@ label {
      height: 68.45px;
    }
  }
-  
+
  .avatar-center-inner {
    position: relative;

@ -891,8 +895,8 @@ label {
      padding-top: 3px;
      background-color: $session-color-white;
      transition: $session-transition-duration;
-  
-      &:hover{
+
+      &:hover {
        filter: brightness(90%);
      }

@ -900,7 +904,7 @@ label {
        opacity: 1;
      }
    }
-  } 
+  }

  .image-upload-section {
    display: flex;
@ -912,15 +916,15 @@ label {
    height: 80px;
    border-radius: 100%;
    background-color: rgba($session-color-black, 0.72);
-    box-shadow: 0px 0px 3px 0.5px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 3px 0.5px rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: $session-transition-duration;

-    &:after{
-      content: "Edit";
+    &:after {
+      content: 'Edit';
    }

-    &:hover{
+    &:hover {
      opacity: 1;
    }
  }
@ -939,22 +943,30 @@ label {
  }

  .session-id-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
    .panel-text-divider {
      margin-top: 35px;
      margin-bottom: 35px;
    }

-    &-display{
+    &-display {
      text-align: center;
      word-break: break-all;
      font-size: $session-font-md;
      padding: 0px $session-margin-lg;
-      font-family: "SF Pro Text";
+      font-family: 'SF Pro Text';
      font-weight: 100;
-      color: rgba($session-color-white, 0.80);
+      color: rgba($session-color-white, 0.8);
      font-size: $session-font-md;
      padding: 0px $session-margin-sm;
    }
+    
+    .session-button {
+      width: 148px;
+    }
  }

  .profile-name {
@ -970,7 +982,7 @@ label {
      font-size: $session-font-md;
      background-color: $session-shade-5 !important;
    }
-    
+
    &-uneditable {
      display: flex;
      align-items: center;
@ -981,7 +993,6 @@ label {
        font-size: $session-font-md;
        padding: 0px $session-margin-sm;
      }
-
    }
  }
 }
--- a/ts/components/EditProfileDialog.tsx
+++ b/ts/components/EditProfileDialog.tsx
@ -3,7 +3,11 @@ import { QRCode } from 'react-qr-svg';

 import { Avatar } from './Avatar';

-import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from './session/SessionButton';

 import {
  SessionIconButton,
@ -67,13 +71,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
    const viewQR = this.state.mode === 'qr';
    const sessionID = window.textsecure.storage.user.getNumber();

-    const backButton = (viewEdit || viewQR)
-      ? [{
-          iconType: SessionIconType.Chevron,
-          iconRotation: 90,
-          onClick: () => this.setState({mode: 'default'}),
-        }]
-      : undefined;
+    const backButton =
+      viewEdit || viewQR
+        ? [
+            {
+              iconType: SessionIconType.Chevron,
+              iconRotation: 90,
+              onClick: () => {
+                this.setState({ mode: 'default' });
+              },
+            },
+          ]
+        : undefined;

    return (
      <SessionModal
@ -83,7 +92,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
        headerReverse={viewEdit || viewQR}
        headerIconButtons={backButton}
      >
-        <div className="spacer-md"></div>
+        <div className="spacer-md" />

        {viewQR && this.renderQRView(sessionID)}
        {viewDefault && this.renderDefaultView()}
@ -93,18 +102,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
          <div className="panel-text-divider">
            <span>{window.i18n('yourSessionID')}</span>
          </div>
-          <p className="session-id-section-display">
-            { sessionID }
-          </p>
+          <p className="session-id-section-display">{sessionID}</p>

-          <div className="spacer-lg"></div>
-          
-          { (viewDefault || viewQR) ? (
+          <div className="spacer-lg" />
+
+          {viewDefault || viewQR ? (
            <SessionButton
              text={window.i18n('copy')}
              buttonType={SessionButtonType.BrandOutline}
              buttonColor={SessionButtonColor.Green}
-              onClick={() => this.copySessionID(sessionID)}
+              onClick={() => {
+                this.copySessionID(sessionID);
+              }}
            />
          ) : (
            <SessionButton
@ -115,8 +124,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
            />
          )}

-          <div className="spacer-lg"></div>
-
+          <div className="spacer-lg" />
        </div>
      </SessionModal>
    );
@ -130,6 +138,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
            {this.renderAvatar()}
            <div
              className="image-upload-section"
+              role="button"
              onClick={() => {
                const el = this.inputEl.current;
                if (el) {
@ -148,12 +157,15 @@ export class EditProfileDialog extends React.Component<Props, State> {
            </div>
            <div
              className="qr-view-button"
-              onClick={() => this.setState({mode: 'qr'})}
+              role="button"
+              onClick={() => {
+                this.setState({ mode: 'qr' });
+              }}
            >
              <SessionIconButton
                iconType={SessionIconType.QR}
                iconSize={SessionIconSize.Small}
-                iconColor={"#000000"}
+                iconColor={'#000000'}
              />
            </div>
          </div>
@ -162,31 +174,31 @@ export class EditProfileDialog extends React.Component<Props, State> {
    );
  }

-  private renderDefaultView(){
+  private renderDefaultView() {
    return (
      <>
-        { this.renderProfileHeader() }
+        {this.renderProfileHeader()}

        <div className="profile-name-uneditable">
-          <p>{ this.state.setProfileName }</p>
+          <p>{this.state.setProfileName}</p>
          <SessionIconButton
            iconType={SessionIconType.Pencil}
            iconSize={SessionIconSize.Medium}
-            onClick={() => this.setState({mode: 'edit'})}
+            onClick={() => {
+              this.setState({ mode: 'edit' });
+            }}
          />
        </div>
      </>
    );
  }

-
-
  private renderEditView() {
    const placeholderText = window.i18n('displayName');

    return (
      <>
-        { this.renderProfileHeader() }
+        {this.renderProfileHeader()}
        <div className="profile-name">
          <input
            type="text"
@ -203,13 +215,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
    );
  }

-  private renderQRView(sessionID: string){
+  private renderQRView(sessionID: string) {
    const bgColor = '#FFFFFF';
    const fgColor = '#1B1B1B';
-    
+
    return (
      <div className="qr-image">
-        <QRCode value={sessionID} bgColor={bgColor} fgColor={fgColor} level="L" />
+        <QRCode
+          value={sessionID}
+          bgColor={bgColor}
+          fgColor={fgColor}
+          level="L"
+        />
      </div>
    );
  }
--- a/ts/components/session/ActionsPanel.tsx
+++ b/ts/components/session/ActionsPanel.tsx
@ -42,7 +42,8 @@ const Section = ({
    ? () => {
        type === SectionType.Profile
          ? window.showEditProfileDialog()
-          : onSelect(type);
+          : /* tslint:disable-next-line:no-void-expression */
+            onSelect(type);
      }
    : undefined;

--- a/ts/components/session/SessionModal.tsx
+++ b/ts/components/session/SessionModal.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';

 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
-import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
+import { SessionButtonColor, SessionButtonType } from './SessionButton';

 interface Props {
  title: string;
@ -11,7 +11,7 @@ interface Props {
  showExitIcon?: boolean;
  showHeader?: boolean;
  headerReverse?: boolean;
-  //Maximum of two icons in header
+  //Maximum of two icons or buttons in header
  headerIconButtons?: Array<{
    iconType: SessionIconType;
    iconRotation: number;
@ -49,14 +49,25 @@ export class SessionModal extends React.PureComponent<Props, State> {
  }

  public render() {
-    const { title, headerIconButtons, showExitIcon, showHeader, headerReverse } = this.props;
+    const {
+      title,
+      headerIconButtons,
+      showExitIcon,
+      showHeader,
+      headerReverse,
+    } = this.props;
    const { isVisible } = this.state;

    return isVisible ? (
      <div className={'session-modal'}>
        {showHeader ? (
          <>
-            <div className={classNames("session-modal__header", headerReverse && "reverse")}>
+            <div
+              className={classNames(
+                'session-modal__header',
+                headerReverse && 'reverse'
+              )}
+            >
              <div className="session-modal__header__close">
                {showExitIcon ? (
                  <SessionIconButton
--- a/ts/components/session/settings/SessionSettings.tsx
+++ b/ts/components/session/settings/SessionSettings.tsx
@ -216,7 +216,10 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {

    return (
      <div className="session-settings">
-        <SettingsHeader disableLinkDeviceButton={shouldRenderPasswordLock} category={category} />
+        <SettingsHeader
+          disableLinkDeviceButton={shouldRenderPasswordLock}
+          category={category}
+        />
        {shouldRenderPasswordLock ? (
          this.renderPasswordLock()
        ) : (
--- a/ts/components/session/settings/SessionSettingsHeader.tsx
+++ b/ts/components/session/settings/SessionSettingsHeader.tsx
@ -4,19 +4,19 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
 import { SessionSettingCategory, SettingsViewProps } from './SessionSettings';
 import { SessionButton } from '../SessionButton';

-interface Props extends SettingsViewProps{
+interface Props extends SettingsViewProps {
  disableLinkDeviceButton: boolean | null;
 }

 export class SettingsHeader extends React.Component<Props, any> {
  public static defaultProps = {
    disableLinkDeviceButton: true,
-  }
+  };

  public constructor(props: any) {
    super(props);
    this.state = {
-    disableLinkDeviceButton: this.props.disableLinkDeviceButton,
+      disableLinkDeviceButton: this.props.disableLinkDeviceButton,
    };
    this.showAddLinkedDeviceModal = this.showAddLinkedDeviceModal.bind(this);
  }