mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-24 15:31: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">
<svg
width="287px"
height="150px"
height="80px"
viewBox="0 0 287 197"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +117,7 @@ export class CreateNewModal extends Component {
<div style="flex:1" class="tac ml-2">
<svg
width="286px"
height="150px"
height="80px"
viewBox="0 0 286 196"
version="1.1"
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">
<button
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)"
onClick={props.runBtnClickHandler}
>
<svg style="width: 14px; height: 14px;">
<svg>
<use xlinkHref="#play-icon" />
</svg>
<Trans>Run</Trans>
@@ -37,7 +37,7 @@ export function MainHeader(props) {
onClick={props.addLibraryBtnHandler}
data-event-category="ui"
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`)}
>
<Trans>Add library</Trans>{' '}
@@ -54,30 +54,24 @@ export function MainHeader(props) {
)}
<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"
onClick={props.newBtnHandler}
>
<svg
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<svg viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
<Trans>New</Trans>
</button>
<button
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.unsavedEditCount ? 'is-marked' : 0}`}
aria-label="Save current creation (Ctrl/⌘ + S)"
onClick={props.saveBtnHandler}
>
<svg
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<svg 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" />
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
@@ -87,16 +81,13 @@ export function MainHeader(props) {
</button>
<button
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' : ''
}`}
aria-label="Open a saved creation (Ctrl/⌘ + O)"
onClick={props.openBtnHandler}
>
<svg
style="width:14px;height:14px;vertical-align:middle;"
viewBox="0 0 24 24"
>
<svg 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" />
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
@@ -108,7 +99,7 @@ export function MainHeader(props) {
onClick={props.loginBtnHandler}
data-event-category="ui"
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"
>
<Trans>Login</Trans>/<Trans>Signup</Trans>

24
src/components/SidePane.jsx
View File

@@ -79,10 +79,7 @@ function File({
class="btn btn--dark"
onClick={onRenameBtnClick.bind(null, file)}
>
<svg
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<svg viewBox="0 0 24 24">
<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>
</button>
@@ -92,10 +89,7 @@ function File({
class="btn btn--dark"
onClick={onRemoveBtnClick.bind(null, file)}
>
<svg
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<svg viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg>
</button>
@@ -236,18 +230,15 @@ export class SidePane extends Component {
onDragOver={this.dragOverHandler.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
<div class="flex flex-v-center">
<div class="flex ai-c">
<button
type="button"
class="btn btn--dark"
onClick={this.addFileButtonClickHandler.bind(this)}
>
<svg
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<svg viewBox="0 0 24 24">
<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>
</button>
@@ -256,10 +247,7 @@ export class SidePane extends Component {
class="btn btn--dark"
onClick={this.addFolderButtonClickHandler.bind(this)}
>
<svg
viewBox="0 0 24 24"
style="vertical-align:middle;width:14px;height:14px"
>
<svg viewBox="0 0 24 24">
<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>
</button>

2
src/components/Switch.jsx
View File

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

9
src/style.css
View File

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