Dyalog#308 demos working except gallery items

mqasim23 · Dec 10, 2024 · 48e5169 · 48e5169
1 parent 9077ff5
commit 48e5169
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 23 deletions.
diff --git a/src/components/Ribbon/RibbonButton.jsx b/src/components/Ribbon/RibbonButton.jsx
@@ -60,7 +60,7 @@ const CustomRibbonButton = ({ data }) => {
   return (
     <div style={{display:"flex", alignItems: "flex-start", height: "100%", marginTop: "5px" }}>
     <Row>
-      <Col md={12}>
+      <Col>
         <div
           id={data?.ID}
           className="d-flex align-items-center flex-column justify-content-center"

diff --git a/src/components/Ribbon/RibbonDropDownButton.jsx b/src/components/Ribbon/RibbonDropDownButton.jsx
@@ -10,7 +10,7 @@ import RibbonDropDownItem from "./RibbonDropDownItem";
 const RibbonDropDownButton = ({ data }) => {
   const ImageList = JSON.parse(localStorage.getItem("ImageList"));
   const ImagesData = JSON.parse(localStorage.getItem("ImagesData"));
-  const { socket, findCurrentData } = useAppData();
+  const { socket, findCurrentData, fontScale } = useAppData();
   const font = findCurrentData(data.FontObj && data.FontObj);
   const fontProperties = font && font?.Properties;
 
@@ -118,12 +118,17 @@ const RibbonDropDownButton = ({ data }) => {
             ) : (
               <IconComponent size={35} />
             )}
-            <div className="text-center" style={{ fontSize: "12px" }}>
+            <div className="text-center" style={{ fontFamily: fontProperties?.PName,
+                fontSize: fontProperties?.Size
+                    ? `${fontProperties.Size * fontScale}px`
+                    : `${12 * fontScale}px`,}}>
               {Caption}
             </div>
             <GoChevronDown
 
-              size={16}
+              size={fontProperties?.Size
+                ? `${fontProperties.Size * fontScale}`
+                : `${12 * fontScale}`}
             />
           </div>
 

diff --git a/src/components/Ribbon/RibbonGroup.jsx b/src/components/Ribbon/RibbonGroup.jsx
@@ -1,5 +1,5 @@
 import { useAppData } from '../../hooks';
-import { excludeKeys, parseFlexStyles, rgbColor, setStyle } from '../../utils';
+import { excludeKeys, findLongestID, parseFlexStyles, rgbColor } from '../../utils';
 import SelectComponent from '../SelectComponent';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-bootstrap-ribbon/dist/react-bootstrap-ribbon.css';
@@ -12,40 +12,61 @@ const CustomRibbonGroup = ({ data }) => {
   const font = findCurrentData(data.FontObj && data.FontObj);
   const fontProperties = font && font?.Properties;
 
-
-  const size = Size || 1;
+
+
+  const dataAltId = "ribbon-height";
+
+
+
+  const divWidth = document.getElementById(data.ID + "-title")?.getBoundingClientRect().width;
+  const titleDivHeight = document.getElementById(data.ID + "-title")?.getBoundingClientRect().height;
+  const divHeight = document.getElementById("ribbon-height")?.getBoundingClientRect().height;
+  // useEffect(() => {
+  //   setWidthRemaining(divWidth)
+  //   if (divHeight) {
+  //     console.log({ divHeight })
+  //     setHeightRemaining(`${divHeight + titleDivHeight}px`);
+  //   }
+  // }, [data?.ID]);
+
+  const size = Size || 2;
+
+  console.log("ribbon", data, findLongestID(data))
+
+  console.log(divWidth)
 
   return (
-    <div id={data?.ID} className={`col-${size}`}>
+    <div id={data?.ID} style={{ width: divWidth + "px" }}>
       <div
         style={{
           border: `1px solid ${rgbColor(BorderCol)}`,
           borderTop: 0,
           position: 'relative',
-          height: '100%',
+          width: divWidth + "px",
           alignItems: 'start',
-          ...customStyle
+          ...customStyle,
+          height: (divHeight + titleDivHeight + 10) + "px",
         }}
+        id={data?.ID + "-ribbon"}
         className='row'
       >
         {Object.keys(updatedData).map((key, index) => {
-          return <SelectComponent key={index} data={{...updatedData[key], FontObj: data.FontObj}} />;
+          return <SelectComponent key={index} data={{ ...updatedData[key], FontObj: data.FontObj }} />;
         })}
 
         <div
-          style={{
-            backgroundColor: 'rgb(204, 204, 204)',
+        >
+          <p id={data.ID + "-title"} style={{
             position: 'absolute',
             bottom: 0,
-            width: '100%',
-
-          }}
-        >
-          <p id={data.ID-"title"} style={{
+            backgroundColor: 'rgb(204, 204, 204)',
             margin: 0, fontWeight: 'bolder', fontFamily: fontProperties?.PName,
             fontSize: fontProperties?.Size
               ? `${fontProperties.Size * fontScale}px`
               : `${12 * fontScale}px`,
+            minWidthidth: "min-content",
+            paddingLeft: "10px",
+            paddingRight: "10px"
           }} className='text-center'>
             {Title}
           </p>

diff --git a/src/components/Ribbon/RibbonItem.jsx b/src/components/Ribbon/RibbonItem.jsx
@@ -21,9 +21,10 @@ const CustomRibbonItem = ({ data }) => {
 
   return (
     <div
-      id={data?.ID}
-      style={{ display: 'flex', justifyContent: 'center', ...customStyles, height: heightRemaining, }}
-      className={`col-${size}`}
+     data-alt-id={data?.ID}
+      id="ribbon-height"
+      style={{ display: 'flex', justifyContent: 'center', ...customStyles, }}
+      // className={`col-${size}`}
     >
       {Object.keys(updatedData).map((key, index) => {
         return <SelectComponent key={index} data={{...updatedData[key], FontObj: data.FontObj}} />;

diff --git a/src/components/Ribbon/index.jsx b/src/components/Ribbon/index.jsx
@@ -34,7 +34,7 @@ const CustomRibbon = ({ data }) => {
       id={data?.ID}
       className='row'
       style={{
-        height: !Size ? '8rem' : Size[0],
+        // height: !Size ? '9rem' : Size[0],
         width: !Size ? parentSize && parentSize[1] : Size && Size[1],
         display: Visible == 0 ? 'none' : 'flex',
         ...customStyles

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -584,4 +584,23 @@ export const getCurrentUrl = () => {
   }
 
   return currentUrl + path;
-};
+};
+
+
+export function findLongestID(obj) {
+  let longestID = "";
+
+  function traverse(item) {
+      if (typeof item === "object" && item !== null) {
+          for (let key in item) {
+              if (key === "ID" && typeof item[key] === "string" && item[key].length > longestID.length) {
+                  longestID = item[key];
+              }
+              traverse(item[key]);
+          }
+      }
+  }
+
+  traverse(obj);
+  return longestID;
+}