1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-10 19:50:51 +02:00

Merge pull request #308 from jpsc/fix/button-anchor

fix(anchors): move anchors to buttons when more appropriate
This commit is contained in:
Kushagra Gour
2018-06-29 00:08:21 +05:30
committed by GitHub
5 changed files with 76 additions and 61 deletions

View File

@ -1,5 +1,5 @@
import { h, Component } from 'preact';
import { A } from './common';
import { Button } from './common';
export default class Footer extends Component {
constructor(props) {
@ -15,8 +15,8 @@ export default class Footer extends Component {
render() {
return (
<div id="footer" class="footer">
<div class="footer__right fr">
<a
<div class="footer__right fr">
<button
onClick={this.props.saveHtmlBtnClickHandler}
id="saveHtmlBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile"
@ -25,7 +25,7 @@ export default class Footer extends Component {
<svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg>
</a>
</button>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<symbol id="codepen-logo" viewBox="0 0 120 120">
<path
@ -39,8 +39,7 @@ export default class Footer extends Component {
</symbol>
</svg>
<a
href=""
<button
onClick={this.props.codepenBtnClickHandler}
id="codepenBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile"
@ -49,10 +48,9 @@ export default class Footer extends Component {
<svg>
<use xlinkHref="#codepen-logo" />
</svg>
</a>
</button>
<a
href=""
<button
id="screenshotBtn"
class="mode-btn hint--rounded hint--top-left show-when-extension"
onClick={this.props.screenshotBtnClickHandler}
@ -61,11 +59,11 @@ export default class Footer extends Component {
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
</svg>
</a>
</button>
<div class="footer__separator hide-on-mobile" />
<a
<button
onClick={this.layoutBtnClickhandler.bind(this, 1)}
id="layoutBtn1"
class="mode-btn hide-on-mobile"
@ -73,8 +71,8 @@ export default class Footer extends Component {
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlinkHref="#mode-icon" />
</svg>
</a>
<a
</button>
<button
onClick={this.layoutBtnClickhandler.bind(this, 2)}
id="layoutBtn2"
class="mode-btn hide-on-mobile"
@ -82,8 +80,8 @@ export default class Footer extends Component {
<svg viewBox="0 0 100 100">
<use xlinkHref="#mode-icon" />
</svg>
</a>
<a
</button>
<button
onClick={this.layoutBtnClickhandler.bind(this, 3)}
id="layoutBtn3"
class="mode-btn hide-on-mobile"
@ -91,8 +89,8 @@ export default class Footer extends Component {
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
<use xlinkHref="#mode-icon" />
</svg>
</a>
<a
</button>
<button
onClick={this.layoutBtnClickhandler.bind(this, 5)}
id="layoutBtn5"
class="mode-btn hide-on-mobile"
@ -100,8 +98,8 @@ export default class Footer extends Component {
<svg viewBox="0 0 100 100">
<use xlinkHref="#vertical-mode-icon" />
</svg>
</a>
<a
</button>
<button
onClick={this.layoutBtnClickhandler.bind(this, 4)}
id="layoutBtn4"
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
@ -110,8 +108,8 @@ export default class Footer extends Component {
<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" />
</svg>
</a>
<a
</button>
<button
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label="Detach Preview"
onClick={this.props.detachedPreviewBtnHandler}
@ -119,11 +117,11 @@ export default class Footer extends Component {
<svg viewBox="0 0 24 24">
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
</svg>
</a>
</button>
<div class="footer__separator" />
<a
<button
onClick={this.props.notificationsBtnClickHandler}
id="notificationsBtn"
class={`notifications-btn mode-btn hint--top-left hint--rounded ${
@ -135,8 +133,8 @@ export default class Footer extends Component {
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
</svg>
<span class="notifications-btn__dot" />
</a>
<A
</button>
<Button
onClick={this.props.settingsBtnClickHandler}
data-event-category="ui"
data-event-action="settingsBtnClick"
@ -146,7 +144,7 @@ export default class Footer extends Component {
<svg>
<use xlinkHref="#settings-icon" />
</svg>
</A>
</Button>
</div>
<a
href="https://webmakerapp.com/"
@ -157,7 +155,7 @@ export default class Footer extends Component {
</a>
&copy;
<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
<A
<Button
onClick={this.props.helpBtnClickHandler}
data-event-category="ui"
data-event-action="helpButtonClick"
@ -170,12 +168,12 @@ export default class Footer extends Component {
>
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</A>
<A
</Button>
<Button
onClick={this.props.keyboardShortcutsBtnClickHandler}
data-event-category="ui"
data-event-action="keyboardShortcutButtonClick"
class="footer__link hint--rounded hint--top-right hide-on-mobile"
class="footer__link hint--rounded hint--top-right hide-on-mobile"
aria-label="Keyboard shortcuts"
>
<svg
@ -187,7 +185,7 @@ export default class Footer extends Component {
>
<use xlinkHref="#keyboard-icon" />
</svg>
</A>
</Button>
<a
class="footer__link hint--rounded hint--top-right"
aria-label="Tweet about 'Web Maker'"
@ -205,17 +203,15 @@ export default class Footer extends Component {
<use xlinkHref="#twitter-icon" />
</svg>
</a>
<A
<Button
onClick={this.props.supportDeveloperBtnClickHandler}
data-event-category="ui"
data-event-action="supportDeveloperFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
aria-label="Support the developer by pledging some amount"
target="_blank"
rel="noopener noreferrer"
>
Support the developer
</A>
</Button>
</div>
);
}

View File

@ -1,5 +1,5 @@
import { h } from 'preact';
import { A } from './common';
import { Button } from './common';
const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
@ -16,7 +16,7 @@ export function MainHeader(props) {
onBlur={props.titleInputBlurHandler}
/>
<div class="main-header__btn-wrap flex flex-v-center">
<a
<button
id="runBtn"
class="hide flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
@ -25,9 +25,9 @@ export function MainHeader(props) {
<svg style="width: 14px; height: 14px;">
<use xlinkHref="#play-icon" />
</svg>Run
</a>
</button>
<A
<Button
onClick={props.addLibraryBtnHandler}
data-event-category="ui"
data-event-action="addLibraryButtonClick"
@ -42,9 +42,9 @@ export function MainHeader(props) {
>
{props.externalLibCount}
</span>
</A>
</Button>
<a
<button
class="flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Start a new creation"
onClick={props.newBtnHandler}
@ -55,8 +55,8 @@ export function MainHeader(props) {
>
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>New
</a>
<a
</button>
<button
id="saveBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
props.isSaving ? 'is-loading' : ''
@ -74,8 +74,8 @@ export function MainHeader(props) {
<use xlinkHref="#loader-icon" />
</svg>
Save
</a>
<a
</button>
<button
id="openItemsBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
props.isFetchingItems ? 'is-loading' : ''
@ -93,8 +93,8 @@ export function MainHeader(props) {
<use xlinkHref="#loader-icon" />
</svg>
Open
</a>
<A
</button>
<Button
onClick={props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
@ -102,8 +102,8 @@ export function MainHeader(props) {
aria-label="Login/Signup"
>
Login/Signup
</A>
<A
</Button>
<Button
onClick={props.profileBtnHandler}
data-event-category="ui"
data-event-action="headerAvatarClick"
@ -116,7 +116,7 @@ export function MainHeader(props) {
src={props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''}
class="main-header__avatar-img"
/>
</A>
</Button>
</div>
</div>
);

View File

@ -66,7 +66,7 @@ export default class Modal extends Component {
onClick={this.props.closeHandler}
aria-label="Close modal"
title="Close"
class="js-modal__close-btn modal__close-btn"
class="js-modal__close-btn modal__close-btn"
>
Close
</button>

View File

@ -1,5 +1,5 @@
import { h } from 'preact';
import { A } from './common';
import { Button } from './common';
function NotificationItem({ type, children }) {
var strongTag;
@ -81,7 +81,7 @@ function Notification({ version, isLatest, ...props }) {
>
Share it
</a>&nbsp;
<A
<Button
aria-label="Support the developer"
onClick={props.onSupportBtnClick}
data-event-action="supportDeveloperChangelogBtnClick"
@ -89,7 +89,7 @@ function Notification({ version, isLatest, ...props }) {
class="btn btn-icon"
>
Support the developer
</A>
</Button>
</p>
</div>
) : null}

View File

@ -33,6 +33,11 @@ p {
line-height: 1.65;
}
button {
font-family: inherit;
font-size: 100%;
}
.hide {
display: none !important;
}
@ -125,6 +130,10 @@ p {
margin-top: 0;
}
.support-link {
color: #d61237;
}
@media screen and (max-width: 600px) {
.block--mobile {
display: block;
@ -575,7 +584,7 @@ body > #demo-frame {
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.main-header__btn-wrap > a {
.main-header__btn-wrap > button {
font-size: 0.8em;
font-weight: bold;
line-height: 20px;
@ -597,7 +606,7 @@ body > #demo-frame {
text-transform: uppercase;
}
.main-header__btn-wrap > a > svg {
.main-header__btn-wrap > button > svg {
fill: #9297b3;
margin-right: 4px;
}
@ -654,6 +663,9 @@ body > #demo-frame {
}
.mode-btn {
background: transparent;
border: 0;
padding: 0;
margin-left: 10px;
display: inline-block;
}
@ -664,17 +676,20 @@ body > #demo-frame {
.footer__link {
display: inline-block;
background: transparent;
border: 0;
padding: 0;
margin-right: 5px;
position: relative;
top: 2px;
}
.footer a > svg {
.footer button > svg {
transition: 0.3s ease;
fill: rgba(255, 255, 255, 0.2);
}
.footer a:hover svg {
.footer button:hover svg {
fill: rgba(255, 255, 255, 0.45);
}
@ -745,12 +760,16 @@ body > #demo-frame {
.modal__close-btn {
position: absolute;
right: 10px;
top: 10px;
right: 1rem;
top: 1rem;
text-transform: uppercase;
font-weight: 700;
font-size: 0.8rem;
opacity: 0.8;
transition: 0.25s ease;
border: 1px solid black;
border-radius: 2px;
padding: 0.2rem 0.5rem;
}
.modal__close-btn > svg {