mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-26 02:02:24 +01:00
feature (icons): placeholder icons
This commit is contained in:
Mickael Kerjean
parent
b60a91abb7
commit
cad6fe3420
5 changed files with 91 additions and 11 deletions
36
client/assets/icons/empty_folder.svg
Normal file
36
client/assets/icons/empty_folder.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="139" viewBox="0 0 146 139" fill="none">
|
||||
|
||||
<path d="M34.8913 36.6948H106.991C109.891 36.6948 112.091 38.8948 112.091 41.7948V87.4948C112.091 90.3948 109.891 92.5948 106.991 92.5948H34.8913C31.9913 92.5948 29.7913 90.3948 29.7913 87.4948V41.7948C29.7913 38.8948 32.1913 36.6948 34.8913 36.6948Z" fill="#909090"/>
|
||||
|
||||
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M117.691 46.4948H87.2911C84.2911 46.4948 81.4911 47.4948 79.1911 49.3948L71.1911 55.8948C68.9911 57.6948 66.0911 58.7948 63.0911 58.7948H28.6911C25.1911 58.7948 22.3911 61.6948 22.3911 65.0948C22.3911 65.3948 22.3911 65.6948 22.4911 65.9948L28.7911 99.6948C29.2911 102.895 31.9911 105.195 35.0911 105.195H108.691C111.891 105.195 114.491 102.995 114.991 99.7948L123.891 53.6948C124.491 50.1948 122.191 47.0948 118.691 46.3948C118.391 46.4948 117.991 46.4948 117.691 46.4948Z" fill="#ffffff"/>
|
||||
</g>
|
||||
<path d="M58.8913 81.3949C60.6913 81.3949 62.1913 79.8949 62.1913 78.0949C62.1913 76.2949 60.6913 74.7949 58.8913 74.7949C57.0913 74.7949 55.5913 76.2949 55.5913 78.0949C55.5913 79.8949 57.0913 81.3949 58.8913 81.3949Z" fill="#909090"/>
|
||||
<path d="M84.5913 81.2948C86.3913 81.2948 87.8913 79.7948 87.8913 77.9948C87.8913 76.1948 86.3913 74.6948 84.5913 74.6948C82.7913 74.6948 81.2913 76.1948 81.2913 77.9948C81.2913 79.8948 82.7913 81.2948 84.5913 81.2948Z" fill="#909090"/>
|
||||
|
||||
|
||||
<path d="M67.6912 57.6948C64.0912 50.6948 63.2912 42.2948 65.6912 34.6948C67.9912 27.0948 73.4912 20.5948 80.2912 16.8948C82.3912 15.7948 84.7912 14.8948 87.1912 14.7948C89.5912 14.6948 92.1912 15.4948 93.7912 17.4948C95.3912 19.2948 95.6912 22.2948 94.3912 24.2948C92.9912 26.1948 90.1912 26.9948 87.8912 26.3948C84.1912 25.6948 81.1912 22.7948 80.2912 19.2948C79.3912 15.7948 80.5912 11.6948 83.3912 9.3948C85.1912 7.7948 87.6912 6.8948 89.9912 6.1948C101.191 2.8948 113.391 2.4948 124.791 4.9948" stroke="#57595A" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="4 4"/>
|
||||
<path d="M74.8912 84.8948H68.6912V86.3948H74.8912V84.8948Z" fill="#909090"/>
|
||||
<path d="M130.791 2.39475C130.691 3.89475 130.591 5.29475 129.491 5.59475C128.391 5.89475 127.891 4.89475 127.191 3.49475C126.491 2.19475 126.891 0.794754 128.091 0.494754C129.191 0.194754 130.991 0.594754 130.791 2.39475Z" fill="#909090"/>
|
||||
<path d="M129.591 9.59477C129.891 7.79477 130.191 6.79477 129.191 6.29477C128.091 5.79477 127.391 6.69477 126.191 7.89477C125.191 8.99477 125.791 10.5948 126.791 11.0948C127.991 11.6948 129.291 11.0948 129.591 9.59477Z" fill="#909090"/>
|
||||
<path d="M130.991 6.29485C130.891 6.99485 130.391 7.49485 129.691 7.59485C129.391 7.59485 129.091 7.59485 128.691 7.59485C127.291 7.39485 126.191 6.49485 126.291 5.59485C126.391 4.69485 127.691 4.19485 129.291 4.39485C129.591 4.39485 129.891 4.49485 130.091 4.59485C130.691 4.79485 131.091 5.49485 130.991 6.29485C130.991 6.29485 130.991 6.19485 130.991 6.29485Z" fill="#57595A"/>
|
||||
<path d="M19.3911 34.3948C19.3911 32.6948 19.3911 30.9948 20.5911 30.4948C21.8911 29.9948 22.5911 31.1948 23.5911 32.8948C24.4911 34.3948 24.0911 35.9948 22.7911 36.4948C21.6911 36.9948 19.3911 36.6948 19.3911 34.3948Z" fill="#909090"/>
|
||||
<path d="M20.0911 25.9949C19.8911 28.0949 19.5911 29.2949 20.8911 29.7949C22.1911 30.2949 22.8911 29.1949 24.1911 27.5949C25.1911 26.1949 24.4911 24.3949 23.1911 23.8949C21.8911 23.3949 20.2911 24.2949 20.0911 25.9949Z" fill="#909090"/>
|
||||
<path d="M18.9912 29.9949C18.9912 29.1949 19.5912 28.5949 20.2912 28.4949C20.5912 28.3949 20.9912 28.3949 21.3912 28.4949C22.9912 28.5949 24.3912 29.4949 24.2912 30.4949C24.1912 31.4949 22.8912 32.1949 21.1912 31.9949C20.8912 31.9949 20.5912 31.8949 20.2912 31.7949C19.4912 31.6949 18.9912 30.8949 18.9912 29.9949Z" fill="#57595A"/>
|
||||
<path d="M25.7913 30.2949C36.2913 30.2949 55.6913 36.3949 55.9913 58.7949" stroke="#57595A" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="4 4"/>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="0.391113" y="35.3948" width="145.595" height="102.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="11"/>
|
||||
<feGaussianBlur stdDeviation="11"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
|
||||
|
||||
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
44
client/assets/icons/empty_search.svg
Normal file
44
client/assets/icons/empty_search.svg
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="131" height="148" viewBox="0 0 131 148" fill="none" version="1.1" id="svg5119" sodipodi:docname="cpy.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata id="metadata5123">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="950" inkscape:window-height="1044" id="namedview5121" showgrid="false" inkscape:zoom="6.027027" inkscape:cx="39.840845" inkscape:cy="71.278574" inkscape:window-x="962" inkscape:window-y="4" inkscape:window-maximized="0" inkscape:current-layer="svg5119"/>
|
||||
<path d="M118.247 36.2464C120.511 36.2464 122.347 34.4108 122.347 32.1464C122.347 29.882 120.511 28.0464 118.247 28.0464C115.982 28.0464 114.147 29.882 114.147 32.1464C114.147 34.4108 115.982 36.2464 118.247 36.2464Z" fill="#909090" id="path5065"/>
|
||||
<path d="M124.247 20.2465C125.793 20.2465 127.047 18.9929 127.047 17.4465C127.047 15.9001 125.793 14.6465 124.247 14.6465C122.7 14.6465 121.447 15.9001 121.447 17.4465C121.447 18.9929 122.7 20.2465 124.247 20.2465Z" fill="#909090" id="path5067"/>
|
||||
<path d="M22.8469 36.1464C24.3933 36.1464 25.6469 34.8928 25.6469 33.3464C25.6469 31.8 24.3933 30.5464 22.8469 30.5464C21.3005 30.5464 20.0469 31.8 20.0469 33.3464C20.0469 34.8928 21.3005 36.1464 22.8469 36.1464Z" fill="#909090" id="path5069"/>
|
||||
<path d="M5.74687 90.1466C8.61876 90.1466 10.9469 87.8185 10.9469 84.9466C10.9469 82.0747 8.61876 79.7466 5.74687 79.7466C2.87499 79.7466 0.546875 82.0747 0.546875 84.9466C0.546875 87.8185 2.87499 90.1466 5.74687 90.1466Z" fill="#909090" id="path5071"/>
|
||||
<g filter="url(#filter0_d)" id="g5075">
|
||||
<path d="M108.076 46.2575L108.876 110.658C108.876 112.858 107.076 114.558 104.876 114.558H42.0762C39.8762 114.558 38.0762 112.758 38.0762 110.658V27.8575C38.0762 25.6575 39.8762 23.9575 42.0762 23.9575H87.5762L108.076 46.2575Z" fill="#ffffff" id="path5073"/>
|
||||
</g>
|
||||
<path d="M70.7761 37.4574H48.6761C47.9761 37.4574 47.3761 36.8574 47.3761 36.1574C47.3761 35.4574 47.9761 34.8574 48.6761 34.8574H70.7761C71.4761 34.8574 72.0761 35.4574 72.0761 36.1574C72.0761 36.8574 71.4761 37.4574 70.7761 37.4574Z" fill="#f2f3f5" id="path5077"/>
|
||||
<path d="M60.2761 44.6576H48.6761C47.9761 44.6576 47.3761 44.0576 47.3761 43.3576C47.3761 42.6576 47.9761 42.0576 48.6761 42.0576H60.1761C60.8761 42.0576 61.4761 42.6576 61.4761 43.3576C61.4761 44.0576 60.8761 44.6576 60.2761 44.6576Z" fill="#f2f3f5" id="path5079"/>
|
||||
<path d="M87.5762 23.9575V41.7575C87.5762 44.2575 89.7762 46.2575 92.2762 46.2575H108.076" fill="#f2f3f5" id="path5081"/>
|
||||
<path d="M57.3094 37.2227L62.061 20.4627L81.5776 22.7107L74.7637 33.6331L80.0415 37.8498L68.6787 62.7035L69.3118 43.4619L57.3094 37.2227Z" fill="var(--bg-color_" id="path5083"/>
|
||||
<defs id="defs5117">
|
||||
<filter id="filter0_d" x="16.0762" y="12.9575" width="114.8" height="134.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" id="feFlood5097"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" id="feColorMatrix5099"/>
|
||||
<feOffset dy="11" id="feOffset5101"/>
|
||||
<feGaussianBlur stdDeviation="11" id="feGaussianBlur5103"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0" id="feColorMatrix5105"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" id="feBlend5107"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" id="feBlend5109"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="73.4531" y1="21.8619" x2="73.4531" y2="115.534" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FDFEFF" id="stop5112"/>
|
||||
<stop offset="0.9964" stop-color="#ECF0F5" id="stop5114"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="m 112.63668,120.8349 c -1,0 -2,-0.4 -2.8,-1.3 l -16.699599,-16.7003 -0.6,0.4 c -5.4,4 -11.7,6.1 -18.1,6.1 -7.7,0 -15.4,-3.1 -21.1,-8.5 -6,-5.699997 -9.3,-13.399997 -9.3,-21.799997 0,-16.7 13.6,-30.3 30.3,-30.3 11.4,0 21.4,6 26.799999,16.2 5.2996,10.1 4.5996,21.9 -1.899999,31.4 l -0.4,0.6 16.799599,16.799997 c 1.7,1.7 1.3,3.4003 1,4.3003 -0.8,1.6 -2.4,2.8 -4,2.8 z M 74.337081,57.034603 c -12.2,0 -22,9.9 -22,22 0,13.8 11.3,22.099997 22.3,22.099997 6.7,0 12.8,-2.999997 17.1,-8.399997 5.3,-6.6 6.2,-15.5 2.5,-23.2 -3.8,-7.7 -11.4,-12.5 -19.9,-12.5 z" fill="#57595A" id="path4523"/>
|
||||
<path d="m 64.837081,82.634703 c 1.3,0 2.4,-1.1 2.4,-2.4 0,-1.3 -1.1,-2.4 -2.4,-2.4 -1.3,0 -2.4,1.1 -2.4,2.4 0,1.3 1.1,2.4 2.4,2.4 z" fill="#909090" id="path4525"/>
|
||||
<path d="m 83.237081,82.634703 c 1.3,0 2.4,-1.1 2.4,-2.4 0,-1.3 -1.1,-2.4 -2.4,-2.4 -1.3,0 -2.4,1.1 -2.4,2.4 0,1.4 1.1,2.4 2.4,2.4 z" fill="#909090" id="path4527"/>
|
||||
<path d="m 64.743281,72.294503 -5.2795,2.8505 0.7127,1.3199 5.2794,-2.8506 z" fill="#909090" id="path4529"/>
|
||||
<path d="m 82.910681,72.256703 -0.7125,1.32 5.28,2.85 0.7125,-1.32 z" fill="#909090" id="path4531"/>
|
||||
<path d="m 74.036981,88.234703 c 1.5464,0 2.8,-0.9402 2.8,-2.1 0,-1.1598 -1.2536,-2.1 -2.8,-2.1 -1.5464,0 -2.8,0.9402 -2.8,2.1 0,1.1598 1.2536,2.1 2.8,2.1 z" fill="#909090" id="path4533"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -134,6 +134,10 @@ export const Icon = (props) => {
|
|||
img = img_refresh;
|
||||
} else if (props.name === "copy") {
|
||||
img = img_copy;
|
||||
} else if (props.name === "empty_folder") {
|
||||
img = "/assets/icons/empty_folder.svg";
|
||||
} else if (props.name === "empty_search") {
|
||||
img = "/assets/icons/empty_search.svg";
|
||||
} else {
|
||||
throw (new Error(`unknown icon: "${props.name}"`));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@ export class FileSystem extends React.PureComponent {
|
|||
</ReactCSSTransitionGroup>
|
||||
</NgIf>
|
||||
<NgIf className="error" cond={this.props.files.length === 0}>
|
||||
<p className="empty_image">
|
||||
<Icon name={this.props.isSearch ? "search" : "file"}/>
|
||||
</p>
|
||||
<p>{ t("There is nothing here") }</p>
|
||||
<p className="empty_image">
|
||||
<Icon name={this.props.isSearch ? "empty_search" : "empty_folder"}/>
|
||||
</p>
|
||||
<p className="label">{ t("There is nothing here") }</p>
|
||||
</NgIf>
|
||||
</Container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,24 +20,20 @@
|
|||
text-align: center;
|
||||
font-weight: 100;
|
||||
|
||||
background: #ffffffaa;
|
||||
border-radius: 50%;
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
opacity: 0.9;
|
||||
font-size: 20px;
|
||||
color: var(--light);
|
||||
margin-top: 50px;
|
||||
height: 100%;
|
||||
opacity: 0.8;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
font-family: sans-serif;
|
||||
|
||||
.component_icon{
|
||||
height: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
.label{ margin-top: -40px; }
|
||||
|
||||
padding: 50px;
|
||||
padding: 50px 0;
|
||||
@media screen and (max-width: 420px) {
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue