DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(admin): mobile first, responsive design

This commit is contained in:
dntzhang 2021-07-10 11:39:05 +08:00
parent 6d50f740d5
commit fdb8ccb3ef
13 changed files with 2812 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/hamburger-menu/demos/js-demo/demo.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Add Omi in One Minute</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body style="background-color: #fefefe;">
<script src="../../src/demo.js"></script>
<div>
</div>
</body>
</html>

46
components/hamburger-menu/demos/js-demo/index.html
View File

@ -2,37 +2,35 @@
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Add Omi in One Minute</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Add Omi in One Minute</title>
</head>
<body>
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="../../src/index.js"></script>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="../../src/index.js"></script>
<div>
<o-hamburger-menu></o-hamburger-menu>
<o-hamburger-menu active></o-hamburger-menu>
<br>
<o-hamburger-menu color="#07C160"></o-hamburger-menu>
<o-hamburger-menu active color="#07C160"></o-hamburger-menu>
<br>
<o-hamburger-menu color="#f5222d"></o-hamburger-menu>
<o-hamburger-menu active color="#f5222d"></o-hamburger-menu>
</div>
<div>
<o-hamburger-menu></o-hamburger-menu>
<o-hamburger-menu active></o-hamburger-menu>
<br>
<o-hamburger-menu color="#07C160"></o-hamburger-menu>
<o-hamburger-menu active color="#07C160"></o-hamburger-menu>
<br>
<o-hamburger-menu color="#f5222d"></o-hamburger-menu>
<o-hamburger-menu active color="#f5222d"></o-hamburger-menu>
</div>
<script>
document.querySelector('o-hamburger-menu').addEventListener('change', function (evt) {
console.log(evt.detail)
})
</script>
<script>
document.querySelector('o-hamburger-menu').addEventListener('change', function (evt) {
console.log(evt.detail)
})
</script>
</body>
</html>
</html>

3
components/hamburger-menu/package.json
View File

@ -7,6 +7,7 @@
"types": "src/index.d.ts",
"scripts": {
"start": "node ./scripts/webpack.build.js -- demo",
"demo": "node ./scripts/webpack.demo.js -- demo",
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
},
"typings": "./dist/index.d.ts",
@ -96,4 +97,4 @@
"@omiu/common": "latest",
"omi": "latest"
}
}
}

90
components/hamburger-menu/scripts/webpack.demo.js Normal file
View File

@ -0,0 +1,90 @@
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const pkgName = require('../package.json')
const componentName = pkgName.name.split('/')[1]
const config = {
devtool: 'source-map',
plugins: [
new ProgressBarPlugin()
],
entry: {
'demo': './src/demo.tsx'
},
output: {
path: path.resolve(__dirname, '../src/'),
filename: 'demo.js',
globalObject: 'this'
},
mode: 'development',
module: {
rules: [{
test: /\.scss$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
// mdc-web doesn't use sass-loader's normal syntax for imports
// across modules, so we add all module directories containing
// mdc-web components to the Sass include path
// https://github.com/material-components/material-components-web/issues/351
includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
}
}
]
},
{
test: /\.css$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'resolve-url-loader'
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'resolve-url-loader'
},
'less-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "url-loader"
},
{
test: /\.[t|j]sx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
watch: process.argv[3] === 'demo',
}
webpack(config, (err, stats) => { // Stats Object
if (err || stats.hasErrors()) {
// Handle errors here
}
// Done processing
})

5
components/hamburger-menu/src/demo.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
import { WeElement } from 'omi';
import './index.tsx';
export default class Table extends WeElement {
render(props: any): JSX.Element;
}

2615
components/hamburger-menu/src/demo.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
components/hamburger-menu/src/demo.js.map Normal file
View File

File diff suppressed because one or more lines are too long

20
components/hamburger-menu/src/demo.tsx Normal file
View File

@ -0,0 +1,20 @@
import { tag, WeElement, h, render } from 'omi'
import './index.tsx'
@tag('table-demo')
export default class Table extends WeElement {
render(props) {
return <div>
<o-hamburger-menu></o-hamburger-menu>
</div>
}
}
render(<table-demo></table-demo>, 'body', {
ignoreAttrs: false
})

1
packages/admin/package.json
View File

@ -18,6 +18,7 @@
"@omiu/color-picker": "^0.0.4",
"@omiu/common": "^0.0.6",
"@omiu/date-picker": "^0.0.4",
"@omiu/hamburger-menu": "^0.0.5",
"@omiu/icon": "^0.0.3",
"@omiu/input": "^0.0.8",
"@omiu/loading": "0.0.2",

7
packages/admin/src/layouts/basic-layout.tsx
View File

@ -10,7 +10,7 @@ import './components/layout-left-panel'
import { tw, sheet } from 'omi-twind'
interface Props {}
interface Props { }
const tagName = 'basic-layout'
declare global {
@ -70,9 +70,8 @@ export default class extends WeElement {
<div class={tw`flex flex-row`}>
<layout-left-panel
class={tw`w-64 transition-all duration-500 ease-in-out${
this.store.isLeftPanelClosed ? ' is-closed' : ''
}`}
class={tw`bg-white z-50 transition-all duration-500 ease-in-out w-3/4 fixed -translate-x-full sm:w-64 sm:relative sm:translate-x-0${this.store.isLeftPanelClosed ? '-translate-x-full w-0 sm:w-0' : ' w-3/4 sm:w-64 translate-x-0'
}`}
></layout-left-panel>
<layout-container class={tw`flex-1`}>
<o-tabs

16
packages/admin/src/layouts/components/layout-header.tsx
View File

@ -4,7 +4,9 @@ import { setTheme } from '@omiu/common'
import logo from '../../assets/logo.svg'
import '@omiu/avatar'
import '@omiu/icon/palette'
interface Props {}
import '@omiu/hamburger-menu'
interface Props { }
const tagName = 'layout-header'
declare global {
@ -28,6 +30,7 @@ export default class extends WeElement<Props> {
window.addEventListener('click', () => {
this.isShowColorPicker = false
//这个导致 o-hamburger-menu 的 active 二次执行传入 undefined,所以 onMenuChange里要记得改写 isLeftPanelClosed
this.update()
})
}
@ -43,11 +46,22 @@ export default class extends WeElement<Props> {
setTheme('primary', evt.detail.color)
}
onMenuChange = (evt) => {
this.store.isLeftPanelClosed = evt.detail
if (this.store.isLeftPanelClosed) {
this.store.openLeftPanel()
} else {
this.store.closeLeftPanel()
}
}
render() {
return (
<div class={tw`bg-gray-100 h-12 text-left border-b-1`}>
<div class={tw`flex justify-between`}>
<div class={tw`flex flex-row p-1 order-1`}>
<o-hamburger-menu class={tw`mt-1.5 ml-1 `} color="#07C160" active={!this.store.isLeftPanelClosed} onchange={this.onMenuChange} ></o-hamburger-menu>
<img class={tw`w-8 m-1 ml-3`} src={logo} alt="logo" />
<div>
<h1 class={tw`ml-3 leading-10 text-gray-500`}>OMI ADMIN</h1>

10
packages/admin/src/layouts/components/layout-left-panel.tsx
View File

@ -2,7 +2,7 @@ import { WeElement, h, tag, classNames } from 'omi'
import { tw, sheet } from 'omi-twind'
import '@omiu/tree'
interface Props {}
interface Props { }
const tagName = 'layout-left-panel'
declare global {
@ -27,7 +27,7 @@ export default class extends WeElement<Props> {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
width: 8px;
top: 40%;
bottom: 0;
margin-top: -25px;
right: -8px;
z-index: 999;
@ -89,7 +89,7 @@ export default class extends WeElement<Props> {
data={this.store.treeData}
></o-tree>
<div
{/* <div
class={classNames({
menu: true,
closed: this.store.isLeftPanelClosed
@ -97,7 +97,7 @@ export default class extends WeElement<Props> {
onclick={(e) => {
this.store.toggleLeftPanel()
}}
v-if="!state.leftPanelIconHided"
>
<svg
aria-hidden="true"
@ -110,7 +110,7 @@ export default class extends WeElement<Props> {
>
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" />
</svg>
</div>
</div> */}
</div>
)
}

12
packages/admin/src/store.js
View File

@ -13,7 +13,7 @@ class Store {
}]
this.tabsActiveIndex = 0
this.isLeftPanelClosed = false
this.isLeftPanelClosed = window.innerWidth < 640
this.treeData = [
{
@ -141,6 +141,16 @@ class Store {
this.ui.baseLayout.update()
}
openLeftPanel() {
this.isLeftPanelClosed = false
this.ui.baseLayout.update()
}
closeLeftPanel() {
this.isLeftPanelClosed = true
this.ui.baseLayout.update()
}
selectTreeNodeById(id) {
this.treeData.forEach(node => {