Skip to content

Commit 9cbbece

Browse files
abruzziJuntao Qiu
abruzzi
and
Juntao Qiu
authored
Refactor the User Interface a bit (#485)
* refactor the ui a bit * fixed title update issue * removed promotion banner - as it's a bit distracting Co-authored-by: Juntao Qiu <[email protected]>
1 parent 8fe3a5e commit 9cbbece

File tree

15 files changed

+327
-216
lines changed

15 files changed

+327
-216
lines changed

‎src/assets/zenuml-icon.png‎

2.9 KB
Loading

‎src/components/ContentWrap.jsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1000,18 +1000,23 @@ export default class ContentWrap extends Component {
10001000
{/*</Tabs>*/}
10011001
<div class="demo-side" id="js-demo-side" style="overflow-y: auto; -webkit-overflow-scrolling: touch;">
10021002
{window.zenumlDesktop ? (null) : (
1003-
<div className={'promotion'}>
1004-
<a target={'_blank'} href={'https://marketplace.atlassian.com/apps/1218380/zenuml-sequence-diagram-free-on-server?hosting=cloud&tab=overview'}>
1005-
Get Free Trial of ZenUML Confluence Plugin via Atlassian Marketplace
1006-
</a>
1007-
<Button
1008-
onClick={this.exportPngClickHandler.bind(this)}>
1009-
Export PNG
1010-
</Button>
1011-
<Button
1012-
onClick={this.exportJpegClickHandler.bind(this)}>
1013-
Export JPEG
1014-
</Button>
1003+
<div className='promotion'>
1004+
<div className="downloads">
1005+
<Button
1006+
className="button icon-button hint--rounded hint--bottom-left"
1007+
aria-label="Export as PNG"
1008+
onClick={this.exportPngClickHandler.bind(this)}>
1009+
<span class="material-symbols-outlined">file_download</span>
1010+
<span>PNG</span>
1011+
</Button>
1012+
<Button
1013+
className="button icon-button hint--rounded hint--bottom-left"
1014+
aria-label="Export as JPEG"
1015+
onClick={this.exportJpegClickHandler.bind(this)}>
1016+
<span class="material-symbols-outlined">file_download</span>
1017+
<span>JPEG</span>
1018+
</Button>
1019+
</div>
10151020
</div>
10161021
)}
10171022

‎src/components/ItemTile.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function ItemTile({
1414
<div
1515
role={focusable ? 'button' : null}
1616
tabindex={focusable ? 0 : null}
17-
class={`js-saved-item-tile saved-item-tile ${
17+
className={`js-saved-item-tile saved-item-tile ${
1818
inline ? 'saved-item-tile--inline' : ''
1919
}`}
2020
data-item-id={item.id}

‎src/components/MainHeader.jsx‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { h } from 'preact';
2+
import { useState } from 'preact/hooks'
23
import { Button } from './common';
34
import { ProductVersionLabel } from '../zenuml/components/MainHeader/ProductVersionLabel/ProductVersionLabel';
45
import featureToggle from '../services/feature_toggle';
@@ -7,16 +8,40 @@ const DEFAULT_PROFILE_IMG =
78
"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";
89

910
export function MainHeader(props) {
11+
const [isEditing, setEditing] = useState(false);
12+
13+
const entryEditing = () => {
14+
setEditing(true);
15+
}
16+
17+
const exitEditing = () => {
18+
setEditing(false);
19+
}
20+
21+
const onBlur = (e) => {
22+
exitEditing();
23+
props.titleInputBlurHandler(e);
24+
}
25+
1026
return (
1127
<div className="main-header">
12-
<input
28+
<div className="header-logo">
29+
<img src="assets/zenuml-icon.png" alt="zenuml logo" />
30+
</div>
31+
{
32+
isEditing ? (<input
33+
autoFocus
1334
type="text"
1435
id="titleInput"
1536
title="Click to edit"
1637
className="item-title-input"
1738
value={props.title}
18-
onBlur={props.titleInputBlurHandler}
19-
/>
39+
onBlur={onBlur}
40+
/>) : (<div className="title" onClick={() => entryEditing()}>
41+
<span>{props.title || 'Untitled'} </span>
42+
<span class="material-symbols-outlined">border_color</span>
43+
</div>)
44+
}
2045
<div className="main-header__btn-wrap flex flex-v-center">
2146
<button
2247
id="runBtn"
@@ -45,70 +70,50 @@ export function MainHeader(props) {
4570
</span>
4671
</Button>
4772
<button
48-
className="btn--dark flex flex-v-center hint--rounded hint--bottom-left button button-editor-solid"
73+
className="btn--dark flex flex-v-center hint--rounded hint--bottom-left button icon-button button-editor-solid"
4974
aria-label="Start a new creation"
5075
onClick={props.newBtnHandler}
5176
>
52-
<svg
53-
style="vertical-align:middle;width:14px;height:14px"
54-
viewBox="0 0 24 24"
55-
>
56-
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
57-
</svg>New
77+
<span class="material-symbols-outlined">add</span>
78+
<span>New</span>
5879
</button>
5980
<button
6081
id="saveBtn"
61-
className={`btn--dark flex flex-v-center hint--rounded hint--bottom-left button button-editor-solid ${
82+
className={`btn--dark flex flex-v-center hint--rounded hint--bottom-left button icon-button button-editor-solid ${
6283
props.isSaving ? 'is-loading' : ''
6384
} ${props.unsavedEditCount ? 'is-marked' : 0}`}
6485
aria-label="Save current creation (Ctrl/⌘ + S)"
6586
onClick={props.saveBtnHandler}
6687
>
67-
<svg
68-
style="vertical-align:middle;width:14px;height:14px"
69-
viewBox="0 0 24 24"
70-
>
71-
<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" />
72-
</svg>
73-
<svg className="btn-loader" width="14" height="14" stroke="#fff">
74-
<use xlinkHref="#loader-icon" />
75-
</svg>
76-
Save
88+
<span class="material-symbols-outlined">save</span>
89+
<span>Save</span>
7790
</button>
7891
<button
7992
id="openItemsBtn"
80-
className={`btn--dark flex flex-v-center hint--rounded hint--bottom-left button button-editor-solid ${
93+
className={`btn--dark flex flex-v-center hint--rounded hint--bottom-left button icon-button button-editor-solid ${
8194
props.isFetchingItems ? 'is-loading' : ''
8295
}`}
8396
aria-label="Open a saved creation (Ctrl/⌘ + O)"
8497
onClick={props.openBtnHandler}
8598
>
86-
<svg
87-
style="width:14px;height:14px;vertical-align:middle;"
88-
viewBox="0 0 24 24"
89-
>
90-
<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" />
91-
</svg>
92-
<svg className="btn-loader" width="14" height="14" stroke="#fff">
93-
<use xlinkHref="#loader-icon" />
94-
</svg>
95-
Open
99+
<span class="material-symbols-outlined">open_in_new</span>
100+
<span>Open</span>
96101
</button>
97102
<Button
98103
onClick={props.loginBtnHandler}
99104
data-event-category="ui"
100105
data-event-action="loginButtonClick"
101-
className="hide-on-login btn--dark flex flex-v-center hint--rounded hint--bottom-left button button-editor-solid"
102-
aria-label="Login/Signup"
106+
className="hide-on-login btn--dark flex flex-v-center hint--rounded hint--bottom-left button icon-button button-editor-solid"
107+
aria-label="Signin"
103108
>
104-
Login/Signup
109+
<span class="material-symbols-outlined">login</span>Sign in
105110
</Button>
106111
<Button
107112
onClick={props.profileBtnHandler}
108113
data-event-category="ui"
109114
data-event-action="headerAvatarClick"
110115
aria-label="See profile or Logout"
111-
className="hide-on-logout btn--dark hint--rounded hint--bottom-left button button-editor-solid"
116+
className="hide-on-logout btn--dark hint--rounded hint--bottom-left button button-editor-solid"
112117
>
113118
<img
114119
id="headerAvatarImg"

‎src/components/Modal.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@ export default class Modal extends Component {
6666
onClick={this.props.closeHandler}
6767
aria-label="Close modal"
6868
title="Close"
69-
class="js-modal__close-btn modal__close-btn"
69+
className="js-modal__close-btn modal__close-btn"
7070
>
71-
Close
71+
<span class="material-symbols-outlined">close</span>
7272
</button>
7373
{this.props.children}
7474
</div>

‎src/components/SavedItemPane.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export default class SavedItemPane extends Component {
145145
class="btn saved-items-pane__close-btn"
146146
id="js-saved-items-pane-close-btn"
147147
>
148-
X
148+
<span class="material-symbols-outlined">close</span>
149149
</button>
150150
<div class="flex flex-v-center" style="justify-content: space-between;">
151151
<h3>My Library ({this.items.length})</h3>

‎src/components/Toolbox.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -480,11 +480,15 @@ class Toolbox extends Component {
480480
</g>
481481
</g>
482482
</svg>
483-
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" onClick={() => {this.insertCode("//Note\nA.message()")}}>
484-
<path d="M26 26H3L3 8H20.2404L26 13.4493V26Z" stroke="#bbbfd3" stroke-width="2" />
485-
<line x1="19" y1="9" x2="19" y2="15" stroke="#bbbfd3" stroke-width="2" />
486-
<line x1="18" y1="15" x2="26" y2="15" stroke="#bbbfd3" stroke-width="2" />
487-
</svg>
483+
484+
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" onClick={() => {this.insertCode("//Note\nA.message()")}}>
485+
<title>Note</title>
486+
<g>
487+
<path d="M26 26H3L3 8H20.2404L26 13.4493V26Z" stroke="#bbbfd3" stroke-width="2" />
488+
<line x1="19" y1="9" x2="19" y2="15" stroke="#bbbfd3" stroke-width="2" />
489+
<line x1="18" y1="15" x2="26" y2="15" stroke="#bbbfd3" stroke-width="2" />
490+
</g>
491+
</svg>
488492

489493
</div>
490494
);

‎src/components/app.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -850,6 +850,10 @@ BookLibService.Borrow(id) {
850850

851851
titleInputBlurHandler(e) {
852852
this.state.currentItem.title = e.target.value;
853+
this.setState({currentItem: {
854+
...this.state.currentItem,
855+
title: e.target.value,
856+
}});
853857
currentBrowserTab.setTitle(this.state.currentItem.title);
854858
if (this.state.currentItem.id) {
855859
this.saveItem();

‎src/components/subscription/SubscriptionAction.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const SubscriptionAction = (props) => {
99
onClick={props.loginCallback}
1010
data-event-category="ui"
1111
data-event-action="loginButtonClick"
12-
className="hide-on-login btn--dark flex flex-v-center hint--rounded hint--bottom-left button button-editor-solid"
13-
aria-label="Login/Signup"
12+
className="hide-on-login btn--dark flex flex-v-center hint--rounded hint--bottom-left button button-editor-solid"
13+
aria-label="Signin"
1414
>
15-
Login/Signup
15+
Sign in
1616
</Button>;
1717
if (userService.isPro()) {
1818
const subscription = userService.subscription();

0 commit comments

Comments
 (0)