Skip to content

Commit

Permalink
Add view transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotWoods
NotWoods committed Jul 29, 2024
1 parent 37e935e commit ca25ba2
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 154 deletions.
69 changes: 35 additions & 34 deletions editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,44 @@
<body>
<button class="scrim toggle--layers" aria-hidden="true" aria-label="Close layers sidebar"></button>
<file-drop accept="image/*" multiple id="icon_drop" class="body icon__file-drop drop">
<article class="viewer">
<main>
{{> navbar page="editor" }}
<article class="viewer">
<div class="button__row">
<button type="button" class="button--secondary toggle--layers small" aria-controls="layersSidebar">
Layers
</button>
<button type="button" class="button--primary toggle--export" name="export" aria-controls="exportModal">
Export
</button>
<button type="button" class="button--primary" name="share">Share</button>
</div>

<div class="button__row">
<button type="button" class="button--secondary toggle--layers small" aria-controls="layersSidebar">
Layers
</button>
<button type="button" class="button--primary toggle--export" name="export" aria-controls="exportModal">
Export
</button>
<button type="button" class="button--primary" name="share">Share</button>
</div>

<section class="icon__grid">
<div class="icon__original editor__preview"></div>
<div class="icon__mask masked editor__preview"></div>
<div class="icon__shadow masked"></div>
</section>
<section class="icon__grid">
<div class="icon__original editor__preview"></div>
<div class="icon__mask masked editor__preview"></div>
<div class="icon__shadow masked"></div>
</section>

{{> controls }}
<hr />
<aside class="about text">
{{> ad }}
<p class="about__main">
Maskable.app Editor lets you generate maskable PWA icons before adding them to your web app manifest.
</p>
<p class="about__main">
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
Maskable icons</a
>
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
icons on the device. On Android, this lets developers get rid of the default white background around their
icons and use the entire provided space by generating adaptive icons.
</p>
{{> github }} {{> donate}}
</aside>
</article>
{{> controls }}
<hr />
<aside class="about text">
{{> ad }}
<p class="about__main">
Maskable.app Editor lets you generate maskable PWA icons before adding them to your web app manifest.
</p>
<p class="about__main">
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
Maskable icons</a
>
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
icons on the device. On Android, this lets developers get rid of the default white background around their
icons and use the entire provided space by generating adaptive icons.
</p>
{{> github }} {{> donate}}
</aside>
</article>
</main>

<aside class="layers" id="layersSidebar">
<h2>Layers</h2>
Expand Down
235 changes: 118 additions & 117 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,134 +16,135 @@

<body>
<file-drop accept="image/*" id="icon_drop" class="icon__file-drop drop">
<main class="viewer">
<main>
{{> navbar page="viewer" }}

<div class="demo__container">
<ul class="demo__list">
<!--
<article class="viewer">
<div class="demo__container">
<ul class="demo__list">
<!--
Different sample icons that the user can look at.
The original source of the icon is linked in the data-source attribute.
The alt tag is used as the title of the source.
-->
<li class="demo">
<a class="demo__link" href="?demo=demo/spec.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/spec.svg"
alt="W3C example"
data-source="https://www.w3.org/TR/appmanifest/#examples-of-masks"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/color-breakdown.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/color-breakdown.png"
alt="Color Breakdown"
data-source="https://notwoods.github.io/color-breakdown/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/insightful-energy.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/insightful-energy.svg"
alt="Insightful Energy"
data-source="https://notwoods.github.io/insightful-energy/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/big-island-buses.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/big-island-buses.png"
alt="Big Island Buses"
data-source="https://notwoods.github.io/big-island-buses/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/proxx.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/proxx.png"
alt="PROXX"
data-source="https://proxx.app"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/svgomg.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/svgomg.svg"
alt="SVGOMG"
data-source="https://jakearchibald.github.io/svgomg/"
/>
</a>
</li>
</ul>
<li class="demo">
<a class="demo__link" href="?demo=demo/spec.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/spec.svg"
alt="W3C example"
data-source="https://www.w3.org/TR/appmanifest/#examples-of-masks"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/color-breakdown.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/color-breakdown.png"
alt="Color Breakdown"
data-source="https://notwoods.github.io/color-breakdown/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/insightful-energy.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/insightful-energy.svg"
alt="Insightful Energy"
data-source="https://notwoods.github.io/insightful-energy/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/big-island-buses.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/big-island-buses.png"
alt="Big Island Buses"
data-source="https://notwoods.github.io/big-island-buses/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/proxx.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/proxx.png"
alt="PROXX"
data-source="https://proxx.app"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/svgomg.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/svgomg.svg"
alt="SVGOMG"
data-source="https://jakearchibald.github.io/svgomg/"
/>
</a>
</li>
</ul>

<div class="button__row">
<input type="file" accept="image/*" class="hidden-offscreen" id="icon_file" name="icon_file" />
<label for="icon_file" class="icon__file-input button--primary"> Open icon file </label>
<div class="button__row">
<input type="file" accept="image/*" class="hidden-offscreen" id="icon_file" name="icon_file" />
<label for="icon_file" class="icon__file-input button--primary"> Open icon file </label>

<button type="button" class="button--primary toggle--url" name="url" aria-controls="urlModal">
Load from URL
</button>
<button type="button" class="button--primary toggle--url" name="url" aria-controls="urlModal">
Load from URL
</button>
</div>
</div>
</div>

<section class="icon__grid">
<div class="icon__original">
<img width="192" height="192" class="icon" alt="Preview of original icon" src="demo/spec.svg" />
</div>
<div class="icon__mask masked">
<img width="192" height="192" class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
</div>
<div class="icon__shadow masked"></div>
</section>
<section class="icon__grid">
<div class="icon__original">
<img width="192" height="192" class="icon" alt="Preview of original icon" src="demo/spec.svg" />
</div>
<div class="icon__mask masked">
<img width="192" height="192" class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
</div>
<div class="icon__shadow masked"></div>
</section>

{{> controls }}
<aside class="source text">
<p>
Icon from
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="link source__link"> W3C example </a>
</p>
</aside>
{{> controls }}
<aside class="source text">
<p>
Icon from
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="link source__link"> W3C example </a>
</p>
</aside>

<hr />
<aside class="about text">
{{> ad }}
<p class="about__main">
Use Maskable.app to preview your maskable PWA icons before adding them to your web app manifest.
</p>
<p class="about__main">
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
Maskable icons</a
>
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
icons on the device. On Android, this lets developers get rid of the default white background around their
icons and use the entire provided space by generating adaptive icons.
</p>
{{> github }} {{> donate}}
</aside>
<hr />
<aside class="about text">
{{> ad }}
<p class="about__main">
Use Maskable.app to preview your maskable PWA icons before adding them to your web app manifest.
</p>
<p class="about__main">
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
Maskable icons</a
>
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
icons on the device. On Android, this lets developers get rid of the default white background around their
icons and use the entire provided space by generating adaptive icons.
</p>
{{> github }} {{> donate}}
</aside>
</article>
</main>

<dialog class="url-dialog" id="urlModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
Expand Down
7 changes: 4 additions & 3 deletions public/css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ dark-mode-toggle {
right: 0;
}

.viewer {
background: var(--background);
position: relative;
main {
overflow-y: auto;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.viewer {
position: relative;
}
.layers {
padding-left: env(safe-area-inset-left);
resize: horizontal;
Expand Down
36 changes: 36 additions & 0 deletions public/css/viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,3 +475,39 @@ hr {
width: 20em;
max-width: 100%;
}

@keyframes slide-in-from-right {
from {
translate: 100% 0;
}
}
@keyframes slide-out-to-right {
to {
translate: 100% 0;
}
}

@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
.viewer {
view-transition-name: viewer;
}
.layers {
view-transition-name: layers;
}

::view-transition-old(*) {
animation-duration: 0.2s;
animation-timing-function: ease-in;
}
@media (min-width: 56rem) {
::view-transition-old(layers) {
animation: 0.2s ease-in both slide-out-to-right;
}
::view-transition-new(layers) {
animation: 0.2s ease-in both slide-in-from-right;
}
}
}

0 comments on commit ca25ba2

Please sign in to comment.