mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
add empty states and done button
This commit is contained in:
Eric Rosenbaum
parent
68460611d8
commit
b6a91adf78
4 changed files with 110 additions and 24 deletions
|
|
@ -23,6 +23,11 @@
|
|||
|
||||
"studio.openToAll": "Anyone can add projects",
|
||||
|
||||
"studio.addProjects.noSharedYet": "You don’t have shared projects that you can add to this studio yet.",
|
||||
"studio.addProjects.noFavoritedYet": "You don’t have favorite projects that you can add to this studio yet.",
|
||||
"studio.addProjects.noRecentYet": "You don’t have recently viewed projects that you can add to this studio yet.",
|
||||
"studio.addProjects.noStudentsYet": "You don’t have student projects that you can add to this studio yet.",
|
||||
|
||||
"studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.",
|
||||
"studio.projectsEmptyCanAdd2": "Add your first project!",
|
||||
"studio.projectsEmpty1": "This studio has no projects yet.",
|
||||
|
|
|
|||
|
|
@ -77,33 +77,61 @@ const UserProjectsModal = ({
|
|||
<AlertProvider>
|
||||
{error && <div>Error loading {filter}: {error}</div>}
|
||||
<Alert className="studio-alert" />
|
||||
<div className="user-projects-modal-grid">
|
||||
{items.map(project => (
|
||||
<UserProjectsTile
|
||||
key={project.id}
|
||||
id={project.id}
|
||||
title={project.title}
|
||||
image={project.image}
|
||||
inStudio={project.inStudio}
|
||||
onAdd={onAdd}
|
||||
onRemove={onRemove}
|
||||
{items.length > 0 ? (
|
||||
<React.Fragment>
|
||||
<div className="user-projects-modal-grid">
|
||||
{items.map(project => (
|
||||
<UserProjectsTile
|
||||
key={project.id}
|
||||
id={project.id}
|
||||
title={project.title}
|
||||
image={project.image}
|
||||
inStudio={project.inStudio}
|
||||
onAdd={onAdd}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{moreToLoad &&
|
||||
<div className="studio-projects-load-more">
|
||||
<button
|
||||
className={classNames('button', {
|
||||
'mod-mutating': loading
|
||||
})}
|
||||
onClick={() => onLoadMore(filter)}
|
||||
>
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</React.Fragment>
|
||||
) :
|
||||
<div>
|
||||
<img
|
||||
src="/svgs/studio/add-to-studio-empty.svg"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{moreToLoad &&
|
||||
<div className="studio-projects-load-more">
|
||||
<button
|
||||
className={classNames('button', {
|
||||
'mod-mutating': loading
|
||||
})}
|
||||
onClick={() => onLoadMore(filter)}
|
||||
>
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
</button>
|
||||
<div>
|
||||
{filter === Filters.SHARED &&
|
||||
<FormattedMessage id="studio.addProjects.noSharedYet" />}
|
||||
{filter === Filters.FAVORITED &&
|
||||
<FormattedMessage id="studio.addProjects.noFavoritedYet" />}
|
||||
{filter === Filters.RECENT &&
|
||||
<FormattedMessage id="studio.addProjects.noRecentYet" />}
|
||||
{filter === Filters.STUDENTS &&
|
||||
<FormattedMessage id="studio.addProjects.noStudentsYet" />}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</AlertProvider>
|
||||
</ModalInnerContent>
|
||||
<div className="studio-projects-done-row">
|
||||
<button
|
||||
className="button"
|
||||
onClick={onRequestClose}
|
||||
>
|
||||
<FormattedMessage id="general.done" />
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,19 +22,26 @@
|
|||
.user-projects-modal-content {
|
||||
padding: 0 30px 30px;
|
||||
background: #E9F1FC;
|
||||
max-height: calc(100vh - 200px);
|
||||
min-height: 300px;
|
||||
max-height: calc(100vh - 270px);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
& { max-height: calc(100vh - 105px); }
|
||||
& { max-height: calc(100vh - 175px); }
|
||||
}
|
||||
}
|
||||
|
||||
.studio-projects-load-more {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.studio-projects-done-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.studio-tile-added {
|
||||
|
|
|
|||
46
static/svgs/studio/add-to-studio-empty.svg
Normal file
46
static/svgs/studio/add-to-studio-empty.svg
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<svg width="108" height="100" viewBox="0 0 108 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<rect x="4" y="4" width="61.0169" height="53.6164" rx="8" fill="#E5F0FF"/>
|
||||
<rect x="6" y="6" width="57.0169" height="49.6164" rx="6" stroke="#4D97FF" stroke-opacity="0.4" stroke-width="4"/>
|
||||
</g>
|
||||
<path d="M4 12C4 7.58172 7.58172 4 12 4H57.0169C61.4352 4 65.0169 7.58172 65.0169 12V38.5912H4V12Z" fill="#4D97FF" fill-opacity="0.4"/>
|
||||
<g filter="url(#filter1_d)">
|
||||
<rect x="23.4912" y="23.0249" width="61.0169" height="53.6164" rx="8" fill="#E5F0FF"/>
|
||||
<rect x="25.4912" y="25.0249" width="57.0169" height="49.6164" rx="6" stroke="#4D97FF" stroke-opacity="0.4" stroke-width="4"/>
|
||||
</g>
|
||||
<path d="M23.4912 31.0249C23.4912 26.6066 27.0729 23.0249 31.4912 23.0249H76.5082C80.9264 23.0249 84.5082 26.6066 84.5082 31.0249V57.6161H23.4912V31.0249Z" fill="#4D97FF" fill-opacity="0.4"/>
|
||||
<g filter="url(#filter2_d)">
|
||||
<rect x="42.9834" y="42.0505" width="61.0169" height="53.6164" rx="8" fill="#E5F0FF"/>
|
||||
<rect x="44.9834" y="44.0505" width="57.0169" height="49.6164" rx="6" stroke="#4D97FF" stroke-opacity="0.4" stroke-width="4"/>
|
||||
</g>
|
||||
<path d="M42.9834 50.0505C42.9834 45.6323 46.5651 42.0505 50.9834 42.0505H96.0003C100.419 42.0505 104 45.6323 104 50.0505V76.6417H42.9834V50.0505Z" fill="#4D97FF" fill-opacity="0.4"/>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="0" y="0" width="69.0169" height="61.6164" 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"/>
|
||||
<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
|
||||
<feOffset/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="19.4912" y="19.0249" width="69.0169" height="61.6164" 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"/>
|
||||
<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
|
||||
<feOffset/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d" x="38.9834" y="38.0505" width="69.0169" height="61.6164" 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"/>
|
||||
<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
|
||||
<feOffset/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 1 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: 3.3 KiB |
Loading…
Reference in a new issue