@eeacms/volto-tabs-block 1.2.11 → 1.3.1

package/src/less/edit.less

@@ -0,0 +1,145 @@
+.inner.tabs_block {
+  margin-bottom: 0;
+
+  .tabs_block {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    margin-bottom: 0;
+  }
+}
+
+.styled.screen-height {
+  .tabs-block {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    > .default.tabs {
+      flex: 1;
+    }
+
+    > .styled {
+      > .default.tabs {
+        flex: 1;
+      }
+    }
+  }
+}
+
+/**
+ ** Edit form style
+ **/
+.tabs-block {
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 0;
+  }
+
+  .blocks-form {
+    width: 100%;
+    // padding-bottom: 0.1rem;
+  }
+
+  .block-wrapper {
+    &:not(:last-child) {
+      margin-bottom: 2rem;
+    }
+  }
+
+  .block {
+    .block-add-button,
+    .delete-button {
+      display: none;
+    }
+
+    .block.selected::before {
+      border-top-left-radius: 0;
+    }
+  }
+
+  .block .block:not(.inner)::before {
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .block.wrapper.multiSelected {
+    .block .block::before {
+      z-index: 1;
+      background-color: rgba(120, 192, 215, 0.375);
+    }
+  }
+
+  .block-toolbar {
+    position: absolute;
+    z-index: 3;
+    right: unset;
+    left: -9px;
+    display: flex;
+    padding: 5px;
+    border: 1px solid #78c0d7bf;
+    border-bottom: 1px solid #fff;
+    margin-top: -45px;
+    background-color: #fff;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+
+    .ui.basic.button {
+      padding: 3px;
+      padding-right: 0;
+      box-shadow: none;
+    }
+
+    .wrapper-column-block {
+      > .ui.basic.button {
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    > .ui.basic.button {
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      svg {
+        color: #134448;
+      }
+    }
+  }
+
+  .blocks-chooser {
+    left: 0;
+    margin-top: 50px;
+  }
+}
+
+.drag-drop-list-widget {
+  .tabs-area {
+    padding: 1em 0;
+
+    [data-rbd-draggable-context-id] {
+      margin-bottom: 0.3em;
+    }
+
+    .drag.handle.wrapper {
+      min-height: auto;
+    }
+
+    .tab-area {
+      display: flex;
+
+      .label {
+        flex-grow: 2;
+        padding-left: 1em;
+      }
+
+      button {
+        flex-grow: 0;
+      }
+    }
+
+    button {
+      cursor: pointer;
+    }
+  }
+}

package/src/less/menu.less

@@ -7,94 +7,58 @@
 .loadAddonVariables();
 
 .tabs-block {
-  &.edit {
-    > .styled > .tabs > .ui.menu {
-      margin: @menuMarginEdit;
-    }
-  }
-
-  .menu-item-count {
-    display: @menuItemCountDisplay;
+  [hidden] {
+    display: none !important;
   }
 
-  > .styled > .tabs > .ui.menu {
-    border: @menuBorder;
-    margin: @menuMargin;
-    background-color: @menuBackgroundColor;
-    border-radius: @menuBorderRadius;
-    box-shadow: @menuBoxShadow;
-    overflow-x: auto;
-
-    &.in-full-width {
-      padding: 0 1rem;
-    }
-
-    &.ui.container > * {
-      margin-bottom: initial !important;
-    }
-
+  > .styled > .tabs > .ui.menu,
+  > .styled > .tabs > .ui.grid > .column > .ui.menu,
+  > .tabs > .ui.menu,
+  > .tabs > .ui.grid > .column > .ui.menu {
     &.menu-hidden {
       display: none;
     }
 
-    &:after {
-      display: none;
+    &.left {
+      justify-content: flex-start;
     }
 
-    .ui.fluid.input {
-      min-width: 80px;
+    &.right {
+      justify-content: flex-end;
     }
 
-    .item {
-      padding: @menuItemPadding;
-      background: @menuItemBackground;
-      color: @menuItemColor;
-      font-family: @menuItemFontFamily;
-      font-weight: @menuItemFontWeight;
-
-      &:not(.menu-title) {
-        font-size: @menuItemFontSize;
-
-        p {
-          font-size: @menuItemFontSize;
-        }
-      }
-
-      .tab-title-input {
-        min-width: 80px;
-        max-width: 500px;
-        align-self: center;
-        border: none;
-        color: @menuActiveItemColor;
-      }
-
-      &:hover {
-        background: @menuItemHoverBackground;
-        color: @menuItemHoverColor;
+    &.center {
+      justify-content: center;
+    }
 
-        &.menu-title {
-          background: @menuTitleHoverBackground;
-          color: @menuTitleHoverColor;
-        }
+    &.space-between {
+      .item.menu-title {
+        margin-right: auto;
       }
+    }
 
-      &.active {
-        background: @menuActiveItemBackground;
-        color: @menuActiveItemColor;
-        font-family: @menuItemFontFamily;
-        font-weight: @menuActiveItemFontWeight;
-
-        &:hover {
-          background: @menuActiveItemHoverBackground;
-          color: @menuActiveItemHoverColor;
+    &.text:not(.vertical) {
+      .item {
+        &:first-child {
+          padding-left: 0;
         }
       }
+    }
 
+    .item {
       &.menu-title {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
+        justify-content: center;
         background: @menuTitleBackgrounnd;
+        font-size: @menuTitleFontSize;
+        font-weight: @menuTitleFontWeight;
+
+        &:hover {
+          background: @menuTitleHoverBackground;
+          color: @menuTitleHoverColor;
+        }
 
         .title {
           color: @menuTitleColor;
@@ -110,9 +74,27 @@
         }
       }
 
-      &::before {
-        width: @menuItemDividerWidth;
-        background: @menuItemDividerBackground;
+      .menu-item-count {
+        display: @menuItemCountDisplay;
+      }
+    }
+
+    .ui.fluid.input {
+      min-width: 80px;
+    }
+  }
+
+  &.horizontal-responsive {
+    .horizontal-responsive.tabs > .ui.menu {
+      overflow: visible;
+      justify-content: space-between;
+
+      .menu-wrapper {
+        display: inherit;
+        overflow: hidden;
+        background: inherit;
+        font-family: inherit;
+        font-weight: inherit;
       }
     }
   }
@@ -136,109 +118,6 @@
       }
     }
   }
-
-  /* MENU POSITION */
-
-  > .styled > .tabs.inline {
-    .menu {
-      &.left {
-        justify-content: flex-start;
-      }
-
-      &.right {
-        justify-content: flex-end;
-      }
-
-      &.center {
-        justify-content: center;
-      }
-
-      &.space-between {
-        .menu-title {
-          margin-right: auto;
-        }
-      }
-
-      .item {
-        &:first-child {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-
-  > .styled > .tabs.side {
-    &.left {
-      .menu {
-        .item {
-          padding-top: 0;
-          padding-left: 0;
-        }
-      }
-    }
-
-    &.right {
-      .menu {
-        .item {
-          padding-top: 0;
-          padding-right: 0;
-
-          &.menu-title {
-            padding-left: @menuItemPadding;
-          }
-        }
-      }
-    }
-
-    .menu {
-      &.left {
-        align-items: flex-start;
-      }
-
-      &.right {
-        align-items: flex-end;
-      }
-
-      &.center {
-        align-items: center;
-      }
-
-      &.space-between {
-        .menu-title {
-          margin-bottom: auto;
-        }
-      }
-    }
-  }
-
-  &.flex-start {
-    > .tabs.side > .ui.menu {
-      justify-content: flex-start;
-    }
-  }
-
-  &.center {
-    > .tabs.side > .ui.menu {
-      justify-content: center;
-    }
-  }
-
-  &.flex-end {
-    > .tabs.side > .ui.menu {
-      justify-content: flex-end;
-    }
-  }
-
-  @media only screen and (max-width: @menuLargestMobileScreen) {
-    > .styled > .side.default.tabs {
-      flex-direction: column;
-
-      > .ui.menu {
-        flex-basis: 100%;
-        order: 0;
-      }
-    }
-  }
 }
 
 .loadAddonOverrides();

package/src/less/menu.variables

@@ -1,10 +1,8 @@
-@menuMargin: 0;
-@menuMarginEdit: 1rem 0;
-@menuBoxShadow: none;
-@menuBackgroundColor: transparent;
-@menuBorder: none;
-@menuBorderRadius: 0.28571429rem;
+/*******************************
+            Tabs menu
+*******************************/
 
+/* Menu title */
 @menuTitleFontSize: 24px;
 @menuTitleFontWeight: normal;
 @menuTitleColor: #013C60;
@@ -12,27 +10,8 @@
 @menuTitleHoverColor: #013C60;
 @menuTitleHoverBackground: none;
 
+/* Menu description */
 @menuDescriptionColor: #636363;
 
+/* Menu item */
 @menuItemCountDisplay: none;
-@menuItemDividerWidth: 0;
-@menuItemDividerBackground: rgba(34, 36, 38, 0.1);
-@menuItemFontFamily: 'Raleway', sans-serif;
-@menuItemPadding: 1rem;
-
-@menuFirstItemPadding: @menuItemPadding;
-
-@menuItemFontSize: 16px;
-@menuItemFontWeight: normal;
-@menuItemColor: #636363;
-@menuItemBackground: none;
-@menuItemHoverColor: #878F93;
-@menuItemHoverBackground: none;
-
-@menuActiveItemFontWeight: normal;
-@menuActiveItemColor: #04A77D;
-@menuActiveItemBackground: none;
-@menuActiveItemHoverColor: #04c290;
-@menuActiveItemHoverBackground: none;
-
-@menuLargestMobileScreen: 767px;

package/src/less/tabs.less

@@ -0,0 +1,65 @@
+@import './globals.less';
+
+@addon: 'volto-addons';
+@addontype: 'tabsblock';
+@addonelement: 'tabs';
+
+.loadAddonVariables();
+
+.tabs-block {
+  > .styled {
+    display: flex !important;
+    flex: 1;
+    flex-flow: column;
+  }
+
+  .ui.segment.tab {
+    padding: @tabPanePadding;
+  }
+
+  .ui.container.tab {
+    padding-top: @verticalPadding;
+    padding-bottom: @verticalPadding;
+  }
+
+  > .styled > .default.tabs,
+  > .default.tabs {
+    display: flex;
+    flex-direction: column;
+
+    > .ui.tab {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+  }
+
+  &.flex-start {
+    > .styled > .default.tabs,
+    > .default.tabs {
+      > .ui.tab {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  &.flex-end {
+    > .styled > .default.tabs,
+    > .default.tabs {
+      > .ui.tab {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &.center {
+    > .styled > .default.tabs,
+    > .default.tabs {
+      > .ui.tab {
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.loadAddonOverrides();

package/src/less/tabs.variables

@@ -0,0 +1,9 @@
+/*******************************
+            Tabs block
+*******************************/
+
+@verticalPadding: 1em;
+@horizontalPadding: 0;
+
+/* Tab pane */
+@tabPanePadding: @verticalPadding @horizontalPadding;

package/src/utils/dimensions.js

@@ -0,0 +1,76 @@
+export function positionedOffset(targetElement, container) {
+  let element = targetElement;
+  const document = element.ownerDocument;
+  if (!document) {
+    return;
+  }
+
+  const documentElement = document.documentElement;
+  if (!documentElement) {
+    return;
+  }
+
+  const HTMLElement = document.defaultView.HTMLElement;
+
+  let top = 0;
+  let left = 0;
+  const height = element.offsetHeight;
+  const width = element.offsetWidth;
+
+  while (!(element === document.body || element === container)) {
+    top += element.offsetTop || 0;
+    left += element.offsetLeft || 0;
+
+    if (element.offsetParent instanceof HTMLElement) {
+      element = element.offsetParent;
+    } else {
+      return;
+    }
+  }
+
+  let scrollHeight;
+  let scrollWidth;
+  let measuredContainer;
+
+  if (
+    !container ||
+    container === document ||
+    container === document.defaultView ||
+    container === document.documentElement ||
+    container === document.body
+  ) {
+    measuredContainer = documentElement;
+    scrollHeight = getDocumentHeight(document.body, documentElement);
+    scrollWidth = getDocumentWidth(document.body, documentElement);
+  } else if (container instanceof HTMLElement) {
+    measuredContainer = container;
+    scrollHeight = container.scrollHeight;
+    scrollWidth = container.scrollWidth;
+  } else {
+    return;
+  }
+
+  const bottom = scrollHeight - (top + height);
+  const right = scrollWidth - (left + width);
+  return { top, left, bottom, right, _container: measuredContainer };
+}
+
+export function getDocumentHeight(documentBody, documentElement) {
+  return Math.max(
+    documentBody.scrollHeight,
+    documentElement.scrollHeight,
+    documentBody.offsetHeight,
+    documentElement.offsetHeight,
+    documentElement.clientHeight,
+  );
+}
+
+export function getDocumentWidth(documentBody, documentElement) {
+  return Math.max(
+    documentBody.scrollWidth,
+    documentElement.scrollWidth,
+    documentBody.offsetWidth,
+    documentElement.offsetWidth,
+    documentElement.clientWidth,
+  );
+}

package/src/utils/index.js

@@ -1,3 +1,43 @@
 import SimpleMarkdown from './SimpleMarkdown';
 
-export { SimpleMarkdown };
+const getMenuPosition = (data) => {
+  const positions = {
+    top: 'top',
+    bottom: 'bottom',
+    'left side': 'left',
+    'right side': 'right',
+  };
+  const position = positions[data.menuPosition];
+  if (['left', 'right'].includes(position)) {
+    return {
+      vertical: true,
+      direction: position,
+    };
+  }
+  if (['bottom'].includes(position)) {
+    return {
+      attached: position,
+    };
+  }
+  return {};
+};
+
+const toggleItem = (container, item, hidden) => {
+  // Set visibility to hidden, instead of .hidden attribute
+  // so we can still calculate distance accurately
+  item.style.visibility = hidden ? 'hidden' : '';
+  // item.style.display = hidden ? 'none' : 'flex';
+  // Get tab-item name, if present, so we can match it up with the dropdown menu
+  const itemData = item.getAttribute('item-data');
+  if (itemData) {
+    const itemToHide = container.querySelector(
+      `[underline-item-data="${itemData}"]`,
+    );
+    if (itemToHide instanceof HTMLElement) {
+      itemToHide.hidden = !hidden;
+    }
+  }
+};
+
+export { SimpleMarkdown, getMenuPosition, toggleItem };
+export * from './dimensions';