Pārlūkot izejas kodu

replace photoswipe icons

Abhinav 3 gadi atpakaļ
vecāks
revīzija
bf9f088f14

+ 27 - 26
src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import Photoswipe from 'photoswipe';
 import Photoswipe from 'photoswipe';
 import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
 import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
 import classnames from 'classnames';
 import classnames from 'classnames';
-import FavButton from 'components/FavButton';
 import {
 import {
     addToFavorites,
     addToFavorites,
     removeFromFavorites,
     removeFromFavorites,
@@ -49,6 +49,11 @@ import { playVideo, pauseVideo } from 'utils/photoFrame';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import { GalleryContext } from 'pages/gallery';
 import { GalleryContext } from 'pages/gallery';
 import { AppContext } from 'pages/_app';
 import { AppContext } from 'pages/_app';
+import SettingIcon from 'components/icons/SettingIcon';
+import FavoriteIcon from 'components/icons/FavoriteIcon';
+import DownloadIcon from 'components/icons/DownloadIcon';
+import InfoIcon from 'components/icons/InfoIcon';
+import OptionIcon from 'components/icons/OptionIcon-2';
 
 
 const SmallLoadingSpinner = () => (
 const SmallLoadingSpinner = () => (
     <EnteSpinner
     <EnteSpinner
@@ -821,23 +826,26 @@ function PhotoSwipe(props: Iprops) {
                         <div className="pswp__item" />
                         <div className="pswp__item" />
                         <div className="pswp__item" />
                         <div className="pswp__item" />
                     </div>
                     </div>
-                    <div className="pswp__ui pswp__ui--hidden">
+                    <div className="pswp__ui ">
                         <div className="pswp__top-bar">
                         <div className="pswp__top-bar">
                             <div className="pswp__counter" />
                             <div className="pswp__counter" />
-
-                            <button
+                            <div className="pswp-custom">
+                                <OptionIcon className="pswp-custom" />
+                            </div>
+                            {!props.isSharedCollection && (
+                                <div className="pswp-custom">
+                                    <InfoIcon className="pswp-custom" />
+                                </div>
+                            )}
+                            {/* <button
                                 className="pswp__button pswp__button--close"
                                 className="pswp__button pswp__button--close"
                                 title={constants.CLOSE}
                                 title={constants.CLOSE}
-                            />
+                            /> */}
 
 
                             {props.enableDownload && (
                             {props.enableDownload && (
-                                <button
-                                    className="pswp-custom download-btn"
-                                    title={constants.DOWNLOAD}
-                                    onClick={() =>
-                                        downloadFileHelper(photoSwipe.currItem)
-                                    }
-                                />
+                                <div className="pswp-custom">
+                                    <DownloadIcon className="pswp-custom" />
+                                </div>
                             )}
                             )}
                             <button
                             <button
                                 className="pswp__button pswp__button--fs"
                                 className="pswp__button pswp__button--fs"
@@ -849,21 +857,14 @@ function PhotoSwipe(props: Iprops) {
                             />
                             />
                             {!props.isSharedCollection &&
                             {!props.isSharedCollection &&
                                 !props.isTrashCollection && (
                                 !props.isTrashCollection && (
-                                    <FavButton
-                                        size={44}
-                                        isClick={isFav}
-                                        onClick={() => {
-                                            onFavClick(photoSwipe?.currItem);
-                                        }}
-                                    />
+                                    <div className="pswp-custom">
+                                        <FavoriteIcon />
+                                    </div>
                                 )}
                                 )}
-                            {!props.isSharedCollection && (
-                                <button
-                                    className="pswp-custom info-btn"
-                                    title={constants.INFO}
-                                    onClick={handleOpenInfo}
-                                />
-                            )}
+                            <div className="pswp-custom">
+                                <SettingIcon />
+                            </div>
+
                             <div className="pswp__preloader">
                             <div className="pswp__preloader">
                                 <div className="pswp__preloader__icn">
                                 <div className="pswp__preloader__icn">
                                     <div className="pswp__preloader__cut">
                                     <div className="pswp__preloader__cut">

+ 22 - 0
src/components/icons/FavoriteIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function FavoriteIcon(props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={props.height}
+            viewBox={props.viewBox}
+            width={props.width}>
+            <path
+                d="M16.6484 6.04L11.8084 5.62L9.91836 1.17C9.57836 0.36 8.41836 0.36 8.07836 1.17L6.18836 5.63L1.35836 6.04C0.478364 6.11 0.118364 7.21 0.788364 7.79L4.45836 10.97L3.35836 15.69C3.15836 16.55 4.08836 17.23 4.84836 16.77L8.99836 14.27L13.1484 16.78C13.9084 17.24 14.8384 16.56 14.6384 15.7L13.5384 10.97L17.2084 7.79C17.8784 7.21 17.5284 6.11 16.6484 6.04ZM8.99836 12.4L5.23836 14.67L6.23836 10.39L2.91836 7.51L7.29836 7.13L8.99836 3.1L10.7084 7.14L15.0884 7.52L11.7684 10.4L12.7684 14.68L8.99836 12.4Z"
+                fill="white"
+            />
+        </svg>
+    );
+}
+
+FavoriteIcon.defaultProps = {
+    height: 24,
+    width: 24,
+    viewBox: '0 0 24 24',
+};

+ 22 - 0
src/components/icons/InfoIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function InfoIcon(props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={props.height}
+            viewBox={props.viewBox}
+            width={props.width}>
+            <path
+                d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM9 14H11V16H9V14ZM10.61 4.04C8.55 3.74 6.73 5.01 6.18 6.83C6 7.41 6.44 8 7.05 8H7.25C7.66 8 7.99 7.71 8.13 7.33C8.45 6.44 9.4 5.83 10.43 6.05C11.38 6.25 12.08 7.18 12 8.15C11.9 9.49 10.38 9.78 9.55 11.03C9.55 11.04 9.54 11.04 9.54 11.05C9.53 11.07 9.52 11.08 9.51 11.1C9.42 11.25 9.33 11.42 9.26 11.6C9.25 11.63 9.23 11.65 9.22 11.68C9.21 11.7 9.21 11.72 9.2 11.75C9.08 12.09 9 12.5 9 13H11C11 12.58 11.11 12.23 11.28 11.93C11.3 11.9 11.31 11.87 11.33 11.84C11.41 11.7 11.51 11.57 11.61 11.45C11.62 11.44 11.63 11.42 11.64 11.41C11.74 11.29 11.85 11.18 11.97 11.07C12.93 10.16 14.23 9.42 13.96 7.51C13.72 5.77 12.35 4.3 10.61 4.04V4.04Z"
+                fill="white"
+            />
+        </svg>
+    );
+}
+
+InfoIcon.defaultProps = {
+    height: 24,
+    width: 24,
+    viewBox: '0 0 24 24',
+};

+ 1 - 2
src/components/icons/OptionIcon-2.tsx

@@ -7,8 +7,7 @@ export default function OptionIcon(props) {
             height={props.height}
             height={props.height}
             viewBox={props.viewBox}
             viewBox={props.viewBox}
             width={props.width}
             width={props.width}
-            fill="currentColor"
-            style={{ transform: 'rotate(90deg)' }}>
+            fill="currentColor">
             <path d="M0 0h24v24H0V0z" fill="none" />
             <path d="M0 0h24v24H0V0z" fill="none" />
             <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />{' '}
             <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />{' '}
         </svg>
         </svg>

+ 22 - 0
src/components/icons/SettingIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function SettingIcon(props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={props.height}
+            viewBox={props.viewBox}
+            width={props.width}>
+            <path
+                d="M0 15C0 15.55 0.45 16 1 16H6V14H1C0.45 14 0 14.45 0 15ZM0 3C0 3.55 0.45 4 1 4H10V2H1C0.45 2 0 2.45 0 3ZM10 17V16H17C17.55 16 18 15.55 18 15C18 14.45 17.55 14 17 14H10V13C10 12.45 9.55 12 9 12C8.45 12 8 12.45 8 13V17C8 17.55 8.45 18 9 18C9.55 18 10 17.55 10 17ZM4 7V8H1C0.45 8 0 8.45 0 9C0 9.55 0.45 10 1 10H4V11C4 11.55 4.45 12 5 12C5.55 12 6 11.55 6 11V7C6 6.45 5.55 6 5 6C4.45 6 4 6.45 4 7ZM18 9C18 8.45 17.55 8 17 8H8V10H17C17.55 10 18 9.55 18 9ZM13 6C13.55 6 14 5.55 14 5V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 2H14V1C14 0.45 13.55 0 13 0C12.45 0 12 0.45 12 1V5C12 5.55 12.45 6 13 6Z"
+                fill="white"
+            />
+        </svg>
+    );
+}
+
+SettingIcon.defaultProps = {
+    height: 24,
+    width: 24,
+    viewBox: '0 0 24 24',
+};

+ 1 - 1
src/components/photoFrame/CollectionInfo.tsx

@@ -26,7 +26,7 @@ export default function collectionInfo(props: Iprops) {
                 </Typography>
                 </Typography>
             </div>
             </div>
             <IconButton>
             <IconButton>
-                <OptionIcon />
+                <OptionIcon style={{ transform: 'rotate(90deg)' }} />
             </IconButton>
             </IconButton>
         </Header>
         </Header>
     );
     );

+ 4 - 1
src/styles/global.css

@@ -156,9 +156,12 @@ svg {
     margin:auto;
     margin:auto;
 }
 }
 .pswp-custom {
 .pswp-custom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     opacity: 0.75;
     opacity: 0.75;
     transition: opacity .2s;
     transition: opacity .2s;
-    display: inline-block;
+    padding-top: 4px;
     float: right;
     float: right;
     cursor: pointer;
     cursor: pointer;
     border: none;
     border: none;