mirror of
https://github.com/0PandaDEV/Qopy.git
synced 2025-04-21 21:24:05 +02:00
refactor: serach function now async which is way faster
This commit is contained in:
pandadev
parent
ae878b7203
commit
f435a7b20a
14 changed files with 203 additions and 106 deletions
186
styles/index.scss
Normal file
186
styles/index.scss
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
$primary: #2e2d2b;
|
||||
$accent: #feb453;
|
||||
$divider: #ffffff0d;
|
||||
|
||||
$text: #e5dfd5;
|
||||
$text2: #ada9a1;
|
||||
$mutedtext: #78756f;
|
||||
|
||||
$search-height: 56px;
|
||||
$sidebar-width: 286px;
|
||||
$bottom-bar-height: 39px;
|
||||
$info-panel-height: 160px;
|
||||
$content-view-height: calc(
|
||||
100% - $search-height - $info-panel-height - $bottom-bar-height
|
||||
);
|
||||
|
||||
main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: $primary;
|
||||
border: 1px solid $divider;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 376px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14px 8px;
|
||||
gap: 8px;
|
||||
min-width: 286px;
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
.time-separator {
|
||||
font-size: 12px;
|
||||
color: $text2;
|
||||
font-family: SFRoundedSemiBold;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.group {
|
||||
& + .group {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.results-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.favicon,
|
||||
.image,
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
font-family: CommitMono !important;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1;
|
||||
border-radius: 10px;
|
||||
width: 462px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
color: $text;
|
||||
|
||||
&:not(:has(.image)) {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
span.content-text {
|
||||
font-family: CommitMono !important;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.information {
|
||||
min-height: 160px;
|
||||
width: 462px;
|
||||
border-top: 1px solid $divider;
|
||||
padding: 14px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
|
||||
.title {
|
||||
font-family: SFRoundedSemiBold;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.6px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
flex-direction: column;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid $divider;
|
||||
line-height: 1;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: SFRoundedMedium;
|
||||
color: $text2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: CommitMono;
|
||||
color: $text;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
img {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
235
styles/settings.scss
Normal file
235
styles/settings.scss
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
$primary: #2e2d2b;
|
||||
$accent: #feb453;
|
||||
$divider: #ffffff0d;
|
||||
|
||||
$text: #e5dfd5;
|
||||
$text2: #ada9a1;
|
||||
$mutedtext: #78756f;
|
||||
|
||||
main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: $primary;
|
||||
border: 1px solid $divider;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
background-color: $divider;
|
||||
border-radius: 6px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $text2;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: SFRoundedMedium;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 26px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-family: SFRoundedMedium;
|
||||
|
||||
.settings {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-left: -26px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
.names {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
p {
|
||||
font-family: SFRoundedSemiBold;
|
||||
color: $text2;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
color: $mutedtext;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.launch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $mutedtext;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:checked {
|
||||
~ .checkmark {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $text2;
|
||||
}
|
||||
}
|
||||
|
||||
.keybind-input {
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
padding: 6px;
|
||||
border: 1px solid $divider;
|
||||
color: $text2;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
gap: 4px;
|
||||
|
||||
.key {
|
||||
color: $text2;
|
||||
font-family: SFRoundedMedium;
|
||||
background-color: $divider;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.keybind-input:focus {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.empty-keybind {
|
||||
border-color: rgba(255, 82, 82, 0.298);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
border-bottom: 1px solid $divider;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
height: 40px;
|
||||
width: calc(100vw - 2px);
|
||||
backdrop-filter: blur(18px);
|
||||
background-color: hsla(40, 3%, 16%, 0.8);
|
||||
position: fixed;
|
||||
bottom: 1px;
|
||||
left: 1px;
|
||||
z-index: 100;
|
||||
border-radius: 0 0 12px 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-inline: 12px;
|
||||
padding-right: 6px;
|
||||
padding-top: 1px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid $divider;
|
||||
|
||||
p {
|
||||
color: $text2;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.logo {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.actions div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background-color: $divider;
|
||||
margin-left: 8px;
|
||||
margin-right: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 4px;
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 7px;
|
||||
background-color: transparent;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.actions:hover {
|
||||
background-color: $divider;
|
||||
}
|
||||
|
||||
&:hover .actions:hover ~ .divider {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue