Web: Files: Public-room: added navigation button, added new icons

packages/client/src/pages/Home/Section/Header/index.js

@@ -113,6 +113,7 @@ const StyledContainer = styled.div`
 
   .header-container {
     min-height: 33px;
+    align-items: center;
 
     ${(props) =>
       props.hideContextMenuInsideArchiveRoom &&
@@ -126,6 +127,21 @@ const StyledContainer = styled.div`
     @media ${mobile} {
       height: 53px;
     }
+
+    .navigation_button {
+      display: block;
+      margin: 0 16px;
+      overflow: visible;
+
+      @media ${tablet} {
+        display: ${({ isInfoPanelVisible }) =>
+          isInfoPanelVisible ? "none" : "block"};
+      }
+
+      @media ${mobile} {
+        display: none;
+      }
+    }
   }
 `;
 
@@ -233,6 +249,8 @@ const SectionHeaderContent = (props) => {
     setLeaveRoomDialogVisible,
     inRoom,
     onClickCreateRoom,
+    onCreateAndCopySharedLink,
+    showNavigationButton,
   } = props;
 
   const navigate = useNavigate();
@@ -960,6 +978,10 @@ const SectionHeaderContent = (props) => {
       .catch((err) => toastr.error(err));
   }, [resendInvitesAgain]);
 
+  const onNavigationButtonClick = () => {
+    onCreateAndCopySharedLink(selectedFolder, t);
+  };
+
   const headerMenu = isAccountsPage
     ? getAccountsHeaderMenu(t)
     : getHeaderMenu(t);
@@ -1045,6 +1067,10 @@ const SectionHeaderContent = (props) => {
     ? getLogoFromPath(whiteLabelLogoUrls[5]?.path?.dark)
     : getLogoFromPath(whiteLabelLogoUrls[5]?.path?.light);
 
+  const navigationButtonLabel = showNavigationButton
+    ? t("Files:ShareRoom")
+    : null;
+
   return (
     <Consumer key="header">
       {(context) => (
@@ -1108,6 +1134,8 @@ const SectionHeaderContent = (props) => {
                 showRootFolderTitle={insideTheRoom}
                 currentDeviceType={currentDeviceType}
                 isFrame={isFrame}
+                navigationButtonLabel={navigationButtonLabel}
+                onNavigationButtonClick={onNavigationButtonClick}
               />
             </div>
           )}
@@ -1230,7 +1258,7 @@ export default inject(
       canCopyPublicLink,
     } = selectedFolderStore;
 
-    const selectedFolder = { ...selectedFolderStore };
+    const selectedFolder = selectedFolderStore.getSelectedFolder();
 
     const {
       enablePlugins,
@@ -1252,6 +1280,7 @@ export default inject(
       onClickArchive,
       onClickReconnectStorage,
       onCopyLink,
+      onCreateAndCopySharedLink,
     } = contextOptionsStore;
 
     const canRestoreAll = isArchiveFolder && roomsForRestore.length > 0;
@@ -1293,6 +1322,12 @@ export default inject(
 
     const { isPublicRoom, primaryLink, setExternalLink } = publicRoomStore;
 
+    const showNavigationButton =
+      !isPublicRoom &&
+      !isArchiveFolder &&
+      canCopyPublicLink &&
+      (isPublicRoomType || isCustomRoomType);
+
     return {
       isGracePeriod,
       setInviteUsersWarningDialogVisible,
@@ -1410,6 +1445,8 @@ export default inject(
       currentDeviceType,
       setLeaveRoomDialogVisible,
       inRoom,
+      onCreateAndCopySharedLink,
+      showNavigationButton,
     };
   }
 )(

packages/client/src/store/ContextOptionsStore.js

@@ -360,6 +360,19 @@ class ContextOptionsStore {
     toastr.success(t("Translations:LinkCopySuccess"));
   };
 
+  onCreateAndCopySharedLink = async (item, t) => {
+    const primaryLink = await this.filesStore.getPrimaryLink(item.id);
+
+    if (primaryLink) {
+      copy(primaryLink.sharedTo.shareLink);
+      item.shared
+        ? toastr.success(t("Files:LinkSuccessfullyCopied"))
+        : toastr.success(t("Files:LinkSuccessfullyCreatedAndCopied"));
+
+      this.publicRoomStore.setExternalLink(primaryLink);
+    }
+  };
+
   onClickLinkEdit = (item) => {
     const { setConvertItem, setConvertDialogVisible } = this.dialogsStore;
     const canConvert =
@@ -1299,18 +1312,7 @@ class ContextOptionsStore {
           isArchive ||
           !item.canCopyPublicLink ||
           !isPublicRoomType,
-        onClick: async () => {
+        onClick: () => onCreateAndCopySharedLink(item, t),
-          const primaryLink = await this.filesStore.getPrimaryLink(item.id);
-
-          if (primaryLink) {
-            copy(primaryLink.sharedTo.shareLink);
-            item.shared
-              ? toastr.success(t("Files:LinkSuccessfullyCopied"))
-              : toastr.success(t("Files:LinkSuccessfullyCreatedAndCopied"));
-
-            this.publicRoomStore.setExternalLink(primaryLink);
-          }
-        },
         // onLoad: () => this.onLoadLinks(t, item),
       },
       {

packages/shared/components/navigation/Navigation.styled.ts

@@ -178,17 +178,10 @@ const StyledContainer = styled.div<{
     gap: 8px;
 
     .title-icon {
-      min-width: 17px;
+      min-width: 16px;
-      min-height: 17px;
+      min-height: 16px;
-      width: 17px;
+      width: 16px;
-      height: 17px;
+      height: 16px;
-
-      svg {
-        path,
-        rect {
-          fill: ${({ theme }) => theme.navigation.publicIcon};
-        }
-      }
     }
   }
 
@@ -281,6 +274,10 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>`
 
   height: 32px;
 
+  @media ${tablet} {
+    flex-direction: row-reverse;
+  }
+
   .add-button {
     ${(props) =>
       props.theme.interfaceDirection === "rtl"

packages/shared/components/navigation/Navigation.tsx

@@ -52,7 +52,8 @@ const Navigation = ({
   titleIcon,
   currentDeviceType,
   rootRoomTitle,
-
+  navigationButtonLabel,
+  onNavigationButtonClick,
   ...rest
 }: INavigationProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -253,6 +254,8 @@ const Navigation = ({
               isFrame={isFrame}
               isPublicRoom={isPublicRoom}
               isTrashFolder={isTrashFolder}
+              navigationButtonLabel={navigationButtonLabel}
+              onNavigationButtonClick={onNavigationButtonClick}
             />
           </StyledContainer>
           {isDesktop && isTrashFolder && !isEmptyPage && (

packages/shared/components/navigation/Navigation.types.ts

@@ -60,6 +60,8 @@ export interface IControlButtonProps {
   isPublicRoom?: boolean;
   isTrashFolder?: boolean;
   isMobile?: boolean;
+  navigationButtonLabel?: string;
+  onNavigationButtonClick?: () => void;
 }
 
 export interface ITextProps {
@@ -160,4 +162,6 @@ export interface INavigationProps {
   titleIcon: string;
   currentDeviceType: DeviceType;
   rootRoomTitle: string;
+  navigationButtonLabel?: string;
+  onNavigationButtonClick?: () => void;
 }

packages/shared/components/navigation/sub-components/ControlBtn.tsx

@@ -6,6 +6,7 @@ import { IControlButtonProps } from "../Navigation.types";
 import ToggleInfoPanelButton from "./ToggleInfoPanelBtn";
 import PlusButton from "./PlusBtn";
 import ContextButton from "./ContextBtn";
+import { Button, ButtonSize } from "../../button";
 
 const ControlButtons = ({
   isRootFolder,
@@ -24,6 +25,8 @@ const ControlButtons = ({
   isPublicRoom,
   isTrashFolder,
   isMobile,
+  navigationButtonLabel,
+  onNavigationButtonClick,
 }: IControlButtonProps) => {
   const toggleInfoPanelAction = () => {
     toggleInfoPanel?.();
@@ -124,6 +127,15 @@ const ControlButtons = ({
           )}
         </>
       )}
+
+      {navigationButtonLabel && (
+        <Button
+          className="navigation_button"
+          label={navigationButtonLabel}
+          size={ButtonSize.extraSmall}
+          onClick={onNavigationButtonClick}
+        />
+      )}
     </StyledControlButtonContainer>
   );
 };

packages/shared/themes/base.ts

@@ -1965,7 +1965,6 @@ export const getBaseTheme = () => {
       expanderColor: black,
       background: white,
       rootFolderTitleColor: "#A3A9AE",
-      publicIcon: black,
       boxShadow: " 0px 12px 40px 0px #040F1B1F",
 
       icon: {

packages/shared/themes/dark.ts

@@ -1935,7 +1935,6 @@ const Dark: TTheme = {
     expanderColor: "#eeeeee",
     background: black,
     rootFolderTitleColor: "#ADADAD",
-    publicIcon: "#858585",
     boxShadow: "0px 12px 40px 0px #00000066",
 
     icon: {

public/images/icons/32/room/public.svg

@@ -1,11 +1,11 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_858_45020)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4719 23.8817C22.797 23.7077 23 23.3688 23 23V9C23 8.6312 22.797 8.29234 22.4719 8.11832C22.1467 7.94431 21.7522 7.96338 21.4453 8.16795L15.6972 12H10C9.44771 12 9 12.4477 9 13V19C9 19.5523 9.44771 20 10 20H11.382L13.1056 23.4472L14.8944 22.5528L13.618 20L14 20L15.6972 20L21.4453 23.832C21.7522 24.0366 22.1467 24.0557 22.4719 23.8817ZM14 18H11V14H14V18ZM16 14V18C16.1974 18 16.3904 18.0584 16.5547 18.1679L21 21.1315V10.8685L16.5547 13.832C16.3904 13.9416 16.1974 14 16 14Z" fill="#22C386"/>
-</g>
 <rect x="1" y="1" width="30" height="30" rx="5" stroke="#22C386" stroke-width="2"/>
+<g clip-path="url(#clip0_4152_179192)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3372 21.6372C9.61662 20.9134 9.04754 20.071 8.63 19.11C8.21 18.1433 8 17.1067 8 16C8 14.8933 8.21 13.8567 8.63 12.89C9.05 11.9233 9.62333 11.0767 10.35 10.35C11.0767 9.62333 11.9267 9.05 12.9 8.63C13.8733 8.21 14.9067 8 16 8C17.1067 8 18.1433 8.21 19.11 8.63C20.0767 9.05 20.9233 9.62333 21.65 10.35C22.3767 11.0767 22.95 11.9233 23.37 12.89C23.79 13.8567 24 14.8933 24 16C24 17.1067 23.79 18.1433 23.37 19.11C22.95 20.0767 22.3767 20.9233 21.65 21.65C20.9233 22.3767 20.0733 22.95 19.1 23.37C18.1267 23.79 17.0933 24 16 24C14.8933 24 13.8567 23.79 12.89 23.37C11.929 22.9525 11.0866 22.3834 10.3628 21.6628C10.3585 21.6585 10.3543 21.6543 10.35 21.65C10.3457 21.6457 10.3415 21.6415 10.3372 21.6372ZM13.29 20.67C13.47 21.1433 13.68 21.6 13.92 22.04C13.8733 22.025 13.827 22.0095 13.781 21.9935C13.0907 21.7537 12.4738 21.4025 11.93 20.94C11.8575 20.8783 11.7865 20.8153 11.717 20.7509C11.2307 20.3003 10.8183 19.7833 10.48 19.2H12.84C12.96 19.7067 13.11 20.1967 13.29 20.67ZM12.43 16.81C12.45 17.07 12.48 17.3333 12.52 17.6H9.8C9.73333 17.3333 9.68333 17.07 9.65 16.81C9.64583 16.7775 9.64193 16.7448 9.63828 16.712C9.61276 16.4823 9.6 16.245 9.6 16C9.6 15.7975 9.60872 15.6002 9.62616 15.4081C9.63466 15.3397 9.64594 15.2703 9.66 15.2H9.64873C9.64915 15.1967 9.64957 15.1933 9.65 15.19C9.68333 14.93 9.73333 14.6667 9.8 14.4H12.52C12.48 14.6667 12.45 14.93 12.43 15.19C12.4297 15.1933 12.4295 15.1967 12.4292 15.2H12.42C12.4067 15.3333 12.4 15.4633 12.4 15.59L12.4 16C12.4 16.28 12.41 16.55 12.43 16.81ZM16.8 21.0595C16.8341 20.9933 16.8674 20.9268 16.9 20.86C17.1533 20.34 17.36 19.7867 17.52 19.2H14.48C14.62 19.7133 14.7957 20.2011 15.0072 20.6634C15.0374 20.7295 15.0683 20.795 15.1 20.86C15.3217 21.315 15.5791 21.7547 15.8722 22.1791C15.9141 22.2397 15.9567 22.3 16 22.36C16 22.36 16 22.36 16 22.36C16.1467 22.1467 16.2867 21.93 16.42 21.71C16.5533 21.49 16.68 21.2667 16.8 21.04V21.0595ZM17.88 17.6C17.92 17.3333 17.95 17.07 17.97 16.81C17.99 16.55 18 16.28 18 16C18 15.72 17.99 15.45 17.97 15.19C17.95 14.93 17.92 14.6667 17.88 14.4H14.12C14.08 14.6667 14.05 14.93 14.03 15.19C14.01 15.45 14 15.72 14 16C14 16.245 14.0077 16.4823 14.023 16.712C14.0252 16.7448 14.0275 16.7775 14.03 16.81C14.05 17.07 14.08 17.3333 14.12 17.6H17.88ZM17.52 12.8C17.36 12.2133 17.1533 11.66 16.9 11.14C16.6467 10.62 16.3467 10.12 16 9.64C15.8533 9.85333 15.7133 10.07 15.58 10.29C15.4467 10.51 15.32 10.7333 15.2 10.96V10.9405C15.1659 11.0067 15.1326 11.0732 15.1 11.14C14.8467 11.66 14.64 12.2133 14.48 12.8H17.52ZM19.5708 16.8C19.5705 16.8033 19.5703 16.8067 19.57 16.81C19.55 17.07 19.52 17.3333 19.48 17.6H22.2C22.2667 17.3333 22.3167 17.07 22.35 16.81C22.3504 16.8067 22.3509 16.8033 22.3513 16.8H22.34C22.3541 16.7297 22.3653 16.6603 22.3738 16.5919C22.3913 16.3998 22.4 16.2025 22.4 16C22.4 15.72 22.3833 15.45 22.35 15.19C22.3167 14.93 22.2667 14.6667 22.2 14.4H19.48C19.515 14.6333 19.5423 14.8641 19.562 15.0923C19.5648 15.1249 19.5675 15.1575 19.57 15.19C19.59 15.45 19.6 15.72 19.6 16V16.41C19.6 16.5367 19.5933 16.6667 19.58 16.8H19.5708ZM12.84 12.8H10.48C10.8667 12.1333 11.35 11.5533 11.93 11.06C12.51 10.5667 13.1733 10.2 13.92 9.96C13.68 10.4 13.47 10.8567 13.29 11.33C13.11 11.8033 12.96 12.2933 12.84 12.8ZM20.07 11.06C20.65 11.5533 21.1333 12.1333 21.52 12.8H19.16C19.04 12.2933 18.89 11.8033 18.71 11.33C18.6987 11.3004 18.6874 11.2709 18.6759 11.2414C18.5036 10.7996 18.305 10.3725 18.08 9.96C18.8267 10.2 19.49 10.5667 20.07 11.06ZM19.16 19.2H21.52C21.1333 19.8667 20.65 20.4467 20.07 20.94C19.49 21.4333 18.8267 21.8 18.08 22.04C18.32 21.6 18.53 21.1433 18.71 20.67C18.89 20.1967 19.04 19.7067 19.16 19.2Z" fill="#22C386"/>
+</g>
 <defs>
-<clipPath id="clip0_858_45020">
+<clipPath id="clip0_4152_179192">
-<rect width="16" height="16" fill="white" transform="translate(9 8)"/>
+<rect width="16" height="16" fill="white" transform="translate(8 8)"/>
 </clipPath>
 </defs>
 </svg>

public/images/public-room.react.svg

@@ -1,5 +1,10 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 11.4258V5.57168C8 5.2175 8.18735 4.88974 8.49253 4.71001L14.4925 1.17638C15.1592 0.783777 16 1.2644 16 2.03805V14.9269C16 15.6988 15.1627 16.1796 14.496 15.7906L8.49601 12.2895C8.18886 12.1103 8 11.7814 8 11.4258Z" fill="#333333"/>
+<circle cx="8" cy="8" r="7.5" fill="#5DC0E8" stroke="#35A5D2"/>
-<rect x="1" y="5" width="6" height="7" rx="1" fill="#333333"/>
+<mask id="mask0_4248_200975" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
-<path d="M3.88202 13L5.1056 15.4472C5.35259 15.9411 5.95326 16.1414 6.44724 15.8944C6.94122 15.6474 7.14144 15.0467 6.89445 14.5527L6.11809 13H3.88202Z" fill="#333333"/>
+<circle cx="8" cy="8" r="7" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4248_200975)">
+<path d="M5.6449 9.65583L6.51076 8.78998C6.9322 8.36853 6.89375 7.67433 6.42834 7.302L4.0747 5.41908C3.89738 5.27723 3.67707 5.19995 3.45 5.19995H1.41499C1.14978 5.19995 0.895425 5.30531 0.707888 5.49284L0.593674 5.60706C0.406138 5.79459 0.300781 6.04895 0.300781 6.31416V6.59995V7.87685C0.300781 7.95861 0.310809 8.04006 0.330639 8.11938L0.974158 10.6935C0.991854 10.7642 1.01724 10.8329 1.04987 10.8981L2.27055 13.3395C2.35561 13.5096 2.4874 13.6519 2.65048 13.7498L5.66327 15.5574C5.81868 15.6507 5.99652 15.7 6.17776 15.7H6.7656C7.09995 15.7 7.41218 15.5329 7.59765 15.2547L8.53283 13.8519C8.64234 13.6876 8.70078 13.4946 8.70078 13.2972V12.9207C8.70078 12.4903 8.42535 12.1081 8.01701 11.972L6.03578 11.3116C5.33055 11.0765 5.11925 10.1815 5.6449 9.65583Z" fill="white"/>
+<path d="M10.2899 2.81452L10.823 2.01494C11.173 1.48988 11.9159 1.41631 12.3621 1.86253L12.8996 2.4L13.5296 3.02998C13.5762 3.07655 13.618 3.1276 13.6545 3.18239L14.9035 5.05588C14.9671 5.15125 15.0138 5.25684 15.0416 5.36804L15.639 7.75746C15.6788 7.9167 15.6788 8.0833 15.639 8.24254L15.0262 10.6935C15.0085 10.7643 14.9831 10.8329 14.9505 10.8982L13.7487 13.3019C13.6519 13.4954 13.495 13.6523 13.3015 13.7491L12.7443 14.0277C11.9801 14.4097 11.1197 13.7195 11.3269 12.8907L12.0386 10.0442C12.1362 9.65382 11.9903 9.24302 11.6684 9.00161L7.52202 5.89181C7.03518 5.52668 6.9846 4.81501 7.41491 4.3847L7.83268 3.96693C7.94246 3.85715 8.07629 3.77444 8.22356 3.72535L9.77411 3.2085C9.98507 3.13818 10.1666 2.99955 10.2899 2.81452Z" fill="white"/>
+</g>
 </svg>