@lvce-editor/extension-detail-view 3.59.0 → 3.60.0

package/dist/extensionDetailViewWorkerMain.js

@@ -2538,7 +2538,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     selectedTab: '',
     settings: [],
     settingsButtonEnabled: false,
-    showAdditionalDetailsBreakpoint: 600,
+    showAdditionalDetailsBreakpoint: 700,
     sizeOnDisk: 0,
     sizeValue: 0,
     tabs: [],
@@ -2548,13 +2548,15 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     width,
     readmeUrl: '',
     paddingLeft: 0,
-    paddingRight: 0
+    paddingRight: 0,
+    showSideBar: true,
+    sideBarWidth: 0
   };
   set(uid, state, state);
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.paddingLeft === newState.paddingLeft && oldState.paddingRight === newState.paddingRight;
+  return oldState.paddingLeft === newState.paddingLeft && oldState.paddingRight === newState.paddingRight && oldState.sideBarWidth === newState.sideBarWidth;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -2562,7 +2564,7 @@ const isEqual$2 = (oldState, newState) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.activationEvents === newState.activationEvents && oldState.badge === newState.badge && oldState.categories === newState.categories && oldState.changelogVirtualDom === newState.changelogVirtualDom && oldState.commands === newState.commands && oldState.description === newState.description && oldState.detailsVirtualDom === newState.detailsVirtualDom && oldState.displaySize === newState.displaySize && oldState.extensionId === newState.extensionId && oldState.extensionVersion === newState.extensionVersion && oldState.jsonValidation === newState.jsonValidation && oldState.selectedFeature === newState.selectedFeature && oldState.selectedTab === newState.selectedTab && oldState.settings === newState.settings && oldState.themesMarkdownDom === newState.themesMarkdownDom && oldState.webViews === newState.webViews && oldState.sizeValue === newState.sizeValue;
+  return oldState.activationEvents === newState.activationEvents && oldState.badge === newState.badge && oldState.categories === newState.categories && oldState.changelogVirtualDom === newState.changelogVirtualDom && oldState.commands === newState.commands && oldState.description === newState.description && oldState.detailsVirtualDom === newState.detailsVirtualDom && oldState.displaySize === newState.displaySize && oldState.extensionId === newState.extensionId && oldState.extensionVersion === newState.extensionVersion && oldState.jsonValidation === newState.jsonValidation && oldState.selectedFeature === newState.selectedFeature && oldState.selectedTab === newState.selectedTab && oldState.settings === newState.settings && oldState.themesMarkdownDom === newState.themesMarkdownDom && oldState.webViews === newState.webViews && oldState.sizeValue === newState.sizeValue && oldState.showSideBar === newState.showSideBar;
 };
 
 const User = 1;
@@ -3148,17 +3150,36 @@ const getExtensionIdFromUri = uri => {
   return id;
 };
 
+const interpolate = (value, inMin, inMax, outMin, outMax) => {
+  const clamped = Math.min(Math.max(value, inMin), inMax);
+  const ratio = (clamped - inMin) / (inMax - inMin);
+  const mapped = outMin + ratio * (outMax - outMin);
+  return Math.round(mapped);
+};
+
 const getPadding = width => {
-  if (width < 400) {
+  if (width < 600) {
     return 10;
   }
   if (width < 800) {
-    return 20;
+    return 10;
   }
   if (width < 1200) {
-    return 30;
+    return interpolate(width, 800, 1200, 10, 30);
+  }
+  return 30;
+};
+const getSideBarWidth = width => {
+  if (width < 490) {
+    return 0;
   }
-  return 40;
+  if (width < 650) {
+    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  }
+  if (width < 800) {
+    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  }
+  return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
 };
 
 const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
@@ -3614,6 +3635,8 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     folderSize
   } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin);
   const padding = getPadding(width);
+  const sideBarWidth = getSideBarWidth(width);
+  const showSideBar = sideBarWidth > 0;
   return {
     ...state,
     badge,
@@ -3638,6 +3661,8 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     installationEntries,
     marketplaceEntries,
     name,
+    paddingLeft: padding,
+    paddingRight: padding,
     rating,
     readmeScrollTop,
     readmeUrl,
@@ -3645,11 +3670,11 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     scrollSource: Script,
     scrollToTopButtonEnabled: true,
     selectedTab,
+    showSideBar,
+    sideBarWidth,
     sizeOnDisk: size,
     sizeValue,
-    tabs: enabledTabs,
-    paddingLeft: padding,
-    paddingRight: padding
+    tabs: enabledTabs
   };
 };
 
@@ -3682,11 +3707,13 @@ const renderCss = (oldState, newState) => {
   const {
     uid,
     paddingLeft,
-    paddingRight
+    paddingRight,
+    sideBarWidth
   } = newState;
   const css = createCss({
     ExtensionDetailPaddingLeft: paddingLeft,
-    ExtensionDetailPaddingRight: paddingRight
+    ExtensionDetailPaddingRight: paddingRight,
+    ExtensionDetailSideBarWidth: sideBarWidth
   });
   return ['Viewlet.setCss', uid, css];
 };
@@ -3857,12 +3884,12 @@ const getChildCount = (additionalDetails, scrollToTopEnabled) => {
   }
   return count;
 };
-const getDetailsVirtualDom = (sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories$1, resources$1, showAdditionalDetailsBreakpoint, installationEntries, marketplaceEntries, hasReadme) => {
+const getDetailsVirtualDom = (sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories$1, resources$1, showAdditionalDetailsBreakpoint, installationEntries, marketplaceEntries, hasReadme, showSideBar) => {
   const firstHeading = installation();
   const secondHeading = marketplace();
   const thirdHeading = categories();
   const fourthHeading = resources();
-  const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
+  const showAdditionalDetails = showSideBar;
   const childCount = getChildCount(showAdditionalDetails);
   const contentDom = hasReadme ? sanitizedReadmeHtml : [{
     type: VirtualDomElements.Div,
@@ -3934,7 +3961,7 @@ const getFeaturesVirtualDom = (features, selectedFeature, state) => {
 const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab, width, scrollToTopButtonEnabled, categories, resources, breakpoint, changelogDom, state) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories, resources, breakpoint, state.installationEntries, state.marketplaceEntries, state.hasReadme);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories, resources, breakpoint, state.installationEntries, state.marketplaceEntries, state.hasReadme, state.showSideBar);
     case Features:
       return getFeaturesVirtualDom(state.features, state.selectedFeature, state);
     case Changelog:
@@ -4236,9 +4263,16 @@ const renderEventListeners = () => {
 };
 
 const resize = (state, dimensions) => {
+  const padding = getPadding(dimensions.width);
+  const sideBarWidth = getSideBarWidth(dimensions.width);
+  const showSideBar = sideBarWidth > 0;
   return {
     ...state,
-    ...dimensions
+    ...dimensions,
+    showSideBar,
+    paddingLeft: padding,
+    paddingRight: padding,
+    sideBarWidth
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.59.0",
+  "version": "3.60.0",
   "description": "Extension Detail View Worker",
   "license": "MIT",
   "author": "Lvce Editor",