Skip to content

Commit 8a45ca9

Browse files
virtualvivekvirtualvivek
committed
Improved UI.
1 parent 576b4bb commit 8a45ca9

File tree

20 files changed

+128
-116
lines changed

20 files changed

+128
-116
lines changed

‎.gitattributes

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ src/css-source/stylesheet/variables/** linguist-detectable=false
88

99
# treat as docs dir
1010
src/demo/v4.2.0** linguist-documentation
11-
src/demo/v4.2.1** linguist-detectable=false
11+
src/demo/v4.2.1** linguist-documentation

‎babel.config.json

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
{
22
"presets": [
33
[
4-
"@babel/env",
4+
"@babel/env",
55
{
6-
"targets": {
7-
"edge": "17",
8-
"firefox": "60",
9-
"chrome": "67",
10-
"safari": "11.1"
11-
},
12-
"useBuiltIns": "usage",
13-
"corejs": "3.6.5"
6+
"useBuiltIns": "usage",
7+
"corejs": "3.6.5"
148
}
159
],
1610
["@babel/preset-react"],

‎markdown/md_img_promo_win10.jpg

63 KB
Loading

‎markdown/md_img_promo_win10.png

158 KB
Loading

‎markdown/md_img_promo_win11.jpg

79.7 KB
Loading

‎markdown/md_img_promo_win11.png

282 KB
Loading

‎src/css-source/stylesheet/components/Alerts.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
font-size: 1em;
4747
line-break: auto;
4848
max-height: 24vh;
49-
overflow-y: scroll;
49+
overflow-y: auto;
5050
padding-bottom: 20px;
5151
}
5252
}

‎src/css-source/stylesheet/components/AppNavBar/sub-components/NavBarSubMenu.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
@if $platform == "windows11" {
1717
margin: 5px 10px;
1818
border-radius: 6px;
19-
padding: 12px 20px;
19+
padding: 10px 20px;
2020
}
2121

2222
&:hover { background-color: var(--color-link-bg-hover); }

‎src/css-source/stylesheet/components/Dialog.scss

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
overflow: overlay;
2828
background-color: var(--color-background-default);
2929
}
30+
@-moz-document url-prefix() {
31+
.app-dialog-body {
32+
overflow: auto;
33+
}
34+
}
3035
.app-dialog-header {
3136
padding: 0 15px;
3237
}

‎src/demo/v4.2.1/components/ColorPicker_docs/index.js

+4-39
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
import React from 'react'
2-
import { NavPageContainer, AppTheme, ColorPickerItem, ColorPickerPalette } from '../../_lib'
2+
import { NavPageContainer, ColorPickerItem, ColorPickerPalette } from '../../_lib'
33
import { Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
44
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
55
import { ColorPickerItemImportCode, ColorPickerItemUsageCode, ColorPickerPaletteImportCode, ColorPickerPaletteUsageCode } from './codes'
66
import PropsViewColorPickerItem from './props-view-color-picker-item'
77
import PropsViewColorPickerPalette from './props-view-color-picker-palette'
8-
import Win11Wall from "../../../assets/win11Wall.jpg"
9-
import './css/window-view.css'
108

119
class ColorPickerDocs extends React.Component {
1210

1311
state = {
14-
app_color: "",
15-
app_get_theme : "",
12+
app_color: "#6632a8",
1613
app_platform : "windows10"
1714
}
1815

1916
changeTheme = (color) => {
20-
this.setState({app_color: color.target.value});
17+
this.setState({ app_color: color.target.value });
2118
}
2219

2320
componentDidMount = () => {
@@ -31,39 +28,7 @@ render() {
3128
<NavPageContainer
3229
hasPadding
3330
animateTransition={false}>
34-
<h1>ColorPicker</h1>
35-
36-
<AppTheme
37-
color={this.state.app_color}
38-
colorDarkMode={this.state.app_color}
39-
/>
40-
41-
{this.state.app_platform === "windows10" ?
42-
<div className="windows-view">
43-
<div className="start-view">
44-
<div className="tiles-view-right">
45-
<div className="white-line"></div>
46-
<p></p><p></p><p></p><p></p><p></p><p></p>
47-
</div>
48-
<div className="tiles-view">
49-
<div className="white-line"></div>
50-
<p>Aa</p>
51-
</div>
52-
</div>
53-
<div className="taskbar-view"></div>
54-
</div>
55-
:
56-
<>
57-
<div className="windows-view11">
58-
<img src={Win11Wall} alt="win11UI"/>
59-
<div className="windows-view11_tile">
60-
<div className="windows-view11_button"></div>
61-
</div>
62-
</div>
63-
<br/>
64-
</>
65-
}
66-
31+
<h1 style={{color: this.state.app_color}}>ColorPicker</h1>
6732

6833
<ColorPickerItem
6934
defaultChecked

‎src/demo/v4.2.1/components/Navigation_docs/NavBarLink_docs/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ render() {
116116
</nav>
117117
</div>
118118
<br/>
119-
<Button icon={<i className="icons10-plus"></i>} value="" onClick={this.setIncrement}/>&nbsp;
120-
<Button icon={<i className="icons10-minus"></i>} value="" onClick={this.setDecrement}/>
119+
<Button icon={<i className="icons10-minus"></i>} value="" onClick={this.setDecrement}/>&nbsp;
120+
<Button icon={<i className="icons10-plus"></i>} value="" onClick={this.setIncrement}/>
121121
<br/>
122122
<br/>
123123

‎src/demo/v4.2.1/components/Navigation_docs/NavBarSubMenu_docs/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ render() {
1616

1717
<div style={{width:290,backgroundColor:'var(--color-navbar-bg-default)'}}>
1818
<NavBarSubMenu title="Title">
19-
<div className="app-navbar-wrap">
19+
<div className="app-navbar-wrap" style={{height: 90}}>
2020
<nav className="animate custom" style={{position:'relative'}}>
2121
<ul style={{padding:0,margin:0}} className="app-navbar-list">
2222
<li className="app-navbar-list-item">

‎src/demo/v4.2.1/components/Navigation_docs/NavPageContainer_docs/css/navpagecontainer-view.css

+10-30
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
.demo-navpagecontainer-view {
2-
width: 300px;
3-
height: 170px;
2+
width: 280px;
3+
height: 190px;
44
display: flex;
55
flex-direction: row;
66
position: relative;
7-
border: 4px solid #555;
8-
border-bottom: 24px solid #555;
7+
border: 8px solid #000;
8+
border-radius: 12px;
9+
overflow: hidden;
910
}
1011
.demo-navpagecontainer-navbar {
1112
width: 60px;
@@ -33,43 +34,22 @@
3334
flex-direction: column;
3435
}
3536

36-
.demo-navpagecontainer-toolbar {
37-
width: 245px;
38-
height: min-content;
39-
padding: 0;
40-
font-size: 8px;
41-
text-align: right;
42-
font-weight: bold;
43-
letter-spacing: 2px;
44-
margin: 4px 4px 0 0;
45-
}
46-
4737
.demo-navpagecontainer-page {
4838
height: 100%;
49-
5039
margin: 15px;
5140
display: flex;
5241
background: var(--color-navbar-bg-default);
53-
border: 1px solid var(--color-link-bg-hover);
5442
}
55-
.demo-navpagecontainer-page.no-padding{
56-
margin: 20px 0 0 0;
43+
.demo-navpagecontainer-page.no-padding {
44+
margin: 10px 0 0 0;
5745
width: fit-content;
58-
padding: 10px;
46+
padding: 20px 10px;
5947
}
6048
.demo-navpagecontainer-page p {
6149
margin: 15px;
6250
font-weight: bold;
6351
}
64-
.demo-navpagecontainer-page.no-padding .demo-navpagecontainer-page{
52+
.demo-navpagecontainer-page.no-padding .demo-navpagecontainer-page {
6553
height: auto;
6654
background-color: var(--color-button-default);
67-
}
68-
69-
.demo-navpagecontainer-view i {
70-
width: 100%;
71-
color: #fff;
72-
text-align: center;
73-
position: absolute;
74-
bottom: -22px;
75-
}
55+
}

‎src/demo/v4.2.1/components/Navigation_docs/NavPageContainer_docs/index.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,10 @@ render() {
2323
</div>
2424
</div>
2525
<div className="demo-navpagecontainer-page-column">
26-
<p className="demo-navpagecontainer-toolbar">➖ ⬜ ❌</p>
2726
<div className="demo-navpagecontainer-page">
2827
<p>NavPageContainer <span className='color-primary'>hasPadding</span></p>
2928
</div>
3029
</div>
31-
<i className="icons10-shutdown"></i>
3230
</div>
3331

3432
<h2>Import</h2>
@@ -59,10 +57,9 @@ render() {
5957
</div>
6058
</div>
6159
<div className="demo-navpagecontainer-page-column">
62-
<p className="demo-navpagecontainer-toolbar">➖ ⬜ ❌</p>
6360
<div className="demo-navpagecontainer-page no-padding">
6461
<div className="demo-navpagecontainer-page no-padding">
65-
<p style={{position:"absolute", top:24, left:40}}>NavPageContainer</p>
62+
<p style={{position:"absolute", top: 0, left: 40}}>NavPageContainer</p>
6663
<p>NavPageContainer.Inner</p>
6764
</div>
6865
</div>

‎src/demo/v4.2.1/components/Navigation_docs/SplashScreen_docs/css/navpagecontainer-view.css

+8-16
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
.demo-splash-navpagecontainer-view {
2-
width: 300px;
3-
height: 170px;
2+
width: 280px;
3+
height: 190px;
44
display: flex;
55
flex-direction: row;
66
position: relative;
77
justify-content: center;
8-
border: 4px solid #555;
9-
border-bottom: 24px solid #555;
8+
border: 8px solid #000;
9+
border-radius: 12px;
10+
overflow: hidden;
1011
}
1112
.demo-splash-navpagecontainer-page-column {
1213
display: flex;
@@ -26,26 +27,17 @@
2627
}
2728

2829
.demo-splash-navpagecontainer-page {
29-
width: 96%;
30+
width: 100%;
3031
height: 100%;
31-
margin: 0 0 5px 0;
32+
margin-top: 5px;
3233
align-self: center;
3334
text-align: center;
3435
background: var(--PrimaryColor);
35-
border: 1px solid var(--color-link-bg-hover);
3636
}
3737
.demo-splash-navpagecontainer-page p {
3838
top: 40%;
3939
color: #fff;
4040
margin: 0px auto;
4141
font-weight: bold;
4242
position: relative;
43-
}
44-
45-
.demo-splash-navpagecontainer-view i.icons10-shutdown {
46-
width: 100%;
47-
color: #fff;
48-
text-align: center;
49-
position: absolute;
50-
bottom: -22px;
51-
}
43+
}

‎src/demo/v4.2.1/components/Navigation_docs/SplashScreen_docs/index.js

-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ render() {
2424
<p>SplashScreen</p>
2525
</div>
2626
</div>
27-
<i className="icons10-shutdown"></i>
2827
</div>
2928

3029
<h2>Import</h2>
@@ -66,7 +65,6 @@ render() {
6665
<p><i className="icons10-terminal" style={{fontSize: 28}}></i></p>
6766
</div>
6867
</div>
69-
<i className="icons10-shutdown"></i>
7068
</div>
7169
<br/>
7270

@@ -87,7 +85,6 @@ render() {
8785
<p>Title<br/><span style={{fontWeight: 400, fontSize: 14}}>Subtitle</span></p>
8886
</div>
8987
</div>
90-
<i className="icons10-shutdown"></i>
9188
</div>
9289
<br/>
9390

@@ -108,7 +105,6 @@ render() {
108105
<p><i className="icons10-terminal" style={{fontSize: 28}}></i><br/>Title</p>
109106
</div>
110107
</div>
111-
<i className="icons10-shutdown"></i>
112108
</div>
113109
<br/>
114110

‎src/demo/v4.2.1/utilities/AppTheme_docs/codes.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ const AppThemeImportCode =
33

44
const AppThemeUsageCode =
55
`<AppTheme
6-
scheme={'light'}
7-
color={'#16ab9c'}
8-
colorDarkMode={'#1ee6d1'}
6+
scheme={"light"}
7+
color={"#16ab9c"}
8+
colorDarkMode={"#1ee6d1"}
99
onColorChange={() => {}}
1010
onSchemeChange={() => {}}
1111
/>`;
1212

1313
const SwitchThemeUsageCode =
1414
`changeMode = (e) => {
1515
e.target.checked ?
16-
this.setState({app_mode: 'light'}) :
17-
this.setState({app_mode: 'dark'})
16+
this.setState({app_mode: "light"}) :
17+
this.setState({app_mode: "dark"})
1818
}
1919
2020
return (

‎src/demo/v4.2.1/components/ColorPicker_docs/css/window-view.css renamed to ‎src/demo/v4.2.1/utilities/AppTheme_docs/css/window-view.css

File renamed without changes.

0 commit comments

Comments
 (0)