@griddo/ax 11.4.24 → 11.5.0

package/src/components/Gallery/GalleryPanel/DetailPanel/style.tsx

@@ -1,106 +1,122 @@
 import styled from "styled-components";
 
-export const DetailPanelWrapper = styled.div<{ hidden: boolean }>`
+const DetailPanelWrapper = styled.div`
   position: relative;
-  opacity: ${p => (p.hidden ? "0" : "1")};
+  opacity: ${(p) => (p.hidden ? "0" : "1")};
   transition: opacity 0.1s;
   height: 100%;
   width: 100%;
-  display: ${p => (p.hidden ? "none" : "block")};
 `;
 
-export const PanelActions = styled.div`
+const PanelActions = styled.div`
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: flex-end;
-  background-color: ${p => p.theme.color.uiBarBackground};
-  padding: ${p => p.theme.spacing.s} ${p => p.theme.spacing.m};
-  border-top: 1px solid ${p => p.theme.color.uiLine};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
   button:not(:first-child) {
-    margin-left: ${p => p.theme.spacing.s};
+    margin-left: ${(p) => p.theme.spacing.s};
   }
 `;
 
-export const PanelForm = styled.div`
+const PanelForm = styled.div`
   position: relative;
   width: 100%;
-  height: calc(${p => p.theme.spacing.xl} * 8);
+  height: calc(${(p) => p.theme.spacing.xl} * 8);
   overflow: auto;
 `;
 
-export const Date = styled.div`
-  ${p => p.theme.textStyle.uiM};
-  color: ${p => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xxs};
+const InfoRow = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const Type = styled.div`
-  ${p => p.theme.textStyle.uiM};
-  color: ${p => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xxs};
-`;
-
-export const ImageInfoWrapper = styled.div`
-  padding: ${p => p.theme.spacing.m};
-  border-bottom: 1px solid ${p => p.theme.color.uiLine};
+const InfoWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  strong {
+    font-weight: 600;
+  }
 `;
 
-export const ImageWrapper = styled.div`
+const ButtonsWrapper = styled.div`
   display: flex;
-  margin-bottom: ${p => p.theme.spacing.s};
-  align-items: flex-start;
-  justify-content: space-between;
-`;
+  align-items: center;
 
-export const Image = styled.div`
-  max-width: 120px;
-  width: 100%;
-  img {
-    border: 1px solid ${p => p.theme.color.uiLine};
-    border-radius: 4px;
+  button:first-child {
+    margin-right: ${(p) => p.theme.spacing.xs};
   }
 `;
 
-export const ImageName = styled.div`
-  ${p => p.theme.textStyle.uiL};
-  color: ${p => p.theme.color.textHighEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xxs};
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
   overflow-wrap: break-word;
 `;
 
-export const ImageSize = styled.div`
-  ${p => p.theme.textStyle.uiM};
-  color: ${p => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xxs};
-`;
-
-export const ImageDimensions = styled.div`
-  ${p => p.theme.textStyle.uiM};
-  color: ${p => p.theme.color.textMediumEmphasis};
-`;
-
-export const FormWrapper = styled.div`
-  padding: ${p => p.theme.spacing.m};
+const FormWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0 ${p.theme.spacing.s}`};
 `;
 
-export const ImageUrl = styled.div`
+const Url = styled.div`
   display: flex;
-  ${p => p.theme.textStyle.fieldContent};
-  color: ${p => p.theme.color.textMediumEmphasis};
-  background-color: ${p => p.theme.color.uiBackground03};
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
   border-radius: 4px;
   width: 100%;
-  height: ${p => p.theme.spacing.l};
-  padding: 0 ${p => p.theme.spacing.s};
-  margin-bottom: ${p => p.theme.spacing.m};
+  height: ${(p) => p.theme.spacing.l};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.m};
   overflow: hidden;
   white-space: nowrap;
 `;
 
-export const AddToGlobal = styled.div`
-  padding: ${p => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.xs} ${p.theme.spacing.m}`};
-  border-bottom: 1px solid ${p => p.theme.color.uiLine};
+const ImageWrapper = styled.div`
+  width: 120px;
+  height: auto;
+  img {
+    border-radius: ${(p) => p.theme.radii.s};
+  }
+`;
+
+const Label = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const FieldText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
 `;
+
+const Header = styled.div`
+  display: flex;
+  align-items: top;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  justify-content: space-between;
+`;
+
+export {
+  DetailPanelWrapper,
+  PanelActions,
+  PanelForm,
+  InfoRow,
+  InfoWrapper,
+  ButtonsWrapper,
+  Name,
+  FormWrapper,
+  Url,
+  ImageWrapper,
+  Label,
+  FieldText,
+  Header,
+};

package/src/components/Gallery/GalleryPanel/index.tsx

@@ -1,52 +1,57 @@
 import React, { memo } from "react";
 
-import { IImage, ISite } from "@ax/types";
-import { usePermission } from "@ax/hooks";
+import { IGetFolderParams, IImage } from "@ax/types";
 
-import GalleryDragAndDrop from "./GalleryDragAndDrop";
 import DetailPanel from "./DetailPanel";
+import ImageDragAndDrop from "@ax/modules/MediaGallery/ImageDragAndDrop";
+
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const { imageSelected, validFormats, setImage, isGlobalTab, scope, selectedTab, site, refreshImages, selectImage } =
-    props;
-
-  const isAllowedToUpload = usePermission("mediaGallery.addImages");
-
-  const allowUpload = (site && (!isGlobalTab || !selectedTab) && isAllowedToUpload) || (!site && isAllowedToUpload);
+  const {
+    selectedImage,
+    validFormats,
+    setImage,
+    scope,
+    currentFolderID,
+    isAllowedToAdd,
+    isAllowedToEdit,
+    handleUpload,
+    getParams,
+  } = props;
 
   return (
     <S.GalleryPanel>
-      <GalleryDragAndDrop
-        isImageSelected={!!imageSelected}
-        validFormats={validFormats}
-        site={scope}
-        allowUpload={allowUpload}
-        refreshImages={refreshImages}
-        selectImage={selectImage}
-      />
-      <DetailPanel
-        imageSelected={imageSelected}
-        isImageSelected={!!imageSelected}
-        setImage={setImage}
-        isGlobalTab={isGlobalTab}
-        refreshImages={refreshImages}
-        selectImage={selectImage}
-      />
+      {!selectedImage ? (
+        <ImageDragAndDrop
+          validFormats={validFormats}
+          folderID={currentFolderID}
+          handleUpload={handleUpload}
+          siteID={scope}
+          isAllowedToUpload={isAllowedToAdd}
+        />
+      ) : (
+        <DetailPanel
+          selectedImage={selectedImage}
+          setImage={setImage}
+          isAllowedToEdit={isAllowedToEdit}
+          getParams={getParams}
+        />
+      )}
     </S.GalleryPanel>
   );
 };
 
 export interface IGalleryPanelProps {
-  imageSelected: IImage | null;
+  selectedImage: IImage | null;
   validFormats: string[];
-  setImage: (imageData: any) => void;
-  isGlobalTab: boolean;
+  setImage: (fileData: any) => void;
   scope: number | "global";
-  selectedTab: string;
-  refreshImages: () => Promise<void>;
-  site: ISite | null;
-  selectImage(item: IImage | null): void;
+  currentFolderID: number | null;
+  handleUpload: (file: IImage[]) => void;
+  isAllowedToEdit: boolean;
+  isAllowedToAdd: boolean;
+  getParams(): IGetFolderParams;
 }
 
 export default memo(GalleryPanel);

package/src/components/Gallery/GalleryPanel/style.tsx

@@ -3,4 +3,5 @@ import styled from "styled-components";
 export const GalleryPanel = styled.div`
   background-color: ${p => p.theme.color.uiBarBackground};
   width: ${p => `calc(${p.theme.spacing.xl} * 5)`};
+  flex-shrink: 0;
 `;