~breatheoutbreathein/u4u

3b455b14d2e70ca0aa1a5248f9de6c7afbf0a260 — Joseph Turner 2 years ago b870098 mockup-search-as
mockup for search as functionality
M src/components/PageContainer.tsx => src/components/PageContainer.tsx +1 -0
@@ 149,4 149,5 @@ const RightPanel = styled.div`
  flex-direction: column;
  width: 16rem;
  overflow: hidden;
  background-color: #d14e42;
`

M src/components/ProfilePageTopBar.tsx => src/components/ProfilePageTopBar.tsx +36 -15
@@ 73,27 73,48 @@ const ProfilePageTopBar = ({ authorURL, darkMode }: Props): ReactElement => {
    )
  } else if (isDistrusted) {
    buttons = (
      <PersonXButton
        handleClick={openTrustModal}
        title='View trust list (peer is distrusted)'
        darkMode={darkMode}
      />
      <>
        <PersonXButton
          handleClick={openTrustModal}
          title='View trust list (peer is distrusted)'
          darkMode={darkMode}
        />
        <PersonLinesFillButton
          handleClick={openTrustModal}
          title='View trust list'
          darkMode={darkMode}
        />
      </>
    )
  } else if (isTrusted) {
    buttons = (
      <PersonCheckButton
        handleClick={openTrustModal}
        title='View trust list (peer is trusted)'
        darkMode={darkMode}
      />
      <>
        <PersonCheckButton
          handleClick={openTrustModal}
          title='View trust list (peer is trusted)'
          darkMode={darkMode}
        />
        <PersonLinesFillButton
          handleClick={openTrustModal}
          title='View trust list'
          darkMode={darkMode}
        />
      </>
    )
  } else {
    buttons = (
      <PersonAddButton
        handleClick={handlePersonAddButtonClick}
        title='Add to trust list'
        darkMode={darkMode}
      />
      <>
        <PersonAddButton
          handleClick={handlePersonAddButtonClick}
          title='Add to trust list'
          darkMode={darkMode}
        />
        <PersonLinesFillButton
          handleClick={openTrustModal}
          title='View trust list'
          darkMode={darkMode}
        />
      </>
    )
  }


M src/components/RightPanelContents.tsx => src/components/RightPanelContents.tsx +46 -3
@@ 64,17 64,35 @@ const RightPanelContents = (props: AllProps): ReactElement => {
    props.setModal({ modal: Modals.usersModal })
  }

  const [searchAsAuthorURL, setSearchAsAuthorURL] = useState('fakeURL')
  const opts = [{ name: 'jack', url: 1 }, { name: 'james', url: 2 }, { name: 'me', url: 3 }, { name: 'you?', url: 4 }]

  const handleSearchAsAuthorSelect = (e: React.FormEvent<HTMLSelectElement>): void => {
    const url = e.currentTarget.value
    setSearchAsAuthorURL(url)
  }
  // <StyledSelect name='searchAsIdentities' id='searchAsIdentities' value={searchAsAuthorURL} onChange={handleSearchAsAuthorSelect}>
  //   {opts.map(author => (<option value={author.url} key={author.url}>{author.name}</option>))}
  // </StyledSelect>

      // <div style={{ backgroundColor: '#2caf1e', height: '2.5rem' }} />
  return (
    <>
      <div style={{ backgroundColor: '#d14e42', height: '2.5rem' }} />
      {props.authorURL !== undefined && (
        <Banner
          authorURL={props.authorURL}
          handleClick={handleBannerClick}
          placement={{ top: '0', right: '0' }}
          placement={{ top: '0.35rem', right: '0.35rem' }}
          fontSize='large'
          darkMode={props.darkMode}
        />
      )}
      <SearchAsContainerContainer>
        <SearchAsContainer>
          <StyledLabel htmlFor='identities' darkMode={props.darkMode}>Search as</StyledLabel>
        </SearchAsContainer>
      </SearchAsContainerContainer>
      <SearchDiv darkMode={props.darkMode}>
        <form onSubmit={handleSubmit}>
          <StyledInput


@@ 119,7 137,8 @@ interface StyledProps {

const SearchDiv = styled.div<StyledProps>`
  position: relative;
  margin: 2rem 0.2rem 0 0.2rem;
  margin: 0.5rem 0.2rem 0 0.2rem;
  background-color: #d14e42;
`

const StyledInput = styled.input<StyledProps>`


@@ 145,7 164,7 @@ const StyledButton = styled.button<StyledProps>`
  outline: none;
  top: 0;
  right: 0;
  height: 100%;
  height: 1.28rem;
  width: 1.5rem;
  background-color: var(--colorBG);
  border: 1.5px solid var(--colorFG);


@@ 168,11 187,35 @@ const StyledSvg = styled.svg<StyledProps>`
  fill: var(--colorFG);
`

const SearchAsContainerContainer = styled.div`
top: 0.5rem;
background: black;
width: 100%;
  position: absolute;
  border: 1.5px solid white;
`
const SearchAsContainer = styled.div`
  position: relative;
  margin: 0.3rem 0;
  font-size: x-small;
  left: 0.5rem;
`

const StyledLabel = styled.label<{darkMode: boolean}>`
  color: ${props => props.darkMode ? 'white' : 'black'};
`

const StyledSelect = styled.select`
  position: absolute;
  left: 5rem;
`

const ResultsContainer = styled.div`
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #d14e42;
  padding: 0.5rem 0.2rem;
  margin-top: 0.5rem;
`

M src/components/SemanticScreenTopBar.tsx => src/components/SemanticScreenTopBar.tsx +13 -2
@@ 27,6 27,7 @@ import { PublishButton } from './buttons/PublishButton'
import { UndoButton } from './buttons/UndoButton'
import { RedoButton } from './buttons/RedoButton'
import { XButton } from './buttons/XButton'
import { PersonLinesFillButton } from './buttons/PersonLinesFillButton'
import { MapStateToPropsReturnType } from '../utils/typescriptHelpers'

import {


@@ 79,7 80,7 @@ const SemanticScreenTopBar = (props: AllProps): ReactElement => {
    e.stopPropagation()
  }

  const buttons = (
  const draftButtons = (
    <>
      <PublishButton
        handleClick={handlePublishButtonClick}


@@ 103,11 104,21 @@ const SemanticScreenTopBar = (props: AllProps): ReactElement => {
      />
    </>
  )
  const buttons = (
    <>
      {props.isDraftMessage && draftButtons}
      <PersonLinesFillButton
        handleClick={console.log}
        title='View trust list'
        darkMode={props.darkMode}
      />
    </>
  )

  return (
    <TopBarContainer
      darkMode={props.darkMode}
      buttons={props.isDraftMessage && buttons}
      buttons={buttons}
      bannerAuthorURL={authorURL}
    />
  )

M src/components/StyledMessageListItem.tsx => src/components/StyledMessageListItem.tsx +1 -0
@@ 28,6 28,7 @@ export const MessageWrapper = styled.div<StyledProps>`
  position: relative;
  padding: 3px 1rem 3px 3px;
  margin: 0 3px 4px 3px;
background-color: black;

  ${(props) =>
    `

M src/components/TopBarContainer.tsx => src/components/TopBarContainer.tsx +2 -1
@@ 60,8 60,9 @@ const StyledDiv = styled.div<{darkMode: boolean}>`
  height: 1.5rem;
  min-height: 1.5rem;
  padding: 0.2rem 0;
  background-color: var(--colorBG);
  background-color: #d14e42;
`
//  background-color: var(--colorBG);

const ButtonGroupWrapper = styled.div`
  position: absolute;