github.com/verdaccio
1
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-11-08 23:25:51 +01:00
Code Releases Wiki Activity

feat: new verdaccio skin to webui

Browse Source
This commit is contained in:
Lucius Gaitán 2018-05-27 09:25:14 -03:00
parent a4061e6f6d
commit b8b2612e02
No known key found for this signature in database
GPG Key ID: 04DFAF2A7C307172
11 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/webui/src/components/Header/header.scss
View File

@ -6,13 +6,13 @@ .header {
width: 100%;
align-items: center;
background: $primary-color;
color: #fff;
figure {
margin: 0 0 0 10px;
font-size: 14px;
line-height: 18px;
padding: 8px 0;
color: #f9f2f4;
}
.headerWrap {
@ -22,13 +22,24 @@ .header {
@include container-size();
}
.headerRight {
margin-left: auto;
}
.logo {
height: 50px;
}
.welcome {
margin-left: auto;
color: white;
.headerButton {
color: inherit;
border-color: #fff;
background-color: transparent;
&:hover, &:focus {
color: $primary-color;
border-color: #f7f8f6;
background-color: #f7f8f6;
}
}
}

14
src/webui/src/components/Header/index.js
View File

@ -129,14 +129,13 @@ export default class Header extends React.Component {
renderUserActionButton() {
if (!this.isTokenExpire) { // TODO: Check jwt token expire
return (
<div className={ classes.welcome }>
<span className="user-logged-greetings">Hi, {storage.getItem('username')}</span>
&nbsp;
<Button className="header-button-logout" type="danger" onClick={this.handleLogout}>Logout</Button>
<div className="user-logged">
<span className="user-logged-greetings" style={ {marginRight: '10px'} }>Hi, {storage.getItem('username')}</span>
<Button className={`${classes.headerButton} header-button-logout`} type="danger" onClick={this.handleLogout}>Logout</Button>
</div>
);
} else {
return <Button className="header-button-login" type="danger" style={ {marginLeft: 'auto'} } onClick={ this.toggleLoginModal }>Login</Button>;
return <Button className={`${classes.headerButton} header-button-login`} onClick={ this.toggleLoginModal }>Login</Button>;
}
}
@ -154,7 +153,10 @@ export default class Header extends React.Component {
<br/>
npm adduser --registry { registryURL }
</figure>
{this.renderUserActionButton()}
<div className={ classes.headerRight }>
{this.renderUserActionButton()}
</div>
</div>
<Dialog

BIN
src/webui/src/components/Header/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 13 KiB

3
src/webui/src/components/Package/package.scss
View File

@ -3,6 +3,7 @@
.package {
display: block;
position: relative;
color: inherit;
margin: 0;
padding: 10px 0;
cursor: pointer;
@ -10,7 +11,6 @@ .package {
h1 {
font-size: 18px;
color: $primary-color;
:global {
.el-tag {
@ -58,7 +58,6 @@ .package {
left: 0;
content: 'Click to view detail';
text-align: center;
color: $primary-color;
font-size: 18px;
}
}

1
src/webui/src/components/PackageDetail/packageDetail.scss
View File

@ -3,7 +3,6 @@
.pkgDetail {
.title {
font-size: 26px;
color: $primary-color;
border-bottom: 1px solid $border-color;
font-weight: 600;
margin: 0 0 40px;

4
src/webui/src/components/PackageSidebar/Module/style.scss
View File

@ -1,11 +1,13 @@
@import '../../../styles/variable';
.module {
margin-bottom: 10px;
.moduleTitle {
display: flex;
align-items: flex-end;
font-size: 21px;
color: $primary-color;
margin: 0 0 10px;
padding: 5px 0;
font-weight: 600;

2
src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss
View File

@ -7,7 +7,7 @@ .dependenciesModule {
line-height: 1.5;
a {
color: $primary-color;
color: inherit;
}
}
}

1
src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss
View File

@ -7,7 +7,6 @@ .maintainersModule {
background: none;
border: none;
font-size: 14px;
color: $primary-color;
text-align: center;
padding: 10px 0;
}

17
src/webui/src/styles/global.scss
View File

@ -28,4 +28,21 @@ :global {
flex-direction: column;
min-height: 100vh;
}
.el-button {
&:hover, &:focus {
color: $primary-color;
border-color: $primary-color;
}
}
.el-input__inner {
&:hover, &:focus {
border-color: $primary-color;
}
}
.el-dialog__headerbtn:hover .el-dialog__close {
color: $text-black;
}
}

2
src/webui/src/styles/variable.scss
View File

@ -12,7 +12,7 @@ @mixin container-size {
$font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* Colors */
$primary-color: #de4136;
$primary-color: #4b5e40;
$border-color: #e3e3e3;
$text-black: #3c3c3c;
$text-grey: #95989A;

2
test/webui/components/__snapshots__/header.spec.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><button style=\\"margin-left: auto;\\" class=\\"el-button el-button--danger header-button-login\\" type=\\"button\\"><span>Login</span></button></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;
exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><div class=\\"headerRight\\"><button class=\\"el-button el-button--default headerButton header-button-login\\" type=\\"button\\"><span>Login</span></button></div></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;