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

notification等组件css调整

This commit is contained in:
wurou 2022-10-08 19:18:55 +08:00
parent 1766473e3c
commit 583cd335a1
7 changed files with 467 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/brightness-slider/brightness-slider.ts
View File

@ -109,21 +109,21 @@ export class BrightnessSlider extends LitElement {
color: var(--icon-color-lm);
}
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
.sliderBar {
border-radius: 16px;
border-radius: 5px;
}
.progress {
border-radius: 16px;
border-radius: 5px;
}
.sliderBar::before {
width: 48px;
height: 48px;
left: 29px;
top: 29px;
font-size: 48px;
width: 16px;
height: 16px;
left: 10px;
top: 10px;
font-size: 16px;
}
}
@ -144,6 +144,24 @@ export class BrightnessSlider extends LitElement {
font-size: 24px;
}
}
@media screen and (min-width: 900px) {
.sliderBar {
border-radius: 16px;
}
.progress {
border-radius: 16px;
}
.sliderBar::before {
width: 48px;
height: 48px;
left: 29px;
top: 29px;
font-size: 48px;
}
}
`
handleEvent(event: TouchEvent) {

68
src/components/drop-down-menu/drop-down-menu.ts
View File

@ -1,6 +1,11 @@
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
import {HeaderBarType} from '../header-bar/header-bar.js'
import {
customElement,
property,
query,
queryAssignedElements,
} from 'lit/decorators.js'
import {HeaderBar, HeaderBarType} from '../header-bar/header-bar.js'
import {IconControlBarType} from '../icon-control-bar/icon-control-bar.js'
import '../icon-control-bar/icon-control-bar.js'
import '../header-bar/header-bar.js'
@ -13,6 +18,7 @@ export enum DropDownMenuType {
export class DropDownMenu extends LitElement {
@property({type: DropDownMenuType}) type = ''
@queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
@query('header-bar') headerBar!: HeaderBar
getOnlyTime(): HTMLTemplateResult {
return html`
<div class="inner">
@ -64,6 +70,10 @@ export class DropDownMenu extends LitElement {
}
}
observeTimeFormatChange() {
this.headerBar.autoUpdateDateTime()
}
static styles = css`
:host {
width: inherit;
@ -78,38 +88,39 @@ export class DropDownMenu extends LitElement {
}
.inner {
width: inherit;
height: inherit;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
header-bar[type='only-time'] {
dispaly: flex;
width: 512px;
height: 52px;
width: 170px;
height: 17px;
}
header-bar[type='date-time'] {
dispaly: flex;
width: 860px;
height: 64px;
width: 286px;
height: 21px;
}
.all-quick-icons {
width: 100%;
height: calc(100% - 52px);
height: calc(100% - 31px);
position: relative;
top: 40px;
// top: 40px;
top: 2.4%;
}
.others {
display: flex;
flex-direction: column;
position: absolute;
top: 100px;
top: 33.3px;
}
}
@ -128,9 +139,10 @@ export class DropDownMenu extends LitElement {
.all-quick-icons {
width: 100%;
height: calc(100% - 26px);
height: calc(100% - 46px);
position: relative;
top: 20px;
// top: 20px;
top: 2.4%;
}
.others {
@ -140,6 +152,34 @@ export class DropDownMenu extends LitElement {
top: 50px;
}
}
@media screen and (min-width: 900px) {
header-bar[type='only-time'] {
dispaly: flex;
width: 512px;
height: 52px;
}
header-bar[type='date-time'] {
dispaly: flex;
width: 860px;
height: 64px;
}
.all-quick-icons {
width: 100%;
height: calc(100% - 92px);
position: relative;
top: 2.4%;
}
.others {
display: flex;
flex-direction: column;
position: absolute;
top: 100px;
}
}
`
}

83
src/components/header-bar/header-bar.ts
View File

@ -121,44 +121,44 @@ export class HeaderBar extends LitElement {
color: var(--time-date-date-color-dm);
}
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
.time-outer > #time {
height: 52px;
line-height: 52px;
font-size: 52px;
height: 17px;
line-height: 17px;
font-size: 17px;
}
.time-icons {
display: flex;
width: 136px;
width: 45px;
position: relative;
right: 4px;
right: 1px;
}
.time-icons > ::slotted(:last-child) {
position: relative;
left: 40px;
left: 13px;
}
.time-date {
line-height: 64px;
left: 10px;
line-height: 21px;
left: 3px;
}
.time-date > #time {
font-size: 64px;
font-size: 21px;
}
#date {
height: 34px;
line-height: 34px;
left: 22px;
font-size: 26px;
height: 11px;
line-height: 11px;
left: 7px;
font-size: 9px;
}
.time-date-icons {
position: relative;
right: 11px;
right: 4px;
}
}
@ -202,6 +202,47 @@ export class HeaderBar extends LitElement {
right: 5.5px;
}
}
@media screen and (min-width: 900px) {
.time-outer > #time {
height: 52px;
line-height: 52px;
font-size: 52px;
}
.time-icons {
display: flex;
width: 136px;
position: relative;
right: 4px;
}
.time-icons > ::slotted(:last-child) {
position: relative;
left: 40px;
}
.time-date {
line-height: 64px;
left: 10px;
}
.time-date > #time {
font-size: 64px;
}
#date {
height: 34px;
line-height: 34px;
left: 22px;
font-size: 26px;
}
.time-date-icons {
position: relative;
right: 11px;
}
}
`
firstUpdated() {
@ -304,12 +345,18 @@ export class HeaderBar extends LitElement {
}
return time
} else {
return d.toLocaleString(navigator.languages as string[], {
// hour12: (navigator as any).mozHour12,
hour12: false,
d = d.toLocaleString(navigator.languages as string[], {
hour12: (navigator as any).mozHour12,
hour: 'numeric',
minute: 'numeric',
})
if ((navigator as any).mozHour12) {
d = d.slice(2)
}
if (d.indexOf(':') === 1) {
d = `0${d}`
}
return d
}
} else {
if (d.indexOf(':') == 1) {

28
src/components/icon-control-bar-group/icon-control-bar-group.ts
View File

@ -111,19 +111,19 @@ export class IconControlBarGroup extends LitElement {
background: var(--background-dm);
}
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
:host {
border-radius: 16px;
border-radius: 5px;
}
.icon-only > div > ::slotted(*) {
height: 30px;
border-left: 2px solid var(--line-border-lm);
border-radius: 2px;
height: 10px;
border-left: 1px solid var(--line-border-lm);
border-radius: 1px;
}
:host([deep-mode]) .icon-only > div > ::slotted(*) {
border-left: 2px solid var(--line-border-dm);
border-left: 1px solid var(--line-border-dm);
}
}
@ -142,6 +142,22 @@ export class IconControlBarGroup extends LitElement {
border-left: 1px solid var(--line-border-dm);
}
}
@media screen and (min-width: 900px) {
:host {
border-radius: 16px;
}
.icon-only > div > ::slotted(*) {
height: 30px;
border-left: 2px solid var(--line-border-lm);
border-radius: 2px;
}
:host([deep-mode]) .icon-only > div > ::slotted(*) {
border-left: 2px solid var(--line-border-dm);
}
}
`
}

73
src/components/icon-control-bar/icon-control-bar.ts
View File

@ -36,10 +36,10 @@ export class IconControlBar extends LitElement {
const iconstyle = html`
<style>
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
:host {
width: 104px;
height: 104px;
width: 34px;
height: 34px;
}
}
@ -49,6 +49,13 @@ export class IconControlBar extends LitElement {
height: 52px;
}
}
@media screen and (min-width: 900px) {
:host {
width: 104px;
height: 104px;
}
}
</style>
`
@ -90,10 +97,10 @@ export class IconControlBar extends LitElement {
const iconstyle = html`
<style>
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
:host {
width: 240px;
height: 108px;
width: 80px;
height: 36px;
}
}
@ -103,6 +110,13 @@ export class IconControlBar extends LitElement {
height: 54px;
}
}
@media screen and (min-width: 900px) {
:host {
width: 240px;
height: 108px;
}
}
</style>
`
@ -328,6 +342,7 @@ export class IconControlBar extends LitElement {
p {
position: relative;
left: 13.1%;
color: var(--text-color-lm);
white-space: nowrap;
overflow: hidden;
@ -351,6 +366,45 @@ export class IconControlBar extends LitElement {
color: var(--text-color-dm);
}
.icon-with-state::before {
position: relative;
left: 9.2%;
}
@media screen and (min-width: 300px) {
.with-border {
border-radius: 5px;
}
.icon-button::before {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
.more-info-icon {
width: 5px;
height: 5px;
position: relative;
left: 19px;
}
.more-info-icon::after {
width: 5px;
height: 5px;
line-height: 5px;
font-size: 5px;
}
p {
width: 33px;
height: 7px;
font-size: 7px;
line-height: 7px;
}
}
@media screen and (min-width: 600px) {
.with-border {
border-radius: 8px;
@ -363,11 +417,6 @@ export class IconControlBar extends LitElement {
font-size: 24px;
}
.icon-with-state::before {
position: relative;
left: 11px;
}
.more-info-icon {
width: 8px;
height: 8px;
@ -385,8 +434,6 @@ export class IconControlBar extends LitElement {
p {
width: 50px;
height: 10px;
left: 17px;
font-weight: 400;
font-size: 10.5px;
line-height: 10px;
}

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

@ -166,24 +166,36 @@ export class StarNotificationGroup extends LitElement {
}
static styles = css`
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
:host {
width: 860px;
width: 286px;
height: 50px;
display: block;
margin: 16px 170px 0;
border-radius: 20px;
margin: 5px 56px 0;
border-radius: 7px;
}
}
@media screen and (min-width: 600px) {
:host {
width: 430px;
height: 76px;
display: block;
margin: 8px 85px 0;
border-radius: 10px;
}
}
@media screen and (min-width: 900px) {
:host {
width: 860px;
height: 152px;
display: block;
margin: 16px 170px 0;
border-radius: 20px;
}
}
:host([show='false']) ::slotted(*) {
display: none;
}

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

@ -285,8 +285,10 @@ export class StarNotification extends LitElement {
let translateX
if (screen.width >= 900) {
translateX = 266
} else {
} else if (screen.width >= 600) {
translateX = 133
} else {
translateX = 88
}
this.notification.style.transform =
'translateX(-' + translateX + 'px)'
@ -404,6 +406,7 @@ export class StarNotification extends LitElement {
flex: none;
order: 0;
flex-grow: 0;
font-weight: 600;
}
.notification > div.title-container .timestamp {
@ -558,148 +561,148 @@ export class StarNotification extends LitElement {
color: #f4f4f4;
}
@media screen and (min-width: 900px) {
@media screen and (min-width: 300px) {
:host([notificationType='one-notification']) {
margin: 16px 0 0 0;
margin: 5px 0 0 0;
}
.notification {
height: 152px;
width: 860px;
height: 50px;
width: 286px;
}
.top-border-radius {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bottom-border-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.border-radius {
border-radius: 20px;
border-radius: 6px;
}
.notification > img {
width: 48px;
height: 48px;
width: 16px;
height: 16px;
pointer-events: none;
margin: 26px 10px 78px 26px;
margin: 9px 3px 26px 9px;
}
.notification > div.title-container {
width: calc(100% - 84px);
left: 84px;
top: 36px;
width: calc(100% - 28px);
left: 28px;
top: 23.7%;
}
.notification > div.title-container .title {
height: 28px;
line-height: 28px;
font-size: 28px;
height: 9px;
line-height: 9px;
font-size: 9px;
}
.notification > div.title-container .timestamp {
height: 32px;
right: 32px;
top: -4px;
font-size: 24px;
line-height: 32px;
height: 10px;
right: 10px;
top: -1px;
font-size: 8px;
line-height: 10px;
}
.notification > div.detail {
width: calc(100% - 84px);
left: 84px;
top: 84px;
width: calc(100% - 28px);
left: 28px;
top: 55.3%;
}
.notification > div.detail .detail-content {
width: 740px;
height: 34px;
font-size: 26px;
line-height: 34px;
width: 246px;
height: 11px;
font-size: 8px;
line-height: 11px;
}
.notification > div.detail .arrow-up {
width: 56px;
height: 34px;
right: 26px;
bottom: 30px;
line-height: 34px;
border-radius: 189px;
width: 18px;
height: 11px;
right: 9px;
bottom: 10px;
line-height: 11px;
border-radius: 63px;
}
.notification > div.detail .arrow-up::after {
font-size: 35px;
font-size: 12px;
}
.btn-tool {
right: 18px;
right: 6px;
}
.btn-tool > div:first-child {
margin-right: 44px;
margin-right: 15px;
visibility: hidden;
}
.btn-tool > div {
width: 80px;
height: 80px;
width: 26px;
height: 26px;
}
.btn-tool > div::after {
width: 32px;
height: 32px;
line-height: 32px;
font-size: 32px;
width: 10px;
height: 10px;
line-height: 10px;
font-size: 10px;
}
.container {
width: calc(100% - 84px);
left: 84px;
width: calc(100% - 28px);
left: 28px;
}
.one-container {
top: 36px;
top: 12px;
}
.another-container {
top: 89px;
top: 29px;
}
.container .title {
height: 28px;
line-height: 28px;
font-size: 28px;
height: 9px;
line-height: 9px;
font-size: 9px;
}
.container .detail-content {
height: 34px;
line-height: 34px;
left: 24px;
top: -3px;
font-size: 26px;
height: 11px;
line-height: 11px;
left: 8px;
top: -1px;
font-size: 9px;
}
.one-container .timestamp {
height: 34px;
right: 34px;
top: -4px;
font-size: 24px;
line-height: 32px;
height: 11px;
right: 11px;
top: -1px;
font-size: 8px;
line-height: 11px;
}
.another-container .notificaiton-counts {
width: 56px;
height: 34px;
right: 26px;
bottom: 30px;
width: 18px;
height: 11px;
right: 8px;
bottom: 10px;
top: -1px;
line-height: 34px;
font-size: 20px;
border-radius: 189px;
line-height: 11px;
font-size: 7px;
border-radius: 63px;
}
}
@ -738,6 +741,7 @@ export class StarNotification extends LitElement {
width: calc(100% - 42px);
left: 42px;
top: 18px;
top: 23.7%;
}
.notification > div.title-container .title {
@ -758,6 +762,7 @@ export class StarNotification extends LitElement {
width: calc(100% - 42px);
left: 42px;
top: 42px;
top: 55.3%;
}
.notification > div.detail .detail-content {
@ -847,6 +852,155 @@ export class StarNotification extends LitElement {
border-radius: 94.5px;
}
}
@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;
top: 23.7%;
}
.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;
top: 55.3%;
}
.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;
}
}
`
}