Skip to content

Commit

Permalink
Merge pull request #51 from a-nano-dust/future-界面优化
Browse files Browse the repository at this point in the history 
[UPDATE]细化css，更便于用户自定义
  • Loading branch information
@a-nano-dust
a-nano-dust committed Jun 17, 2024
2 parents 8c3aecd + c1bf289 commit c09c238
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 66 deletions.
58 changes: 50 additions & 8 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
font-size: calc((15px + var(--d-font-size-factor) * 5px) * var(--d-font-size-custom-enable) + (10px + 0.5 * var(--font-text-size)) * var(--d-font-size-follow-obsidian));
}

.d-normal-font, .d-bold-font {
.d-normal-font, .d-bold-font, .month-view-header-item, .month-view-week-index-item, .year-view-month-item, .year-view-quarter-item, .today-label, .view-selector-label {
font-size: calc((12px + var(--d-font-size-factor) * 4px) * var(--d-font-size-custom-enable) + (8px + 0.4 * var(--font-text-size)) * var(--d-font-size-follow-obsidian));
}

.d-bold-font {
.d-bold-font, .month-view-header-item, .month-view-week-index-item {
font-weight: bold;
}

Expand All @@ -32,11 +32,11 @@
color: var(--interactive-accent);
}

.d-unselected-item {
.d-unselected-item, .calendar-header-content-year, .calendar-header-content-month {
color: var(--text-normal);
}

.d-unselected-item:hover {
.d-unselected-item:hover, .calendar-header-content-year:hover, .calendar-header-content-month:hover {
background-color: var(--interactive-hover);
}

Expand All @@ -49,7 +49,19 @@
background-color: var(--interactive-accent-hover);
}

.calendar-header-item {
.calendar-header-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.calendar-header-row {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.calendar-header-block, .calendar-header-block-year, .calendar-header-block-quarter, .calendar-header-block-month {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -59,6 +71,28 @@
border-radius: 4px;
}

.calendar-header-block-label {
display: flex;
justify-content: space-around;
width: 5em;
align-items: center;
}

.calendar-header-body, .calendar-header-body-year, .calendar-header-body-quarter, .calendar-header-body-month {
display: flex;
align-items: center;
}

.calendar-header-content-year, .calendar-header-content-month {
border-radius: 4px;
width: 4em;
}

.calendar-header-content-quarter {
border-radius: 4px;
width: 3em;
}

.calendar-view-body {
width: 100%;
padding-top: 15px;
Expand All @@ -67,13 +101,17 @@
gap: 4px;
}

.calendar-view-row {
.month-view-header {
margin-bottom: 6px;
}

.calendar-view-row, .month-view-header {
display: flex;
justify-content: space-around;
align-items: flex-start;
}

.calendar-view-item {
.calendar-view-item, .month-view-header-item, .month-view-week-index-item, .month-view-day-item, .year-view-month-item, .year-view-quarter-item {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -82,6 +120,10 @@
border-radius: 2px;
}

.year-view-month-item, .year-view-quarter-item {
width: 3em;
}

.calendar-view-item-body {
font-size: 12px;
}
Expand Down Expand Up @@ -132,7 +174,7 @@
stroke: var(--text-normal);
}

.circular-label {
.circular-label, .today-label, .view-selector-label {
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
Expand Down
59 changes: 24 additions & 35 deletions src/view/calendar_view/CalendarViewHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,15 @@ function YearItem() {
dispatch(updateSelectedItem(newSelectedItem));
}

return <div className="calendar-header-item">
<div style={{display: "flex", alignItems: "center"}} onMouseEnter={() => setHidden(false)}
return <div className="calendar-header-block-year">
<div className="calendar-header-body-year" onMouseEnter={() => setHidden(false)}
onMouseLeave={() => setHidden(true)}>
<ChevronLeft className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}}
onClick={toLastYear}/>
<div className="d-unselected-item" style={{borderRadius: "4px"}}
<ChevronLeft className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}} onClick={toLastYear}/>
<div className="calendar-header-content-year"
onDoubleClick={() => plugin.noteController.openNoteByNoteType(DateTime.local(selectedDate.year), NoteType.YEARLY)}>
<div style={{width: "4em"}}>{selectedDate.year}年</div>
<div>{selectedDate.year}年</div>
</div>
<ChevronRight className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}}
onClick={toNextYear}/>
<ChevronRight className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}} onClick={toNextYear}/>
</div>
<StatisticLabel date={DateTime.local(selectedDate.year)} noteType={NoteType.YEARLY}/>
</div>
Expand Down Expand Up @@ -69,18 +67,15 @@ function MonthItem() {
dispatch(updateSelectedItem(newSelectedItem));
}

return <div className="calendar-header-item">
<div className="d-header-font" style={{display: "flex", alignItems: "center"}}
onMouseEnter={() => setHidden(false)}
return <div className="calendar-header-block-month">
<div className="calendar-header-body-month" onMouseEnter={() => setHidden(false)}
onMouseLeave={() => setHidden(true)}>
<ChevronLeft className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}}
onClick={toLastMonth}/>
<div className="d-unselected-item" style={{borderRadius: "4px"}}
<ChevronLeft className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}} onClick={toLastMonth}/>
<div className="calendar-header-content-month"
onDoubleClick={() => plugin.noteController.openNoteByNoteType(DateTime.local(selectedDate.year, selectedDate.month), NoteType.MONTHLY)}>
<div style={{width: "4em"}}>{selectedDate.month}月</div>
<div>{selectedDate.month}月</div>
</div>
<ChevronRight className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}}
onClick={toNextMonth}/>
<ChevronRight className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}} onClick={toNextMonth}/>
</div>
<StatisticLabel date={DateTime.local(selectedDate.year, selectedDate.month)} noteType={NoteType.MONTHLY}/>
</div>
Expand Down Expand Up @@ -108,14 +103,14 @@ function QuarterItem() {
dispatch(updateSelectedItem(newSelectedItem));
}

return <div className="calendar-header-item">
<div style={{display: "flex", alignItems: "center"}} onMouseEnter={() => setHidden(false)}
return <div className="calendar-header-block-quarter">
<div className="calendar-header-body-quarter" onMouseEnter={() => setHidden(false)}
onMouseLeave={() => setHidden(true)}>
<ChevronLeft className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}}
onClick={toLastQuarter}/>
<div className="d-unselected-item" style={{borderRadius: "4px"}}
<div className="calendar-header-content-quarter"
onDoubleClick={() => plugin.noteController.openNoteByNoteType(DateTime.local(selectedDate.year, selectedDate.quarter * 3 - 2), NoteType.QUARTERLY)}>
<div style={{width: "3em"}}>{plugin.viewController.parseQuarterName(selectedDate.quarter)}</div>
<div>{plugin.viewController.parseQuarterName(selectedDate.quarter)}</div>
</div>
<ChevronRight className="d-icon" style={{visibility: hidden ? 'hidden' : 'visible'}}
onClick={toNextQuarter}/>
Expand Down Expand Up @@ -159,10 +154,10 @@ function TodayItem() {
}

if (isSelected) {
return <div className="d-normal-font d-selected-item circular-label">今</div>
return <div className="today-label d-selected-item">今</div>
}
else {
return <div className="d-normal-font d-unselected-item circular-label" onClick={clickCallback}>今</div>
return <div className="today-label d-unselected-item" onClick={clickCallback}>今</div>
}
}

Expand Down Expand Up @@ -191,29 +186,23 @@ function ViewSelector() {
}

if (calendarViewType === CalendarViewType.MONTH) {
return <div className="d-normal-font d-unselected-item circular-label"
onClick={clickMonthCallback}>月</div>
return <div className="view-selector-label d-unselected-item" onClick={clickMonthCallback}>月</div>
}
else {
return <div className="d-normal-font d-unselected-item circular-label"
onClick={clickYearCallback}>年</div>
return <div className="view-selector-label d-unselected-item" onClick={clickYearCallback}>年</div>
}

}

export default function CalendarViewHeader() {
return <div className="d-header-font" style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
}}>
<div style={{display: "flex", justifyContent: "space-around", flexWrap: "wrap"}}>
return <div className="d-header-font calendar-header-container">
<div className="calendar-header-row">
<YearItem/>
<QuarterItem/>
</div>
<div style={{display: "flex", justifyContent: "space-around", flexWrap: "wrap"}}>
<div className="calendar-header-row">
<MonthItem/>
<div style={{display: "flex", justifyContent: "space-around", width: "5em", alignItems: "center"}}>
<div className="calendar-header-block-label">
<TodayItem/>
<ViewSelector/>
</div>
Expand Down
29 changes: 14 additions & 15 deletions src/view/calendar_view/MonthView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,10 @@ function DayItem({
}

// 被选中和未被选中日期的背景颜色不同
let bodyStyle = "calendar-view-item d-unselected-item";
let bodyStyle = "month-view-day-item d-unselected-item";
const isSelected: boolean = selectedItem.type === SelectedItemType.DAY_ITEM && selectedItem.date.year === targetDay.year && selectedItem.date.month === targetDay.month && selectedItem.date.day === targetDay.day;
if (isSelected) {
bodyStyle = "calendar-view-item d-selected-item";
bodyStyle = "month-view-day-item d-selected-item";
}

return <div className={bodyStyle} onClick={onClickCallback}
Expand Down Expand Up @@ -168,15 +168,14 @@ function WeekIndexItem({targetDay}: { targetDay: DateTime }) {
}
}

let itemStyle = "calendar-view-item d-unselected-item";
let itemBodyStyle = "d-bold-font";
let itemStyle = "month-view-week-index-item d-unselected-item";
if (selectedItem.type === SelectedItemType.WEEK_INDEX_ITEM && selectedItem.date.weekNumber === targetDay.weekNumber) {
itemStyle = "calendar-view-item d-selected-item";
itemStyle = "month-view-week-index-item d-selected-item";
}

return <div className={itemStyle} onClick={onClickCallback}
onDoubleClick={() => plugin.noteController.openNoteBySelectedItem(newSelectItem)}>
<div className={itemBodyStyle}>{targetDay.weekNumber}</div>
<div>{targetDay.weekNumber}</div>
<StatisticLabel date={DateTime.local(targetDay.year, targetDay.month, targetDay.day)}
noteType={NoteType.WEEKLY}/>
</div>
Expand Down Expand Up @@ -210,15 +209,15 @@ function MonthViewRow({
}

function MonthViewHeader() {
return <div className='calendar-view-row'>
<div className="calendar-view-item d-bold-font">周</div>
<div className="calendar-view-item d-bold-font">一</div>
<div className="calendar-view-item d-bold-font">二</div>
<div className="calendar-view-item d-bold-font">三</div>
<div className="calendar-view-item d-bold-font">四</div>
<div className="calendar-view-item d-bold-font">五</div>
<div className="calendar-view-item d-bold-font">六</div>
<div className="calendar-view-item d-bold-font">日</div>
return <div className='month-view-header'>
<div className="month-view-header-item">周</div>
<div className="month-view-header-item">一</div>
<div className="month-view-header-item">二</div>
<div className="month-view-header-item">三</div>
<div className="month-view-header-item">四</div>
<div className="month-view-header-item">五</div>
<div className="month-view-header-item">六</div>
<div className="month-view-header-item">日</div>
</div>
}

Expand Down
14 changes: 6 additions & 8 deletions src/view/calendar_view/YearView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,14 @@ function MonthItem({showYear, showMonth}: { showYear: number, showMonth: number
newSelectItem.date = DateTime.local(showYear, showMonth);

// 被选中和未被选中月份的背景颜色不同
let bodyStyle = "d-normal-font calendar-view-item d-unselected-item";
let bodyStyle = "year-view-month-item d-unselected-item";
if (selectedItem.type === SelectedItemType.MONTH_ITEM && selectedItem.date.year === showYear && selectedItem.date.month === showMonth) {
bodyStyle = "d-normal-font calendar-view-item d-selected-item";
bodyStyle = "year-view-month-item d-selected-item";
}

return <div className={bodyStyle} style={{width: "3em"}} onClick={() => dispatch(updateSelectedItem(newSelectItem))}
return <div className={bodyStyle} onClick={() => dispatch(updateSelectedItem(newSelectItem))}
onDoubleClick={() => plugin.noteController.openNoteBySelectedItem(newSelectItem)}>
<div>{showMonth}月</div>
{/*<div className={dotStyle}/>*/}
<StatisticLabel date={DateTime.local(showYear, showMonth)} noteType={NoteType.MONTHLY}/>
</div>
}
Expand All @@ -45,15 +44,14 @@ function QuarterItem({showYear, showQuarter}: { showYear: number, showQuarter: n
newSelectItem.date = DateTime.local(showYear, showQuarter * 3 - 2);

// 被选中和未被选中月份的背景颜色不同
let bodyStyle = "d-normal-font calendar-view-item d-unselected-item";
let bodyStyle = "year-view-quarter-item d-unselected-item";
if (selectedItem.type === SelectedItemType.QUARTER_ITEM && selectedItem.date.year === showYear && selectedItem.date.quarter === showQuarter) {
bodyStyle = "d-normal-font calendar-view-item d-selected-item";
bodyStyle = "year-view-quarter-item d-selected-item";
}

return <div className={bodyStyle} style={{width: "3em"}} onClick={() => dispatch(updateSelectedItem(newSelectItem))}
return <div className={bodyStyle} onClick={() => dispatch(updateSelectedItem(newSelectItem))}
onDoubleClick={() => plugin.noteController.openNoteBySelectedItem(newSelectItem)}>
<div>{plugin.viewController.parseQuarterName(showQuarter)}</div>
{/*<div className={dotStyle}/>*/}
<StatisticLabel date={DateTime.local(showYear, showQuarter * 3 - 2)} noteType={NoteType.QUARTERLY}/>
</div>
}
Expand Down

0 comments on commit c09c238

Please sign in to comment.