Skip to content

Commit 05f8680

Browse files
bajrangCoderbajrangCoder
authored
feat: improved plugins page ui (#1196)
- now it shows all basic info in list view
1 parent 4ccb67a commit 05f8680

2 files changed

Lines changed: 171 additions & 33 deletions

File tree

‎src/pages/plugins/item.js‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ export default function Item({
1616
name,
1717
icon,
1818
version,
19+
license,
20+
author,
21+
price,
22+
author_verified,
1923
downloads,
2024
installed,
2125
}) {
@@ -26,32 +30,54 @@ export default function Item({
2630
data-action="open"
2731
data-installed={(!!installed).toString()}
2832
>
29-
<span
30-
className="icon"
31-
style={{ backgroundImage: `url(${icon || "./res/puzzle.png"})` }}
32-
></span>
33-
<div className="container">
34-
<div className="text" style={{ justifyContent: "space-between" }}>
35-
{name}
33+
<div className="plugin-header">
34+
<div className="plugin-icon">
35+
<img src={icon || "./res/puzzle.png"} alt={name + " icon"} />
3636
</div>
37-
<small className="value">
38-
<div className="group">
39-
<div className="text">v{version}</div>
40-
</div>
41-
{downloads ? (
42-
<div className="group">
43-
<div className="text">
44-
{helpers.formatDownloadCount(downloads)}
37+
<div className="plugin-info">
38+
<div className="plugin-main">
39+
<div className="plugin-title">
40+
<span className="plugin-name" title={name}>
41+
{name}
42+
</span>
43+
<span className="plugin-version">v{version}</span>
44+
</div>
45+
<div className="plugin-meta">
46+
<div className="plugin-stats">
47+
<span className="icon person"></span>
48+
{typeof author === "object" ? author.name : author || "Unknown"}
49+
{author_verified ? (
50+
<i
51+
className="licons verified"
52+
style={{ color: "#3b82f6" }}
53+
></i>
54+
) : (
55+
""
56+
)}
57+
</div>
58+
<span className="plugin-meta-dot"></span>
59+
<div className="plugin-stats">
60+
<span
61+
className="licons scale"
62+
style={{ fontSize: "12px" }}
63+
></span>
64+
{license || "Unknown"}
4565
</div>
46-
<div
47-
style={{ width: "fit-content" }}
48-
className="icon file_downloadget_app"
49-
></div>
66+
{downloads && (
67+
<>
68+
<span className="plugin-meta-dot"></span>
69+
<div className="plugin-stats">
70+
<span className="icon save_alt"></span>
71+
{helpers.formatDownloadCount(downloads)}
72+
</div>
73+
</>
74+
)}
5075
</div>
51-
) : (
52-
<></>
53-
)}
54-
</small>
76+
</div>
77+
{price !== null && price !== undefined && price !== 0 ? (
78+
<span className="plugin-price">₹{price}</span>
79+
) : null}
80+
</div>
5581
</div>
5682
</div>
5783
);

‎src/pages/plugins/plugins.scss‎

Lines changed: 122 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,136 @@
2525
}
2626
}
2727
}
28-
2928
.list:empty::after {
3029
content: attr(empty-msg);
3130
}
3231

33-
.value {
34-
text-transform: none;
32+
.list-item {
33+
margin: 0;
34+
background: var(--secondary-color);
35+
padding: 0.55rem;
36+
transition: background-color 0.15s ease;
3537
display: flex;
36-
37-
.group {
38+
align-items: center;
39+
&:hover {
40+
background: color-mix(in srgb, var(--primary-color) 20%, transparent);
41+
}
42+
.plugin-header {
3843
display: flex;
3944
align-items: center;
40-
margin-right: 15px;
45+
gap: 0.75rem;
46+
width: 100%;
47+
max-width: 100%;
48+
height: fit-content;
49+
min-height: 32px;
50+
.plugin-icon {
51+
width: 32px;
52+
height: 32px;
53+
border-radius: 6px;
54+
flex-shrink: 0;
55+
overflow: hidden;
56+
display: flex;
57+
align-items: center;
58+
justify-content: center;
59+
60+
img {
61+
width: 100%;
62+
height: 100%;
63+
object-fit: contain;
64+
object-position: center;
65+
}
66+
}
67+
.plugin-info {
68+
flex: 1;
69+
min-width: 0;
70+
display: flex;
71+
align-items: center;
72+
justify-content: space-between;
73+
gap: 0.75rem;
74+
margin: 0;
75+
height: fit-content;
76+
.plugin-main {
77+
min-width: 0;
78+
flex: 1;
79+
.plugin-title {
80+
display: flex;
81+
align-items: center;
82+
gap: 0.5rem;
83+
min-width: 0;
84+
.plugin-name {
85+
font-weight: 500;
86+
font-size: 0.94rem;
87+
overflow: hidden;
88+
text-overflow: ellipsis;
89+
white-space: nowrap;
90+
min-width: 0;
91+
}
92+
.plugin-version {
93+
color: color-mix(in srgb, var(--secondary-text-color) 80%, black);
94+
font-size: 0.75rem;
95+
padding: 0.125rem 0.375rem;
96+
background: var(--primary-color);
97+
border-radius: 4px;
98+
white-space: nowrap;
99+
flex-shrink: 0;
100+
}
101+
}
102+
.plugin-meta {
103+
font-size: 0.81rem;
104+
color: color-mix(in srgb, var(--secondary-text-color) 80%, black);
105+
display: flex;
106+
gap: 0.375rem;
107+
align-items: center;
108+
.plugin-meta-dot {
109+
width: 3px;
110+
height: 3px;
111+
background: color-mix(
112+
in srgb,
113+
var(--secondary-text-color) 80%,
114+
black
115+
);
116+
border-radius: 50%;
117+
}
118+
.plugin-stats {
119+
display: flex;
120+
align-items: center;
121+
gap: 0.25rem;
122+
font-size: 0.81rem;
123+
.icon {
124+
display: inline-flex;
125+
align-items: center;
126+
justify-content: center;
127+
width: 12px;
128+
height: 12px;
129+
font-size: 12px;
130+
line-height: 1;
131+
}
132+
}
133+
}
134+
}
135+
.plugin-price {
136+
background: var(--primary-color);
137+
color: var(--link-text-color);
138+
padding: 0.25rem 0.5rem;
139+
border-radius: 4px;
140+
font-size: 0.75rem;
141+
font-weight: 500;
142+
display: flex;
143+
align-items: center;
144+
gap: 0.25rem;
145+
flex-shrink: 0;
146+
height: fit-content;
147+
}
148+
}
149+
}
150+
151+
@media (max-width: 480px) {
152+
.plugin-title {
153+
flex-wrap: wrap;
154+
}
41155

42-
.icon {
43-
height: 30px;
44-
width: 30px;
45-
font-size: 1em;
156+
.plugin-name {
157+
max-width: calc(100% - 1rem);
46158
}
47159
}
48160
}

0 commit comments

Comments
 (0)