neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styled Theming + media template introduction (#902)

Browse Source 
* styled theming + screen sizes

* media templates

* mobile-first with min-width media templates

* media templates as export

* sidebar toggle as styled

* combime theming into styled

* tslinting

* rm meda from ThemeProvider

* spacing

* unnecessary; semi; colons;

* typed media function

* abstract theme primary color

* bye bye styled
This commit is contained in:
Ross Bulat 2019-04-08 14:02:11 +08:00 committed by GitHub
parent 586b36ef65
commit 5d24410af2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 128 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/apps/src/Apps.tsx
View File

@ -7,7 +7,6 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD
import React from 'react';
import store from 'store';
import styled from 'styled-components';
import { classes } from '@polkadot/ui-app/util';
import Signer from '@polkadot/ui-signer';
import settings from '@polkadot/ui-settings';
@ -18,6 +17,9 @@ import Connecting from './Connecting';
import Content from './Content';
import SideBar from './SideBar';
import styled, { ThemeProvider } from 'styled-components';
import { media } from '@polkadot/ui-app/media';
type Props = BareProps & {};
type State = {
@ -31,8 +33,15 @@ const Wrapper = styled.div`
align-items: stretch;
box-sizing: border-box;
display: flex;
height: 100%;
min-height: 100vh;
header {
margin-bottom: 0.8rem;
text-align: center;
${media.TABLET`
margin-bottom: 1.1rem;
`}
}
`;
class Apps extends React.Component<Props, State> {
@ -66,28 +75,32 @@ class Apps extends React.Component<Props, State> {
const { isCollapsed, isMenu, menuOpen } = this.state;
return (
<Wrapper
className={
classes('apps-Wrapper',
!isCollapsed ? 'expanded' : 'collapsed',
isMenu ? 'fixed' : '',
menuOpen ? 'menu-open' : '',
`theme--${settings.uiTheme}`)
}
<ThemeProvider
theme={{ theme: settings.uiTheme }}
>
{this.renderMenuBg()}
<SideBar
collapse={this.collapse}
handleResize={this.handleResize}
menuOpen={menuOpen}
isCollapsed={isCollapsed}
toggleMenu={this.toggleMenu}
/>
<Signer>
<Content />
</Signer>
<Connecting />
</Wrapper>
<Wrapper
className={
classes('apps-Wrapper',
!isCollapsed ? 'expanded' : 'collapsed',
isMenu ? 'fixed' : '',
menuOpen ? 'menu-open' : '',
`theme--${settings.uiTheme}`)
}
>
{this.renderMenuBg()}
<SideBar
collapse={this.collapse}
handleResize={this.handleResize}
menuOpen={menuOpen}
isCollapsed={isCollapsed}
toggleMenu={this.toggleMenu}
/>
<Signer>
<Content />
</Signer>
<Connecting />
</Wrapper>
</ThemeProvider>
);
}

25
packages/apps/src/SideBar/SideBar.css
View File

@ -24,7 +24,7 @@
opacity: 0;
width: 0;
}
&.open {
opacity: 1;
}
@ -43,27 +43,6 @@
&.expanded {
width: 12rem;
}
> img {
background: #333;
border-radius: 50%;
cursor: pointer;
left: 0.9rem;
opacity: 0;
padding: 4px;
position: absolute;
transition: opacity 0.2s ease-in, top 0.2s ease-in;
top: -2.9rem;
width: 2.6rem;
&.delayed {
transition-delay: 0.4s;
}
&.open {
opacity: 1;
top: 0.9rem;
}
}
}
.apps--SideBar {
@ -75,7 +54,7 @@
left: 0;
transition: left 0.3s linear;
width: 100%;
.ui.vertical.menu {
display: flex;
height: 100vh;

44
packages/apps/src/SideBar/index.tsx
View File

@ -17,7 +17,11 @@ import Item from './Item';
import NodeInfo from './NodeInfo';
import getLogo from './logos';
import styled from 'styled-components';
import { media } from '@polkadot/ui-app/media';
import { Responsive } from 'semantic-ui-react';
import theme from 'styled-theming';
import { primaryColor } from '@polkadot/ui-app/styles/theme';
type Props = I18nProps & {
collapse: () => void,
@ -27,6 +31,38 @@ type Props = I18nProps & {
toggleMenu: () => void
};
const Toggle = styled.img`
background: ${theme('theme', {
substrate: primaryColor,
polkadot: 'none'
})};
padding: ${theme('theme', {
substrate: '4px',
polkadot: 'none'
})};
border-radius: 50%;
cursor: pointer;
left: 0.9rem;
opacity: 0;
position: absolute;
top: 0px;
transition: opacity 0.2s ease-in, top 0.2s ease-in;
width: 2.6rem;
&.delayed {
transition-delay: 0.4s;
}
&.open {
opacity: 1;
top: 0.9rem;
}
${media.TABLET`
opacity: 0 !important;
top: -2.9rem !important;
`}
`;
class SideBar extends React.PureComponent<Props> {
render () {
const { isCollapsed } = this.props;
@ -35,8 +71,10 @@ class SideBar extends React.PureComponent<Props> {
<Responsive
onUpdate={this.props.handleResize}
className={
classes('apps-SideBar-Wrapper',
isCollapsed ? 'collapsed' : 'expanded')
classes(
'apps-SideBar-Wrapper',
isCollapsed ? 'collapsed' : 'expanded'
)
}
>
{this.renderMenuToggle()}
@ -152,7 +190,7 @@ class SideBar extends React.PureComponent<Props> {
const { toggleMenu, menuOpen } = this.props;
return (
<img
<Toggle
alt='logo'
className={menuOpen ? 'closed' : 'open delayed'}
onClick={toggleMenu}

4
packages/ui-app/package.json
View File

@ -22,6 +22,7 @@
"@types/react-copy-to-clipboard": "^4.2.6",
"@types/react-dropzone": "^4.2.2",
"@types/react-router-dom": "^4.3.0q",
"@types/styled-theming": "^2.2.0",
"chart.js": "^2.7.2",
"codeflask": "^1.4.0",
"i18next": "^15.0.9",
@ -37,6 +38,7 @@
"react-router-dom": "^5.0.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.86.0",
"store": "^2.0.12"
"store": "^2.0.12",
"styled-theming": "^2.2.0"
}
}

6
packages/ui-app/src/constants.ts
View File

@ -6,3 +6,9 @@ export enum BitLengthOption {
CHAIN_SPEC = 128,
NORMAL_NUMBERS = 32
}
export enum ScreenSizes {
DESKTOP = 992,
TABLET = 768,
PHONE = 576
}

19
packages/ui-app/src/media.ts Normal file
View File

@ -0,0 +1,19 @@
// Copyright 2017-2019 @polkadot/ui-app authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { css } from 'styled-components';
import { ScreenSizes } from './constants';
export const media: any = Object
.keys(ScreenSizes)
.reduce((acc: any, label: any) => {
let size: any = ScreenSizes[label];
acc[label] = (...args: any) => (
css`
@media ( min-width: ${size / 16}em) {
${css`${{ ...args }}`}
}
`);
return acc;
}, {});

9
packages/ui-app/src/styles/app.css
View File

@ -95,12 +95,3 @@ article {
padding: 0;
}
}
header {
margin-bottom: 1.1rem;
text-align: center;
@media(max-width: 767px) {
margin-bottom: 0.8rem;
}
}

12
packages/ui-app/src/styles/media.css
View File

@ -70,7 +70,7 @@ th.ui--media-small {
height: auto;
visibility: visible;
width: auto;
}
td.ui--media-small,
@ -85,13 +85,3 @@ th.ui--media-small {
padding-left: 5.2rem !important;
}
}
/* sidebar */
@media (min-width: 768px) {
.apps-SideBar-Wrapper {
> img {
opacity: 0 !important;
top: -2.9rem !important;
}
}
}

10
packages/ui-app/src/styles/theme.ts Normal file
View File

@ -0,0 +1,10 @@
/* Copyright 2017-2019 @polkadot/ui-app authors & contributors
/* This software may be modified and distributed under the terms
/* of the Apache-2.0 license. See the LICENSE file for details. */
import theme from 'styled-theming';
export const primaryColor = theme('theme', {
substrate: '#333',
polkadot: '#E6007A'
});

7
packages/ui-app/src/styles/theme/polkadot.css
View File

@ -92,13 +92,6 @@
background-color: $red;
}
.apps-SideBar-Wrapper {
> img {
background: none !important;
padding: 0 !important;
}
}
a.apps--SideBar-Item-NavLink:hover {
color: $nav-link;
transition: 0.15s;

10
yarn.lock
View File

@ -2496,6 +2496,11 @@
"@types/react" "*"
csstype "^2.2.0"
"@types/styled-theming@^2.2.0":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@types/styled-theming/-/styled-theming-2.2.0.tgz#0c4971dae7d36e1553779864caf27cc02bb3e8e2"
integrity sha512-IwS8K1jvn1yw3A6oSuA9zXjWW5zOQhM/psUSfehR1k0r60WWlLa1/S7El40loOMSy8blusgn7r5y/dhyEd0kKw==
"@types/tapable@*":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@ -12919,6 +12924,11 @@ styled-components@^4.2.0:
stylis-rule-sheet "^0.0.10"
supports-color "^5.5.0"
styled-theming@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/styled-theming/-/styled-theming-2.2.0.tgz#3084e43d40eaab4bc11ebafd3de04e3622fee37e"
integrity sha1-MITkPUDqq0vBHrr9PeBONiL+434=
stylis-rule-sheet@^0.0.10:
version "0.0.10"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"