mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-25 16:01:14 +02:00
Code Issues Releases Wiki Activity

make icon bigger n better

Browse Source
This commit is contained in:
Kushagra Gour
2019-03-03 18:06:26 +05:30
parent af2795c12b
commit 5694a115c8
5 changed files with 27 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CreateNewModal.jsx
View File

@@ -31,7 +31,7 @@ export class CreateNewModal extends Component {
<div style="flex:1;" class="tac"> <div style="flex:1;" class="tac">
<svg <svg
width="287px" width="287px"
height="150px" height="80px"
viewBox="0 0 287 197" viewBox="0 0 287 197"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +117,7 @@ export class CreateNewModal extends Component {
<div style="flex:1" class="tac ml-2"> <div style="flex:1" class="tac ml-2">
<svg <svg
width="286px" width="286px"
height="150px" height="80px"
viewBox="0 0 286 196" viewBox="0 0 286 196"
version="1.1" version="1.1"
style={`opacity:${this.state.isFileModeSelected ? '1' : '0.4'}`} style={`opacity:${this.state.isFileModeSelected ? '1' : '0.4'}`}

29
src/components/MainHeader.jsx
View File

@@ -22,11 +22,11 @@ export function MainHeader(props) {
<div class="main-header__btn-wrap flex flex-v-center"> <div class="main-header__btn-wrap flex flex-v-center">
<button <button
id="runBtn" id="runBtn"
class="hide btn--dark flex flex-v-center hint--rounded hint--bottom-left" class="hide btn btn btn--dark flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Run preview (Ctrl/⌘ + Shift + 5)" aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
onClick={props.runBtnClickHandler} onClick={props.runBtnClickHandler}
> >
<svg style="width: 14px; height: 14px;"> <svg>
<use xlinkHref="#play-icon" /> <use xlinkHref="#play-icon" />
</svg> </svg>
<Trans>Run</Trans> <Trans>Run</Trans>
@@ -37,7 +37,7 @@ export function MainHeader(props) {
onClick={props.addLibraryBtnHandler} onClick={props.addLibraryBtnHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="addLibraryButtonClick" data-event-action="addLibraryButtonClick"
class="btn--dark flex-v-center hint--rounded hint--bottom-left" class="btn btn--dark hint--rounded hint--bottom-left"
aria-label={i18n._(t`Add a JS/CSS library`)} aria-label={i18n._(t`Add a JS/CSS library`)}
> >
<Trans>Add library</Trans>{' '} <Trans>Add library</Trans>{' '}
@@ -54,30 +54,24 @@ export function MainHeader(props) {
)} )}
<button <button
class="btn--dark flex flex-v-center hint--rounded hint--bottom-left" class="btn btn--dark hint--rounded hint--bottom-left"
aria-label="Start a new creation" aria-label="Start a new creation"
onClick={props.newBtnHandler} onClick={props.newBtnHandler}
> >
<svg <svg viewBox="0 0 24 24">
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg> </svg>
<Trans>New</Trans> <Trans>New</Trans>
</button> </button>
<button <button
id="saveBtn" id="saveBtn"
class={`btn--dark flex flex-v-center hint--rounded hint--bottom-left ${ class={`btn btn--dark hint--rounded hint--bottom-left ${
props.isSaving ? 'is-loading' : '' props.isSaving ? 'is-loading' : ''
} ${props.unsavedEditCount ? 'is-marked' : 0}`} } ${props.unsavedEditCount ? 'is-marked' : 0}`}
aria-label="Save current creation (Ctrl/⌘ + S)" aria-label="Save current creation (Ctrl/⌘ + S)"
onClick={props.saveBtnHandler} onClick={props.saveBtnHandler}
> >
<svg <svg viewBox="0 0 24 24">
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" /> <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg> </svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff"> <svg class="btn-loader" width="15" height="15" stroke="#fff">
@@ -87,16 +81,13 @@ export function MainHeader(props) {
</button> </button>
<button <button
id="openItemsBtn" id="openItemsBtn"
class={`btn--dark flex flex-v-center hint--rounded hint--bottom-left ${ class={`btn btn--dark hint--rounded hint--bottom-left ${
props.isFetchingItems ? 'is-loading' : '' props.isFetchingItems ? 'is-loading' : ''
}`} }`}
aria-label="Open a saved creation (Ctrl/⌘ + O)" aria-label="Open a saved creation (Ctrl/⌘ + O)"
onClick={props.openBtnHandler} onClick={props.openBtnHandler}
> >
<svg <svg viewBox="0 0 24 24">
style="width:14px;height:14px;vertical-align:middle;"
viewBox="0 0 24 24"
>
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" /> <path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg> </svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff"> <svg class="btn-loader" width="15" height="15" stroke="#fff">
@@ -108,7 +99,7 @@ export function MainHeader(props) {
onClick={props.loginBtnHandler} onClick={props.loginBtnHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="loginButtonClick" data-event-action="loginButtonClick"
class="hide-on-login btn--dark flex flex-v-center hint--rounded hint--bottom-left" class="hide-on-login btn btn--dark hint--rounded hint--bottom-left"
aria-label="Login/Signup" aria-label="Login/Signup"
> >
<Trans>Login</Trans>/<Trans>Signup</Trans> <Trans>Login</Trans>/<Trans>Signup</Trans>

24
src/components/SidePane.jsx
View File

@@ -79,10 +79,7 @@ function File({
class="btn btn--dark" class="btn btn--dark"
onClick={onRenameBtnClick.bind(null, file)} onClick={onRenameBtnClick.bind(null, file)}
> >
<svg <svg viewBox="0 0 24 24">
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /> <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" />
</svg> </svg>
</button> </button>
@@ -92,10 +89,7 @@ function File({
class="btn btn--dark" class="btn btn--dark"
onClick={onRemoveBtnClick.bind(null, file)} onClick={onRemoveBtnClick.bind(null, file)}
> >
<svg <svg viewBox="0 0 24 24">
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /> <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg> </svg>
</button> </button>
@@ -236,18 +230,15 @@ export class SidePane extends Component {
onDragOver={this.dragOverHandler.bind(this)} onDragOver={this.dragOverHandler.bind(this)}
onDrop={this.dropHandler.bind(this)} onDrop={this.dropHandler.bind(this)}
> >
<div class="flex jc-sb" style="padding: 5px 10px"> <div class="d-f jc-sb ai-c" style="padding: 5px 10px">
Files Files
<div class="flex flex-v-center"> <div class="flex ai-c">
<button <button
type="button" type="button"
class="btn btn--dark" class="btn btn--dark"
onClick={this.addFileButtonClickHandler.bind(this)} onClick={this.addFileButtonClickHandler.bind(this)}
> >
<svg <svg viewBox="0 0 24 24">
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M11,15V12H9V15H6V17H9V20H11V17H14V15H11Z" /> <path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M11,15V12H9V15H6V17H9V20H11V17H14V15H11Z" />
</svg> </svg>
</button> </button>
@@ -256,10 +247,7 @@ export class SidePane extends Component {
class="btn btn--dark" class="btn btn--dark"
onClick={this.addFolderButtonClickHandler.bind(this)} onClick={this.addFolderButtonClickHandler.bind(this)}
> >
<svg <svg viewBox="0 0 24 24">
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<path d="M10,4L12,6H20A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z" /> <path d="M10,4L12,6H20A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z" />
</svg> </svg>
</button> </button>

2
src/components/Switch.jsx
View File

@@ -3,7 +3,7 @@ import { h } from 'preact';
export default function Switch({ export default function Switch({
checked, checked,
onChange, onChange,
labels, labels = [],
children, children,
showBothLabels showBothLabels
}) { }) {

9
src/style.css
View File

@@ -87,6 +87,9 @@ button {
.flex { .flex {
display: flex; display: flex;
} }
.d-f {
display: flex;
}
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
@@ -95,7 +98,9 @@ button {
.flex-v-center { .flex-v-center {
align-items: center; align-items: center;
} }
.ai-c {
align-items: center;
}
.flex-h-center { .flex-h-center {
justify-content: center; justify-content: center;
} }
@@ -759,6 +764,8 @@ body > #demo-frame {
.btn--dark > svg { .btn--dark > svg {
fill: #9297b3; fill: #9297b3;
width: 20px;
height: 20px;
} }
.btn--dark > svg:not(:last-child) { .btn--dark > svg:not(:last-child) {
margin-right: 4px; margin-right: 4px;