From 9c0e023ac8176d9402a9b956c58bbdb33a0fb671 Mon Sep 17 00:00:00 2001 From: xiaoluoboding Date: Fri, 22 Nov 2019 18:48:44 +0800 Subject: [PATCH] feat: improve the fullscreen action --- README.md | 14 +++ app/views/WidgetOnly.vue | 8 +- app/views/WidgetWithGrid.vue | 56 +++++++----- src/packages/SmartWidget.vue | 163 +++++++++++++++++------------------ 4 files changed, 136 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index 365609a..72e8dd7 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,8 @@ new Vue({ | fixedHeight | determine whether widget body's height is fixed, only support `smart-widget` | Boolean | `true` or `false` | `false` | | shadow | when to show card shadows | String | `always`、`hover`、`never` | `always` | | translateY | the length of vertically transform | Number | - | 0 | +| isActived | determine whether widget is actived | Boolean | `true` or `false` | `false` | +| activedColor | the length of vertically transform | String | hex color | #0076db | ## SmartWidget Methods @@ -128,6 +130,18 @@ new Vue({ | resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` | | resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` | +## CSS Selector in SmartWidget + +| Name | Description | +|:--------:|--------| +| `.smartwidget` | The main selector in SmartWidget | +| `.is-always-shadow` | Every time an item is being moved and changes position | +| `.is-hover-shadow` | Every time an item is being moved and changes position | +| `.is-never-shadow` | Every time an item is being moved and changes position | +| `.is-actived` | Every time an item is being moved and changes position | +| `.smartwidget-fullscreen` | Every time an item is being moved and changes position | +| `.smartwidget-collapsed` | Every time an item is being moved and changes position | + ## SmartWidgetGrid Props > it's similar with [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout). Care about the attribute `layout`, The value of layout must be an Array of Object items. Each item must have i, x, y, w and h proprties. especially, the i proprties, it's the unique identifier of the widget item, euqal with widget slot. diff --git a/app/views/WidgetOnly.vue b/app/views/WidgetOnly.vue index f6b40a9..dce0be9 100644 --- a/app/views/WidgetOnly.vue +++ b/app/views/WidgetOnly.vue @@ -10,7 +10,11 @@ - +

{{placeholder}}

@@ -31,6 +35,8 @@ fullscreen collapse refresh + is-actived + actived-color="#f4a" :loading="loading" @on-refresh="handleRefresh" @on-fullscreen="handleFullscreen"> diff --git a/app/views/WidgetWithGrid.vue b/app/views/WidgetWithGrid.vue index e53cfcc..02dd404 100644 --- a/app/views/WidgetWithGrid.vue +++ b/app/views/WidgetWithGrid.vue @@ -1,5 +1,9 @@ - + - + - + @@ -115,20 +126,6 @@ export default { ] } }, - methods: { - handleRefresh () { - this.loading = true - setTimeout(() => { - this.loading = false - }, 2000) - }, - handleLayoutUpdated (newLayout) { - console.log(JSON.stringify(newLayout)) - }, - handleMove (params) { - console.log(params) - } - }, created () { this.barData = { dimensions: { @@ -191,6 +188,23 @@ export default { this.donutSetting = { offsetY: '60%' } + }, + methods: { + handleRefresh () { + this.loading = true + setTimeout(() => { + this.loading = false + }, 2000) + }, + handleLayoutUpdated (newLayout) { + console.log(JSON.stringify(newLayout)) + }, + handleMove (params) { + console.log(params) + }, + handleResize (params) { + console.log(params) + } } } diff --git a/src/packages/SmartWidget.vue b/src/packages/SmartWidget.vue index a5298e0..83a7df7 100644 --- a/src/packages/SmartWidget.vue +++ b/src/packages/SmartWidget.vue @@ -1,36 +1,31 @@ @@ -307,29 +311,25 @@ body.no-overflow { display: flex; line-height: 48px; border-bottom: 1px solid #ebeef5; - h2, - h4 { + .widget-header__title { display: inline-block; position: relative; width: auto; margin: 0; font-weight: normal; letter-spacing: 0; - } - h2 { - display: flex; align-items: center; font-size: 16px; - .widget-header__title { - overflow: hidden; - word-break: break-all; - text-overflow: ellipsis; - white-space: nowrap; - } } - h4 { + .widget-header__subtitle { font-size: 12px; color: #777; + margin-left: 10px; + } + .ellis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .widget-header__prefix { background: #0076db; @@ -339,11 +339,12 @@ body.no-overflow { } .widget-header__toolbar { display: flex; - flex: 1; - align-items: center; justify-content: flex-end; + align-items: center; + flex: 1; padding: 0; margin: 0; + // margin-left: auto; a { display: inline-block; text-decoration: none; @@ -361,12 +362,17 @@ body.no-overflow { } } .widget-body { + // display: flex; + // flex-direction: column; will-change: height; position: relative; overflow: hidden; + height: calc(100% - 48px); .widget-body__content { + // display: flex; + // flex: 1; &.fixed-height { - overflow-y: scroll + overflow-y: scroll; } } .widget-body__footer { @@ -381,7 +387,7 @@ body.no-overflow { transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out; } } - // screenfull + // fullscreen &.smartwidget-fullscreen { position: fixed; height: 100%; @@ -393,18 +399,9 @@ body.no-overflow { cursor: default; } } - // fullscreen - // &.smartwidget-fullscreen { - // position: fixed; - // top: 0; - // left: 0; - // right: 0; - // bottom: 0; - // margin: 0; - // z-index: 1050; - // .widget-header { - // cursor: default; - // } - // } + svg.sw-loading { + animation: rotating 2s linear infinite; + cursor: not-allowed; + } }