From 994102f22d531f231d5ea0688cf458baff541dbc Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 23 Aug 2022 11:14:24 -0700
Subject: [PATCH] making carousel more mobile friendly

---
 net/web/src/carousel/Carousel.jsx             | 49 ++++++------------
 net/web/src/carousel/Carousel.styled.js       | 50 ++++++++++++++-----
 net/web/src/session/cardSelect/CardSelect.jsx | 12 +++--
 .../conversation/addTopic/AddTopic.jsx        | 39 ++++++---------
 .../conversation/addTopic/AddTopic.styled.js  | 15 ++++--
 5 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/net/web/src/carousel/Carousel.jsx b/net/web/src/carousel/Carousel.jsx
index a8725551..9f96983a 100644
--- a/net/web/src/carousel/Carousel.jsx
+++ b/net/web/src/carousel/Carousel.jsx
@@ -120,43 +120,26 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
     }
   }
 
-  if (!ready || error) {
-    return (
-      <CarouselWrapper>
-        <div class="carousel">
-          {error && (
-            <div class="status">
-              <FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
-            </div>
-          )}
-          {!ready && !error && (
-            <div class="status">
-              <PictureOutlined style={{ fontSize: 32 }} />
-            </div>
-          )}
+  return (
+    <CarouselWrapper>
+      { error && (
+        <div class="status">
+          <FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
         </div>
-        <div class="arrows">
-          <div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: 'hidden' }} /></div>
-          <div class="arrow" onClick={onLeft}><RightOutlined style={{ visibility: 'hidden' }} /></div>
+      )}
+      { !ready && !error && (
+        <div class="status">
+          <PictureOutlined style={{ fontSize: 32 }} />
         </div>
-      </CarouselWrapper>
-    )
-  }
-
-  if (slots.length != 0) {
-    return (
-      <CarouselWrapper>
+      )}
+      { ready && !error && (
         <div class="carousel" ref={onRefSet}>
           {slots}
         </div>
-        <div class="arrows">
-          <div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
-          <div class="arrow" onClick={onLeft}><RightOutlined style={{ visibility: scrollLeft }} /></div>
-        </div>
-      </CarouselWrapper>
-    );
-  }
-  return <></>
-
+      )}
+      <div class="left-arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
+      <div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
+    </CarouselWrapper>
+  );
 }
  
diff --git a/net/web/src/carousel/Carousel.styled.js b/net/web/src/carousel/Carousel.styled.js
index 7ea85639..b5a121cf 100644
--- a/net/web/src/carousel/Carousel.styled.js
+++ b/net/web/src/carousel/Carousel.styled.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Colors from 'constants/Colors';
 
 export const CarouselWrapper = styled.div`
   position: relative;
@@ -10,7 +11,7 @@ export const CarouselWrapper = styled.div`
   .carousel {
     display: flex;
     flex-direction: row;
-    padding-left: 16px;
+    padding-left: 32px;
     width: 100%;
     overflow: hidden;
 
@@ -33,22 +34,37 @@ export const CarouselWrapper = styled.div`
     display: none;
   }
 
-  .arrows {
-    height: 100%;
+  .left-arrow {
+    top: calc(50% - 16px);
+    height: 32px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
     position: absolute;
+    left: 0;
+    font-size: 24px;
+    width: 24px;
+    margin-left: 8px;
+    margin-right: 8px;
+    justify-content: center;
+    color: ${Colors.grey};
   }
 
-  .arrow {
-    height: 50%;
-    background-color: #888888;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
+  .right-arrow {
+    top: calc(50% - 16px);
+    height: 32px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    font-size: 24px;
+    width: 24px;
+    margin-left: 8px;
+    margin-right: 8px;
     justify-content: center;
+    color: ${Colors.text};
+    background-color: ${Colors.profileForm};
+    border-radius: 8px;
+    opacity: 0.7;
   }
 
   .arrow:hover {
@@ -67,13 +83,21 @@ export const CarouselWrapper = styled.div`
     background-color: #888888;
     color: white;
     border-bottom-left-radius: 2px;
-    padding-left: 2px;
-    padding-right: 2px;
     cursor: pointer;
+    border-top-right-radius: 8px;
+    border-bottom-left-radius: 4px;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
   }
 
   .asset {
     height: 128px;
+    border-radius: 8px;
+    overflow: hidden;
   }
 
   .space {
diff --git a/net/web/src/session/cardSelect/CardSelect.jsx b/net/web/src/session/cardSelect/CardSelect.jsx
index be17e333..96307bcc 100644
--- a/net/web/src/session/cardSelect/CardSelect.jsx
+++ b/net/web/src/session/cardSelect/CardSelect.jsx
@@ -11,11 +11,13 @@ export function CardSelect({ filter, unknown, select, selected, markup }) {
 
   return (
     <CardSelectWrapper>
-      <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
-        renderItem={item => (
-          <SelectItem item={item} select={select} selected={selected} markup={markup} />
-        )}
-      />
+      { state.cards?.length > 0 && (
+        <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
+          renderItem={item => (
+            <SelectItem item={item} select={select} selected={selected} markup={markup} />
+          )}
+        />
+      )}
       { unknown > 0 && (
         <div class="unknown">
           <Logo img="avatar" width={32} height={32} radius={8} />
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.jsx b/net/web/src/session/conversation/addTopic/AddTopic.jsx
index 2de97c18..b7884676 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.jsx
+++ b/net/web/src/session/conversation/addTopic/AddTopic.jsx
@@ -2,7 +2,7 @@ import { AddTopicWrapper } from './AddTopic.styled';
 import { useAddTopic } from './useAddTopic.hook';
 import { Input, Menu, Dropdown } from 'antd';
 import { useRef, useState } from 'react';
-import { FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
+import { SoundOutlined, VideoCameraOutlined, PictureOutlined, FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
 import { SketchPicker } from "react-color";
 import { AudioFile } from './audioFile/AudioFile';
 import { VideoFile } from './videoFile/VideoFile';
@@ -72,38 +72,31 @@ export function AddTopic({ cardId, channelId }) {
     </Menu>
   );
 
-  const attacher = (
-    <Menu>
-      <Menu.Item key="0">
-        <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/>
-        <div onClick={() => attachImage.current.click()}>Attach Image</div>
-      </Menu.Item>
-      <Menu.Item key="1">
-        <input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/>
-        <div onClick={() => attachAudio.current.click()}>Attach Audio</div>
-      </Menu.Item>
-      <Menu.Item key="2">
-        <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
-        <div onClick={() => attachVideo.current.click()}>Attach Video</div>
-      </Menu.Item>
-    </Menu>
-  );
-
   return (
     <AddTopicWrapper>
+      <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/>
+      <input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/>
+      <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
       <div class="carousel">
-        <Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
+        { state.assets.length > 0 && (
+          <Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
+        )}
       </div>
       <div class="message">
         <Input.TextArea ref={msg} placeholder="New Message" spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
             autocapitalize="none" enterkeyhint="send" onKeyDown={(e) => keyDown(e)} />
       </div>
       <div class="buttons">
-        <div class="button space">
-          <Dropdown overlay={attacher} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
-            <PaperClipOutlined />
-          </Dropdown>
+        <div class="button space" onClick={() => attachImage.current.click()}>
+          <PictureOutlined />
         </div> 
+        <div class="button space" onClick={() => attachVideo.current.click()}>
+          <VideoCameraOutlined />
+        </div> 
+        <div class="button space" onClick={() => attachAudio.current.click()}>
+          <SoundOutlined />
+        </div> 
+        <div class="bar space" />
         <div class="button space">
           <Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
             <FontSizeOutlined />
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.styled.js b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
index b849295d..5a089274 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.styled.js
+++ b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
@@ -8,20 +8,27 @@ export const AddTopicWrapper = styled.div`
 
   .message {
     width: 100%;
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: 32px;
+    padding-right: 32px;
     padding-top: 8px;
     padding-bottom: 8px;
   }
 
   .buttons {
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: 32px;
+    padding-right: 32px;
     padding-bottom: 16px;
     width: 100%;
     display: flex;
     flex-direction: row; 
     align-items: center;
+    
+    .bar {
+      border-left: 1px solid ${Colors.encircle};
+      height: 36px;
+      padding-right 8px;
+      margin-left: 8px;
+    }
 
     .button {
       display: flex;