Skip to content

GitLab

S
scratch-www
Unverified Commit 48649136 authored by Eric Rosenbaum's avatar Eric Rosenbaum Committed by GitHub
Browse files
Options

Merge pull request #5585 from ericrosenbaum/add-to-studio-empty-states-and-done-btn 

"Add to studio" modal empty states and done button
parents 0bc9a92c c7ba97d2
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 26 deletions
src/views/studio/l10n.json
View file @ 48649136
......@@ -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.",
......
src/views/studio/modals/user-projects-modal.jsx
View file @ 48649136
......@@ -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 className="studio-projects-empty">
<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 className="studio-projects-empty-text">
{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>
);
};
......
src/views/studio/modals/user-projects-modal.scss
View file @ 48649136
......@@ -22,19 +22,39 @@
.user-projects-modal-content {
padding: 0 30px 30px;
background: #E9F1FC;
max-height: calc(100vh - 200px);
max-height: calc(100vh - 270px);
min-height: 300px;
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-projects-empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 4rem;
}
.studio-projects-empty-text {
color: hsla(215, 100, 65, .75);
width: 325px;
text-align: center;
margin-top: 1rem;
}
}
.studio-tile-added {
......
static/svgs/studio/add-to-studio-empty.svg 0 → 100644
View file @ 48649136
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment