openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #53 in YR/star-web-components from fix-notification to master 

* commit '0c1a2dfdd45cb177c12553768a558325a0699631':
  修改notification组件样式,添加timestamp更新
This commit is contained in:
汪昌棋 2022-09-29 16:24:08 +08:00
parent 879e812df6 0c1a2dfdd4
commit d5a936c779
3 changed files with 342 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/notification-group/notification-group.ts
View File

@ -67,13 +67,13 @@ export class StarNotificationGroup extends LitElement {
;(this.slotElements as StarNotification[]).forEach(
(el: StarNotification) => {
if (this.getAttribute('show') == 'false') {
let self = this
if (el.id == id) {
// 删除某个notification-group
this.dispatchEvent(
new CustomEvent('notification-group-delete', {
detail: {
group: self,
group: this,
id: id,
},
bubbles: true,
composed: true,
@ -166,11 +166,22 @@ export class StarNotificationGroup extends LitElement {
}
static styles = css`
:host {
width: 860px;
display: block;
margin: 16px 170px 0;
border-radius: 20px;
@media screen and (min-width: 900px) {
:host {
width: 860px;
display: block;
margin: 16px 170px 0;
border-radius: 20px;
}
}
@media screen and (min-width: 600px) {
:host {
width: 430px;
display: block;
margin: 8px 85px 0;
border-radius: 10px;
}
}
:host([show='false']) ::slotted(*) {

438
src/components/notification/notification.ts
View File

@ -6,7 +6,6 @@ import {
query,
state,
} from 'lit/decorators.js'
import {WebActivity} from './interface.js'
// ONE ： 单条通知，notification-group展开时第一条notification类型
// MORE ： notification-group中除第一条以外的notification类型
// MORE_FIRST: notification-group折叠时第一条notification类型
@ -40,6 +39,7 @@ export class StarNotification extends LitElement {
@property({type: Boolean}) withArrowUp = false
@property({type: String}) title = ''
@property({type: String}) text = ''
@property({type: String}) originTimestamp = ''
// 仅more-notifiactions-first有
@property({type: String}) secondTitle = ''
@ -66,6 +66,14 @@ export class StarNotification extends LitElement {
},
}
@property({type: String})
get _timestamp() {
return this.timestamp
}
set _timestamp(value: string) {
this.timestamp = value
}
render(): HTMLTemplateResult | typeof nothing {
switch (this.notificationType) {
case NotificationType.ONE:
@ -94,13 +102,17 @@ export class StarNotification extends LitElement {
// console.error('【star-notification】缺少 timestamp 参数')
// return nothing
// }
this.timestamp ? new Date(this.timestamp) : new Date()
// if (!this.src) {
// console.error('【star-notification】缺少 src 参数')
// return nothing
// }
if (!this.manifesturl) {
console.error('【star-notification】缺少 manifesturl 参数')
return nothing
}
this.timestamp ? new Date(this.timestamp) : new Date()
const arrowShow =
this.count > 1 && this.withArrowUp
? html`
@ -191,6 +203,11 @@ export class StarNotification extends LitElement {
return nothing
}
// if (!this.src) {
// console.error('【star-notification】【more-notification-first】缺少 src 参数')
// return nothing
// }
this.timestamp ? new Date(this.timestamp) : new Date()
return html`
<div class="more">
@ -263,7 +280,14 @@ export class StarNotification extends LitElement {
'visible'
;(this.btnTool.children[0] as HTMLElement).style.opacity = '1'
;(this.btnTool.children[1] as HTMLElement).style.opacity = '1'
this.notification.style.transform = 'translateX(-' + 266 + 'px)'
let translateX
if (screen.width >= 900) {
translateX = 266
} else {
translateX = 133
}
this.notification.style.transform =
'translateX(-' + translateX + 'px)'
} else {
// if (touchPosX > 44) {
// (this.btnTool.children[0] as any).style.opacity = 0.6;
@ -291,13 +315,11 @@ export class StarNotification extends LitElement {
event.stopPropagation()
switch ((event.target as HTMLElement).dataset.icon) {
case 'delete':
// console.log("fg45 handle delete!!");
let self = this
this.dispatchEvent(
new CustomEvent('notification-delete', {
detail: {
id: this.id,
notification: self,
notification: this,
},
bubbles: true,
composed: true,
@ -305,10 +327,11 @@ export class StarNotification extends LitElement {
)
break
case 'settings':
let activity = new WebActivity('configure', {})
activity.start().then(
() => {},
() => {}
this.dispatchEvent(
new CustomEvent('notification-settings-configure', {
bubbles: true,
composed: true,
})
)
break
}
@ -332,66 +355,27 @@ export class StarNotification extends LitElement {
// width: 860px;
}
:host([notificationType='one-notification']) {
margin: 16px 0 0 0;
}
.notification {
height: 152px;
width: 860px;
background: var(--notification-background-lm);
}
.top-border-radius {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.bottom-border-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.border-radius {
border-radius: 20px;
}
.notification > img {
width: 48px;
height: 48px;
pointer-events: none;
margin: 26px 10px 78px 26px;
}
.notification > div.title-container {
display: flex;
width: calc(100% - 84px);
position: absolute;
left: 84px;
top: 36px;
}
.notification > div.title-container .title {
height: 28px;
line-height: 28px;
white-space: nowrap;
text-overflow: ellipsis;
flex: none;
order: 0;
flex-grow: 0;
font-size: 28px;
color: #404040;
}
.notification > div.title-container .timestamp {
flex: initial;
position: absolute;
height: 32px;
right: 32px;
// top: 32px;
top: -4px;
font-size: 24px;
line-height: 32px;
text-align: right;
mix-blend-mode: normal;
opacity: 0.65;
@ -407,23 +391,15 @@ export class StarNotification extends LitElement {
.notification > div.detail {
display: flex;
position: absolute;
width: calc(100% - 84px);
left: 84px;
top: 84px;
}
.notification > div.detail .detail-content {
// flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 740px;
height: 34px;
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 34px;
color: #404040;
mix-blend-mode: normal;
opacity: 0.65;
@ -431,21 +407,14 @@ export class StarNotification extends LitElement {
.notification > div.detail .arrow-up {
position: absolute;
width: 56px;
height: 34px;
right: 26px;
bottom: 30px;
top: 0px;
text-align: center;
vertical-align: middle;
line-height: 34px;
display: none;
background: rgba(0, 0, 0, 0.06);
border-radius: 189px;
}
.notification > div.detail .arrow-up::after {
font-size: 35px;
font-family: 'gaia-icons';
content: attr(data-icon);
font-style: normal;
@ -459,31 +428,22 @@ export class StarNotification extends LitElement {
justify-content: space-between;
width: 100%;
height: 100%;
// overflow-x: hidden;
overflow: hidden;
}
.btn-tool {
display: flex;
align-items: center;
right: 18px;
position: absolute;
height: inherit;
visibility: hidden;
}
.btn-tool > div:first-child {
margin-right: 44px;
visibility: hidden;
}
.btn-tool > div:last-child {
visibility: hidden;
}
.btn-tool > div {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
@ -493,13 +453,9 @@ export class StarNotification extends LitElement {
}
.btn-tool > div::after {
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
vertical-align: middle;
content: attr(data-icon);
font-size: 32px;
font-family: gaia-icons;
font-style: normal;
text-rendering: optimizelegibility;
@ -508,22 +464,12 @@ export class StarNotification extends LitElement {
.container {
display: flex;
width: calc(100% - 84px);
position: absolute;
left: 84px;
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
}
.one-container {
top: 36px;
}
.another-container {
top: 89px;
}
.container .title {
height: 28px;
line-height: 28px;
@ -535,12 +481,7 @@ export class StarNotification extends LitElement {
}
.container .detail-content {
height: 34px;
line-height: 34px;
position: relative;
left: 24px;
top: -3px;
font-size: 26px;
color: #404040;
mix-blend-mode: normal;
opacity: 0.65;
@ -550,12 +491,7 @@ export class StarNotification extends LitElement {
}
.one-container .timestamp {
height: 34px;
position: absolute;
right: 34px;
top: -4px;
font-size: 24px;
line-height: 32px;
text-align: right;
color: #404040;
mix-blend-mode: normal;
@ -564,36 +500,308 @@ export class StarNotification extends LitElement {
.another-container .notificaiton-counts {
position: absolute;
width: 56px;
height: 34px;
right: 26px;
bottom: 30px;
top: -1px;
line-height: 34px;
text-align: center;
vertical-align: middle;
font-size: 20px;
color: #000000;
background: rgba(0, 0, 0, 0.06);
border-radius: 189px;
}
:host([dark-mode]) .notification {
height: 152px;
// width: 100%;
width: 860px;
background: var(--notification-background-dm);
}
:host([dark-mode]) .btn-tool > div {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--button-background-color-dm);
border-radius: 50%;
opacity: 0.6;
}
@media screen and (min-width: 900px) {
:host([notificationType='one-notification']) {
margin: 16px 0 0 0;
}
.notification {
height: 152px;
width: 860px;
}
.top-border-radius {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.bottom-border-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.border-radius {
border-radius: 20px;
}
.notification > img {
width: 48px;
height: 48px;
pointer-events: none;
margin: 26px 10px 78px 26px;
}
.notification > div.title-container {
width: calc(100% - 84px);
left: 84px;
top: 36px;
}
.notification > div.title-container .title {
height: 28px;
line-height: 28px;
font-size: 28px;
}
.notification > div.title-container .timestamp {
height: 32px;
right: 32px;
top: -4px;
font-size: 24px;
line-height: 32px;
}
.notification > div.detail {
width: calc(100% - 84px);
left: 84px;
top: 84px;
}
.notification > div.detail .detail-content {
width: 740px;
height: 34px;
font-size: 26px;
line-height: 34px;
}
.notification > div.detail .arrow-up {
width: 56px;
height: 34px;
right: 26px;
bottom: 30px;
line-height: 34px;
border-radius: 189px;
}
.notification > div.detail .arrow-up::after {
font-size: 35px;
}
.btn-tool {
right: 18px;
}
.btn-tool > div:first-child {
margin-right: 44px;
visibility: hidden;
}
.btn-tool > div {
width: 80px;
height: 80px;
}
.btn-tool > div::after {
width: 32px;
height: 32px;
line-height: 32px;
font-size: 32px;
}
.container {
width: calc(100% - 84px);
left: 84px;
}
.one-container {
top: 36px;
}
.another-container {
top: 89px;
}
.container .title {
height: 28px;
line-height: 28px;
font-size: 28px;
}
.container .detail-content {
height: 34px;
line-height: 34px;
left: 24px;
top: -3px;
font-size: 26px;
}
.one-container .timestamp {
height: 34px;
right: 34px;
top: -4px;
font-size: 24px;
line-height: 32px;
}
.another-container .notificaiton-counts {
width: 56px;
height: 34px;
right: 26px;
bottom: 30px;
top: -1px;
line-height: 34px;
font-size: 20px;
border-radius: 189px;
}
}
@media screen and (min-width: 600px) {
:host([notificationType='one-notification']) {
margin: 8px 0 0 0;
}
.notification {
height: 76px;
width: 430px;
}
.top-border-radius {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.bottom-border-radius {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.border-radius {
border-radius: 10px;
}
.notification > img {
width: 24px;
height: 24px;
pointer-events: none;
margin: 13px 5px 39px 13px;
}
.notification > div.title-container {
width: calc(100% - 42px);
left: 42px;
top: 18px;
}
.notification > div.title-container .title {
height: 14px;
line-height: 14px;
font-size: 14px;
}
.notification > div.title-container .timestamp {
height: 16px;
right: 16px;
top: -2px;
font-size: 12px;
line-height: 16px;
}
.notification > div.detail {
width: calc(100% - 42px);
left: 42px;
top: 42px;
}
.notification > div.detail .detail-content {
width: 370px;
height: 17px;
font-size: 13px;
line-height: 17px;
}
.notification > div.detail .arrow-up {
width: 28px;
height: 17px;
right: 13px;
bottom: 15px;
line-height: 17px;
border-radius: 94.5px;
}
.notification > div.detail .arrow-up::after {
font-size: 17.5px;
}
.btn-tool {
right: 9px;
}
.btn-tool > div:first-child {
margin-right: 22px;
visibility: hidden;
}
.btn-tool > div {
width: 40px;
height: 40px;
}
.btn-tool > div::after {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
.container {
width: calc(100% - 42px);
left: 42px;
}
.one-container {
top: 18px;
}
.another-container {
top: 44.5px;
}
.container .title {
height: 14px;
line-height: 14px;
font-size: 14px;
}
.container .detail-content {
height: 17px;
line-height: 17px;
left: 12px;
top: -1.5px;
font-size: 13px;
}
.one-container .timestamp {
height: 17px;
right: 17px;
top: -2px;
font-size: 12px;
line-height: 16px;
}
.another-container .notificaiton-counts {
width: 28px;
height: 17px;
right: 13px;
bottom: 15px;
top: -0.5px;
line-height: 17px;
font-size: 10px;
border-radius: 94.5px;
}
}
`
}

2
src/components/notification/tsconfig.json
View File

@ -4,5 +4,5 @@
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts", "./interface.js"]
"include": ["*.ts"]
}