Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create portal component added to view child in new window

Browse Source
This commit is contained in:
Vishnu
2025-08-22 11:49:11 +05:30
parent 40de4d77f3
commit 1db5fe5707
4 changed files with 448 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
app/src/styles/components/logs/logs.scss
View File

@@ -1,6 +1,86 @@
@use "../../abstracts/variables.scss" as *;
@use "../../abstracts/mixins.scss" as *;
.log-nav-container {
@include flex-space-between;
align-items: flex-end;
.log-nav-wrapper {
display: flex;
gap: 6px;
.log-nav {
padding: 8px 16px;
border-radius: #{$border-radius-extra-large};
}
.log-nav.active {
background-color: var(--background-color-accent);
color: var(--text-button-color);
}
}
.clear-button {
margin: 0 6px;
padding: 4px 12px;
color: var(--text-disabled);
border-radius: #{$border-radius-large};
&:hover {
font-weight: 300;
color: var(--text-color);
background: var(--background-color-solid-gradient);
}
}
}
.log-entry-wrapper {
height: calc(100% - 80px);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--background-color);
padding: 10px;
border-radius: #{$border-radius-xlarge};
outline: 1px solid var(--border-color);
outline-offset: -1px;
overflow: auto;
.log-entry {
padding: 4px;
border-radius: #{$border-radius-small};
font-size: var(--font-size-small);
display: flex;
.log-icon {
height: 24px;
width: 24px;
@include flex-center;
}
.log-entry-message-container {
@include flex-space-between;
gap: 12px;
width: 100%;
.message-time {
font-size: var(--font-size-tiny);
font-weight: 300;
opacity: 0.8;
text-wrap: nowrap;
// height: 100%;
}
.log-entry-message {
width: 100%;
}
}
&:nth-child(odd) {
background: var(--background-color);
}
}
.no-log {
padding: 20px;
text-align: center;
color: var(--text-color);
}
}
.log-list-container {
width: 100vw;
height: 100vh;
@@ -33,99 +113,35 @@
scale: 0.8;
}
}
.close {
@include flex-center;
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-medium};
svg {
scale: 1.6;
}
&:hover {
background: var(--background-color);
}
}
}
.log-nav-container {
@include flex-space-between;
align-items: flex-end;
.log-nav-wrapper {
.action-buttons-container {
display: flex;
gap: 6px;
.log-nav {
padding: 8px 16px;
border-radius: #{$border-radius-extra-large};
}
.log-nav.active {
background-color: var(--background-color-accent);
color: var(--text-button-color);
}
}
.clear-button{
margin: 0 6px;
padding: 4px 12px;
color: var(--text-disabled);
border-radius: #{$border-radius-large};
&:hover{
font-weight: 300;
color: var(--text-color);
background: var(--background-color-solid-gradient);
}
}
}
.log-entry-wrapper {
height: calc(100% - 80px);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--background-color);
padding: 10px;
border-radius: #{$border-radius-xlarge};
outline: 1px solid var(--border-color);
outline-offset: -1px;
overflow: auto;
.log-entry {
padding: 4px;
border-radius: #{$border-radius-small};
font-size: var(--font-size-small);
display: flex;
.log-icon {
height: 24px;
width: 24px;
align-items: center;
gap: 4px;
.close,
.expand-btn {
@include flex-center;
}
.log-entry-message-container {
@include flex-space-between;
gap: 12px;
width: 100%;
.message-time {
font-size: var(--font-size-tiny);
font-weight: 300;
opacity: 0.8;
text-wrap: nowrap;
// height: 100%;
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-medium};
svg {
scale: 1.6;
}
.log-entry-message {
width: 100%;
&:hover {
background: var(--background-color);
border: 1px solid #ffffff29;
}
}
&:nth-child(odd) {
background: var(--background-color);
}
}
}
.no-log{
padding: 20px;
text-align: center;
color: var(--text-color);
}
}
}
.log-list-new-window-wrapper{
padding: 10px;
background: var(--background-color-solid);
height: 100vh;
.log-nav-container{
margin-bottom: 10px;
}
}