sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move GitHub corner and visually-hidden class (#1336)

Browse Source 
* Move visually-hidden class to index.html

* Replace github corner with component

* Momoize GitHubCorner

* Simplify component return
This commit is contained in:
Sanghyeon Lee 2020-04-09 22:48:41 +09:00 committed by GitHub
parent b1ed5b4cdc
commit bd32a26653
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/index.html
View File

@ -155,6 +155,15 @@
padding: 0.8em 1.2em;
font-size: 1.3em;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
</style>
<script
async
@ -182,34 +191,5 @@
<span>Loading scene...</span>
</div>
</div>
<aside>
<!-- https://github.com/tholman/github-corners -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 250 250"
class="github-corner rtl-mirror"
>
<a
href="https://github.com/excalidraw/excalidraw"
target="_blank"
aria-label="GitHub repository"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
<path
class="octo-arm"
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
style="transform-origin: 130px 106px;"
fill="#fff"
/>
<path
class="octo-body"
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
fill="#fff"
/>
</a>
</svg>
</aside>
</body>
</html>

32
src/components/GitHubCorner.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
// https://github.com/tholman/github-corners
export const GitHubCorner = React.memo(() => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 250 250"
className="github-corner rtl-mirror"
>
<a
href="https://github.com/excalidraw/excalidraw"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub repository"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
<path
className="octo-arm"
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
style={{ transformOrigin: "130px 106px" }}
fill="#fff"
/>
<path
className="octo-body"
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
fill="#fff"
/>
</a>
</svg>
));

4
src/components/LayerUI.tsx
View File

@ -25,6 +25,7 @@ import { RoomDialog } from "./RoomDialog";
import { ErrorDialog } from "./ErrorDialog";
import { ShortcutsDialog } from "./ShortcutsDialog";
import { LoadingMessage } from "./LoadingMessage";
import { GitHubCorner } from "./GitHubCorner";
interface LayerUIProps {
actionManager: ActionManager;
@ -194,6 +195,9 @@ export const LayerUI = React.memo(
</Stack.Col>
</div>
</FixedSideContainer>
<aside>
<GitHubCorner />
</aside>
<footer role="contentinfo">
<LanguageList
onChange={(lng) => {

10
src/styles.scss
View File

@ -379,16 +379,6 @@ button,
}
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
.zIndexButton {
margin: 0 5px;
padding: 5px;