mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-30 10:58:23 -05:00
Add overflow menu and show example on components page
This commit is contained in:
Paul Kaplan
parent
f0dda606d8
commit
8dddb393a7
6 changed files with 150 additions and 0 deletions
9
src/components/overflow-menu/overflow-icon.svg
Normal file
9
src/components/overflow-menu/overflow-icon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4923 14.0441C11.4621 14.0441 12.2482 14.7672 12.2482 15.659C12.2482 16.5509 11.4621 17.2739 10.4923 17.2739C9.52252 17.2739 8.73636 16.5509 8.73636 15.659C8.73636 14.7672 9.52252 14.0441 10.4923 14.0441ZM10.4923 7.58453C11.4621 7.58453 12.2482 8.30755 12.2482 9.19943C12.2482 10.0913 11.4621 10.8143 10.4923 10.8143C9.52252 10.8143 8.73636 10.0913 8.73636 9.19943C8.73636 8.30755 9.52252 7.58453 10.4923 7.58453ZM12.2482 2.73983C12.2482 1.84795 11.4621 1.12493 10.4923 1.12493C9.52252 1.12493 8.73636 1.84795 8.73636 2.73983C8.73636 3.63172 9.52252 4.35474 10.4923 4.35474C11.4621 4.35474 12.2482 3.63172 12.2482 2.73983Z" fill="#575E75" fill-opacity="0.6"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="1" width="5" height="17">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4923 14.0441C11.4621 14.0441 12.2482 14.7672 12.2482 15.659C12.2482 16.5509 11.4621 17.2739 10.4923 17.2739C9.52252 17.2739 8.73636 16.5509 8.73636 15.659C8.73636 14.7672 9.52252 14.0441 10.4923 14.0441ZM10.4923 7.58453C11.4621 7.58453 12.2482 8.30755 12.2482 9.19943C12.2482 10.0913 11.4621 10.8143 10.4923 10.8143C9.52252 10.8143 8.73636 10.0913 8.73636 9.19943C8.73636 8.30755 9.52252 7.58453 10.4923 7.58453ZM12.2482 2.73983C12.2482 1.84795 11.4621 1.12493 10.4923 1.12493C9.52252 1.12493 8.73636 1.84795 8.73636 2.73983C8.73636 3.63172 9.52252 4.35474 10.4923 4.35474C11.4621 4.35474 12.2482 3.63172 12.2482 2.73983Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<rect x="0.93222" y="18.1711" width="17.9433" height="19.5104" transform="rotate(-90 0.93222 18.1711)" fill="#575E75" fill-opacity="0.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
43
src/components/overflow-menu/overflow-menu.jsx
Normal file
43
src/components/overflow-menu/overflow-menu.jsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* eslint-disable react/jsx-no-bind */
|
||||
import React, {useState} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Dropdown from '../dropdown/dropdown.jsx';
|
||||
import overflowIcon from './overflow-icon.svg';
|
||||
|
||||
import './overflow-menu.scss';
|
||||
|
||||
const OverflowMenu = ({children, dropdownAs, className}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div className={classNames('overflow-menu-container', className)}>
|
||||
<button
|
||||
className="overflow-menu-trigger ignore-react-onclickoutside"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<img src={overflowIcon} />
|
||||
</button>
|
||||
{open && <Dropdown
|
||||
isOpen
|
||||
as={dropdownAs}
|
||||
className="overflow-menu-dropdown"
|
||||
onRequestClose={() => setOpen(false)}
|
||||
>
|
||||
{children}
|
||||
</Dropdown>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
OverflowMenu.propTypes = {
|
||||
children: PropTypes.node,
|
||||
dropdownAs: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
OverflowMenu.defaultProps = {
|
||||
dropdownAs: 'ul'
|
||||
};
|
||||
|
||||
export default OverflowMenu;
|
||||
50
src/components/overflow-menu/overflow-menu.scss
Normal file
50
src/components/overflow-menu/overflow-menu.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
.overflow-menu-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.overflow-menu-trigger {
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overflow-menu-dropdown {
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 2px 8px rgba(87, 94, 117, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
margin: 30px 0 0 0;
|
||||
right: unset; /* default dropdown aligns right edges, but we want left edges */
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
/* Include default styling for <li><button />... list */
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
& + li {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 5px 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
& > img {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,12 +12,31 @@ const Grid = require('../../components/grid/grid.jsx');
|
|||
const TextArea = require('../../components/forms/textarea.jsx');
|
||||
const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
const Select = require('../../components/forms/select.jsx');
|
||||
const OverflowMenu = require('../../components/overflow-menu/overflow-menu.jsx').default;
|
||||
const exampleIcon = require('./example-icon.svg');
|
||||
|
||||
require('./components.scss');
|
||||
|
||||
const Components = () => (
|
||||
<div className="components">
|
||||
<div className="inner">
|
||||
<h1>Overflow Menu</h1>
|
||||
<div className="example-tile">
|
||||
<OverflowMenu>
|
||||
<li>
|
||||
<button>
|
||||
<img src={exampleIcon} />
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>
|
||||
<img src={exampleIcon} />
|
||||
Upgrade!
|
||||
</button>
|
||||
</li>
|
||||
</OverflowMenu>
|
||||
</div>
|
||||
<h1>Nav Bubbles</h1>
|
||||
<div className="subnavigation">
|
||||
<SubNavigation>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,17 @@
|
|||
width: 200px;
|
||||
}
|
||||
|
||||
.example-tile {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.colors {
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
|
|||
18
src/views/components/example-icon.svg
Normal file
18
src/views/components/example-icon.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
|
||||
<title>Sound/General/Delete</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M4.54751641,6.99994966 L15.4523042,6.99994966 C15.7284466,6.99994966 15.9523042,7.22380729 15.9523042,7.49994966 C15.9523042,7.51506367 15.9516189,7.5301699 15.9502504,7.54522183 L15.1651793,16.1801783 C15.0715275,17.2102489 14.207924,17.9989808 13.1736049,17.9990897 L6.82662224,17.9997575 C5.79213514,17.9998663 4.92828345,17.2110677 4.83462539,16.180829 L4.04956981,7.54521753 C4.02456905,7.27020922 4.22724022,7.02700381 4.50224854,7.00200306 C4.51729904,7.00063483 4.53240384,6.99994966 4.54751641,6.99994966 Z M7.33333333,4 L7.88603796,2.34188612 C7.95409498,2.13771505 8.14516441,2 8.36037961,2 L11.6396204,2 C11.8548356,2 12.045905,2.13771505 12.113962,2.34188612 L12.6666667,4 L16.5,4 C16.7761424,4 17,4.22385763 17,4.5 L17,5.5 C17,5.77614237 16.7761424,6 16.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 L3,4.5 C3,4.22385763 3.22385763,4 3.5,4 L7.33333333,4 Z M8.38742589,4 L11.6125741,4 L11.2792408,3 L8.72075922,3 L8.38742589,4 Z M10,11.7204812 L11.5952436,10.1252376 C11.7905057,9.92997548 12.1070882,9.92997548 12.3023504,10.1252376 L12.3747624,10.1976496 C12.5700245,10.3929118 12.5700245,10.7094943 12.3747624,10.9047564 L10.7795188,12.5 L12.3747624,14.0952436 C12.5700245,14.2905057 12.5700245,14.6070882 12.3747624,14.8023504 L12.3023504,14.8747624 C12.1070882,15.0700245 11.7905057,15.0700245 11.5952436,14.8747624 L10,13.2795188 L8.40475641,14.8747624 C8.20949427,15.0700245 7.89291178,15.0700245 7.69764963,14.8747624 L7.62523762,14.8023504 C7.42997548,14.6070882 7.42997548,14.2905057 7.62523762,14.0952436 L9.22048121,12.5 L7.62523762,10.9047564 C7.42997548,10.7094943 7.42997548,10.3929118 7.62523762,10.1976496 L7.69764963,10.1252376 C7.89291178,9.92997548 8.20949427,9.92997548 8.40475641,10.1252376 L10,11.7204812 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Sound/General/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Trash-Can"></g>
|
||||
<g id="White" mask="url(#mask-2)" fill="#FFFFFF">
|
||||
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in a new issue