aligning virutal list

2025-02-12 03:29:16 +00:00 · 2022-08-23 15:13:34 -07:00 · 2022-08-23 15:13:34 -07:00 · 53de020d74
commit 53de020d74
parent 0032e03897
8 changed files with 90 additions and 80 deletions
--- a/net/web/src/carousel/Carousel.jsx
+++ b/net/web/src/carousel/Carousel.jsx
@ -4,8 +4,9 @@ import { CarouselWrapper } from './Carousel.styled';
 import { RightOutlined, LeftOutlined, CloseOutlined, PictureOutlined, FireOutlined } from '@ant-design/icons';
 import ReactResizeDetector from 'react-resize-detector';

-export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
+export function Carousel({ pad, ready, error, items, itemRenderer, itemRemove }) {
  const [slots, setSlots] = useState([]);
+  const [padClass, setPadClass] = useState('');
  const [carouselRef, setCarouselRef] = useState(false);
  const [itemIndex, setItemIndex] = useState(0);
  const [scrollLeft, setScrollLeft] = useState('hidden');
@ -133,11 +134,11 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
        </div>
      )}
      { ready && !error && (
-        <div class="carousel" ref={onRefSet}>
+        <div class="carousel" style={{ paddingLeft: pad + 32 }} ref={onRefSet}>
          {slots}
        </div>
      )}
-      <div class="left-arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
+      <div class="left-arrow" onClick={onRight} style={{ marginLeft: pad, visibility: scrollRight }}><LeftOutlined /></div>
      <div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
    </CarouselWrapper>
  );
--- a/net/web/src/carousel/Carousel.styled.js
+++ b/net/web/src/carousel/Carousel.styled.js
@ -6,7 +6,6 @@ export const CarouselWrapper = styled.div`
  display: grid;
  width: 100%;
  height: 128px;
-  margin-top: 16px;

  .carousel {
    display: flex;
@ -46,7 +45,10 @@ export const CarouselWrapper = styled.div`
    margin-left: 8px;
    margin-right: 8px;
    justify-content: center;
-    color: ${Colors.grey};
+    color: ${Colors.text};
+    background-color: ${Colors.profileForm};
+    border-radius: 8px;
+    opacity: 0.7;
  }

  .right-arrow {
--- a/net/web/src/session/conversation/addTopic/AddTopic.jsx
+++ b/net/web/src/session/conversation/addTopic/AddTopic.jsx
@ -91,11 +91,11 @@ export function AddTopic({ cardId, channelId }) {
      <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">
-        { state.assets.length > 0 && (
-          <Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
-        )}
-      </div>
+      { state.assets.length > 0 && (
+        <div class="assets">
+          <Carousel pad={0} 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 }}
            enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)}
--- a/net/web/src/session/conversation/addTopic/AddTopic.styled.js
+++ b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
@ -14,6 +14,10 @@ export const AddTopicWrapper = styled.div`
    padding-bottom: 8px;
  }

+  .assets {
+    padding-top: 8px;
+  }
+
  .buttons {
    padding-left: 32px;
    padding-right: 32px;
--- a/net/web/src/session/conversation/topicItem/TopicItem.jsx
+++ b/net/web/src/session/conversation/topicItem/TopicItem.jsx
@ -100,7 +100,7 @@ export function TopicItem({ host, topic }) {
    return (
      <TopicItemWrapper>
        <div class="avatar">
-          <Logo width={32} height={32} radius={4} imageUrl={state.imageUrl} />
+          <Logo width={32} height={32} radius={4} url={state.imageUrl} />
        </div>
        <div class="topic">
          <div class="info">
@ -118,23 +118,25 @@ export function TopicItem({ host, topic }) {

  return (
    <TopicItemWrapper>
-      <div class="avatar">
-        <Logo width={32} height={32} radius={4} imageUrl={state.imageUrl} />
-      </div>
-      <div class="topic">
+      <div class="topic-header">
+        <div class="avatar">
+          <Logo width={32} height={32} radius={4} url={state.imageUrl} />
+        </div>
        <div class="info">
          <div class={nameClass}>{ name }</div>
          <div>{ getTime(offset) }</div>
        </div>
-        { state.assets.length > 0 && (
-          <Carousel ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
-        )}
-        <div class="message">
-          <Message />
-        </div>
-        <div class="options">
-          <Options />
+      </div>
+      { state.assets.length > 0 && (
+        <div class="topic-assets">
+          <Carousel pad={40} ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
        </div>
+      )}
+      <div class="message">
+        <Message />
+      </div>
+      <div class="options">
+        <Options />
      </div>
    </TopicItemWrapper>
  )
--- a/net/web/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
@ -2,52 +2,28 @@ import styled from 'styled-components';

 export const TopicItemWrapper = styled.div`
  display: flex;
-  flex-direction: row;
+  flex-direction: column;
  width: 100%;
-  padding-left: 8px;
-  
-  .avatar {
-    height: 32px;
-    width: 32px;
-  }

-  .topic {
+  .topic-header {
    display: flex;
-    flex-direction: column;
-    padding-left: 8px;
-    flex-grow: 1;
+    flex-direction: row;
+    margin-left: 16px;
+    padding-left: 16px;
+    margin-right: 16px;
+    padding-top: 8px;
+    border-top: 1px solid #dddddd;

-    &:hover .options {
-      visibility: visible;
+    .avatar {
+      height: 32px;
+      width: 32px;
    }

-    .options {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-
-      .buttons {
-        display: flex;
-        flex-direction: row;
-        border-radius: 4px;
-        background-color: #eeeeee;
-        border: 1px solid #555555;
-        margin-top: 2px;
-
-        .button {
-          font-size: 14px;
-          margin-left: 8px;
-          margin-right: 8px;
-          cursor: pointer;
-        }
-      }
-    }
- 
    .info {
      display: flex;
      flex-direction: row;
      line-height: 1;
+      padding-left: 8px;

      .comments {
        padding-left: 8px;
@ -72,26 +48,54 @@ export const TopicItemWrapper = styled.div`
        padding-right: 8px;
      }
    }
+  }

-    .message {
-      padding-top: 6px;
-      padding-right: 16px;
-      white-space: pre-line;
+  .options {
+    position: absolute;
+    top: 0;
+    right: 0;
+    visibility: hidden;

-      .editing {
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      border-radius: 4px;
+      background-color: #eeeeee;
+      border: 1px solid #555555;
+      margin-top: 2px;
+
+      .button {
+        font-size: 14px;
+        margin-left: 8px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .topic-assets {
+    padding-top: 4px;
+  }
+
+  .message {
+    padding-right: 16px;
+    padding-left: 72px;
+    white-space: pre-line;
+    min-height: 4px;
+
+    .editing {
+      display: flex;
+      flex-direction: column;
+      border-radius: 4px;
+      border: 1px solid #aaaaaa;
+      width: 100%;
+
+      .controls {
        display: flex;
-        flex-direction: column;
-        border-radius: 4px;
-        border: 1px solid #aaaaaa;
-        width: 100%;
-
-        .controls {
-          display: flex;
-          flex-direction: row;
-          justify-content: flex-end;
-          padding-bottom: 8px;
-          padding-right: 8px;
-        }
+        flex-direction: row;
+        justify-content: flex-end;
+        padding-bottom: 8px;
+        padding-right: 8px;
      }
    }
  }
--- a/net/web/src/session/conversation/virtualList/VirtualList.jsx
+++ b/net/web/src/session/conversation/virtualList/VirtualList.jsx
@ -9,7 +9,7 @@ export function VirtualList({ id, items, itemRenderer, onMore }) {
  const OVERSCAN = 1024; // add slots in overscan of view
  const DEFAULT_ITEM_HEIGHT = 256;
  const DEFAULT_LIST_HEIGHT = 4096;
-  const GUTTER = 6;
+  const GUTTER = 1;

  const [ msg, setMsg ] = useState("YO");

--- a/net/web/src/session/conversation/virtualList/VirtualList.styled.js
+++ b/net/web/src/session/conversation/virtualList/VirtualList.styled.js
@ -28,7 +28,4 @@ export const VirtualItem = styled.div`
  position: absolute;
  width: 100%;
  overflow: hidden;
-  &:hover {
-    background-color: #f0f5e0;
-  }
 `;