Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit aea7cc5

Browse files
RSS1102RSS1102
authored
refactor： using css instead of scss (electron-vite#168)
* refactor： using `css` instead of `scss` remove dependency `scss` * fix: progress bar display * fix: `className` error
1 parent 766b9fb commit aea7cc5

14 files changed

+158
-170
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"electron-builder": "^24.6.3",
3131
"react": "^18.2.0",
3232
"react-dom": "^18.2.0",
33-
"sass": "^1.66.1",
3433
"typescript": "^5.1.6",
3534
"vite": "^4.4.9",
3635
"vite-plugin-electron": "^0.13.0-beta.3",

‎src/App.scss renamed to ‎src/App.css

File renamed without changes.

‎src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState } from 'react'
22
import Update from '@/components/update'
33
import logoVite from './assets/logo-vite.svg'
44
import logoElectron from './assets/logo-electron.svg'
5-
import './App.scss'
5+
import './App.css'
66

77
console.log('[App.tsx]', `Hello world from Electron ${process.versions.electron}!`)
88

‎src/components/update/Modal/index.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { ReactNode } from 'react'
22
import { createPortal } from 'react-dom'
3-
import styles from './modal.module.scss'
3+
import './modal.css'
44

55
const ModalTemplate: React.FC<React.PropsWithChildren<{
66
title?: ReactNode
@@ -23,14 +23,14 @@ const ModalTemplate: React.FC<React.PropsWithChildren<{
2323
} = props
2424

2525
return (
26-
<div className={styles.modal}>
27-
<div className='modal-mask' />
28-
<div className='modal-warp'>
29-
<div className='modal-content' style={{ width }}>
30-
<div className='modal-header'>
31-
<div className='modal-header-text'>{title}</div>
26+
<div className='update-modal'>
27+
<div className='update-modal__mask' />
28+
<div className='update-modal__warp'>
29+
<div className='update-modal__content' style={{ width }}>
30+
<div className='content__header'>
31+
<div className='content__header-text'>{title}</div>
3232
<span
33-
className='modal-close'
33+
className='update-modal--close'
3434
onClick={onCancel}
3535
>
3636
<svg
@@ -42,9 +42,9 @@ const ModalTemplate: React.FC<React.PropsWithChildren<{
4242
</svg>
4343
</span>
4444
</div>
45-
<div className='modal-body'>{children}</div>
45+
<div className='content__body'>{children}</div>
4646
{typeof footer !== 'undefined' ? (
47-
<div className='modal-footer'>
47+
<div className='content__footer'>
4848
<button onClick={onCancel}>{cancelText}</button>
4949
<button onClick={onOk}>{okText}</button>
5050
</div>

‎src/components/update/Modal/modal.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.update-modal {
2+
--primary-color: rgb(224, 30, 90);
3+
4+
.update-modal__mask {
5+
width: 100vw;
6+
height: 100vh;
7+
position: fixed;
8+
left: 0;
9+
top: 0;
10+
z-index: 9;
11+
background: rgba(0, 0, 0, 0.45);
12+
}
13+
14+
.update-modal__warp {
15+
position: fixed;
16+
top: 50%;
17+
left: 50%;
18+
transform: translate(-50%, -50%);
19+
z-index: 19;
20+
}
21+
22+
.update-modal__content {
23+
box-shadow: 0 0 10px -4px rgb(130, 86, 208);
24+
overflow: hidden;
25+
border-radius: 4px;
26+
27+
.content__header {
28+
display: flex;
29+
line-height: 38px;
30+
background-color: var(--primary-color);
31+
32+
.content__header-text {
33+
font-weight: bold;
34+
width: 0;
35+
flex-grow: 1;
36+
}
37+
}
38+
39+
.update-modal--close {
40+
width: 30px;
41+
height: 30px;
42+
margin: 4px;
43+
line-height: 34px;
44+
text-align: center;
45+
cursor: pointer;
46+
47+
svg {
48+
width: 17px;
49+
height: 17px;
50+
}
51+
}
52+
53+
.content__body {
54+
padding: 10px;
55+
background-color: #fff;
56+
color: #333;
57+
}
58+
59+
.content__footer {
60+
padding: 10px;
61+
background-color: #fff;
62+
display: flex;
63+
justify-content: end;
64+
65+
button {
66+
padding: 7px 11px;
67+
background-color: var(--primary-color);
68+
font-size: 14px;
69+
margin-left: 10px;
70+
71+
&:first-child {
72+
margin-left: 0;
73+
}
74+
}
75+
}
76+
}
77+
78+
.icon {
79+
padding: 0 15px;
80+
width: 20px;
81+
fill: currentColor;
82+
83+
&:hover {
84+
color: rgba(0, 0, 0, 0.4);
85+
}
86+
}
87+
}

‎src/components/update/Modal/modal.module.scss

-89
This file was deleted.

‎src/components/update/Progress/index.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from 'react'
2-
import styles from './progress.module.scss'
2+
import './progress.css'
33

44
const Progress: React.FC<React.PropsWithChildren<{
55
percent?: number
66
}>> = props => {
77
const { percent = 0 } = props
88

99
return (
10-
<div className={styles.progress}>
11-
<div className='progress-pr'>
10+
<div className='update-progress'>
11+
<div className='update-progress-pr'>
1212
<div
13-
className='progress-rate'
14-
style={{ width: `${percent}%` }}
13+
className='update-progress-rate'
14+
style={{ width: `${3 * percent}px` }}
1515
/>
1616
</div>
17-
<span className='progress-num'>{(percent ?? 0).toString().substring(0,4)}%</span>
17+
<span className='update-progress-num'>{(percent ?? 0).toString().substring(0, 4)}%</span>
1818
</div>
1919
)
2020
}

‎src/components/update/Progress/progress.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.update-progress {
2+
display: flex;
3+
align-items: center;
4+
5+
.update-progress-pr {
6+
border: 1px solid #000;
7+
border-radius: 3px;
8+
height: 6px;
9+
width: 300px;
10+
}
11+
12+
.update-progress-rate {
13+
height: 6px;
14+
border-radius: 3px;
15+
background-image: linear-gradient(to right, rgb(130, 86, 208) 0%, var(--primary-color) 100%)
16+
}
17+
18+
.update-progress-num {
19+
margin: 0 10px;
20+
}
21+
}

‎src/components/update/Progress/progress.module.scss

-23
This file was deleted.

‎src/components/update/index.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ProgressInfo } from 'electron-updater'
33
import { useCallback, useEffect, useState } from 'react'
44
import Modal from '@/components/update/Modal'
55
import Progress from '@/components/update/Progress'
6-
import styles from './update.module.scss'
6+
import './update.css'
77

88
const Update = () => {
99
const [checking, setChecking] = useState(false)
@@ -98,21 +98,21 @@ const Update = () => {
9898
onOk={modalBtn?.onOk}
9999
footer={updateAvailable ? /* hide footer */null : undefined}
100100
>
101-
<div className={styles.modalslot}>
101+
<div className='modal-slot'>
102102
{updateError
103103
? (
104-
<div className='update-error'>
104+
<div>
105105
<p>Error downloading the latest version.</p>
106106
<p>{updateError.message}</p>
107107
</div>
108108
) : updateAvailable
109109
? (
110-
<div className='can-available'>
110+
<div>
111111
<div>The last version is: v{versionInfo?.newVersion}</div>
112-
<div className='new-version-target'>v{versionInfo?.version} -&gt; v{versionInfo?.newVersion}</div>
113-
<div className='update-progress'>
114-
<div className='progress-title'>Update progress:</div>
115-
<div className='progress-bar'>
112+
<div className='new-version__target'>v{versionInfo?.version} -&gt; v{versionInfo?.newVersion}</div>
113+
<div className='update__progress'>
114+
<div className='progress__title'>Update progress:</div>
115+
<div className='progress__bar'>
116116
<Progress percent={progressInfo?.percent} ></Progress>
117117
</div>
118118
</div>

‎src/components/update/update.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.modal-slot {
2+
.update-progress {
3+
display: flex;
4+
}
5+
6+
.new-version__target,
7+
.update__progress {
8+
margin-left: 40px;
9+
}
10+
11+
.progress__title {
12+
margin-right: 10px;
13+
}
14+
15+
.progress__bar {
16+
width: 0;
17+
flex-grow: 1;
18+
}
19+
20+
.can-not-available {
21+
padding: 20px;
22+
text-align: center;
23+
}
24+
}

0 commit comments

Comments
 (0)