diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index b8d6362ef..0de9983a7 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -12,9 +12,9 @@ @media (prefers-color-scheme: dark) { .main-menu-container { - --mat-sidenav-content-background-color: #191919; - --mat-sidenav-container-background-color: #191919; - --mat-sidenav-container-divider-color: #303030; + --mat-sidenav-content-background-color: var(--ra-bg); + --mat-sidenav-container-background-color: var(--ra-bg); + --mat-sidenav-container-divider-color: var(--ra-border); } } @@ -26,13 +26,13 @@ position: sticky; top: 0; flex-shrink: 0; - background-color: #212121; + background-color: var(--ra-nav-bg); z-index: 3; } @media (prefers-color-scheme: dark) { .nav-bar { - border-bottom: 1px solid #303030; + border-bottom: 1px solid var(--ra-nav-border); } } @@ -311,22 +311,16 @@ @media (prefers-color-scheme: dark) { .footer { - background: #212121; - border-top: 1px solid #303030; + background: var(--ra-nav-bg); + border-top: 1px solid var(--ra-border); } } .footer__text { - color: rgba(0, 0, 0, 0.5); + color: var(--ra-text-muted); font-size: 0.875em; } -@media (prefers-color-scheme: dark) { - .footer__text { - color: #fff; - } -} - ::ng-deep .visually-hidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ @@ -351,12 +345,6 @@ } .user-email { - color: rgba(0, 0, 0, 0.54); + color: var(--ra-text-muted); font-size: 12px; } - -@media (prefers-color-scheme: dark) { - .user-email { - color: rgba(255, 255, 255, 0.7); - } -} diff --git a/frontend/src/app/components/connect-db/connect-db.component.css b/frontend/src/app/components/connect-db/connect-db.component.css index 0e8d0562f..a1812a818 100644 --- a/frontend/src/app/components/connect-db/connect-db.component.css +++ b/frontend/src/app/components/connect-db/connect-db.component.css @@ -1,205 +1,197 @@ .connectPage { - padding-top: 16px; - padding-bottom: 20px; + padding-top: 16px; + padding-bottom: 20px; } .form { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 0.5em 1.5em; - margin: 0 auto 40px; - width: clamp(18.75em, 96%, 50em); + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 0.5em 1.5em; + margin: 0 auto 40px; + width: clamp(18.75em, 96%, 50em); } @media screen and (max-width: 600px) { - .form { - display: flex; - flex-direction: column; - padding: 0 9vw; - width: 100%; - } + .form { + display: flex; + flex-direction: column; + padding: 0 9vw; + width: 100%; + } } .credentials-fieldset { - display: grid; - grid-template-columns: subgrid; - grid-template-rows: subgrid; - grid-column: 1 / span 4; - grid-row: 5 / span 4; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 1 / span 4; + grid-row: 5 / span 4; } @media (width <= 600px) { - .credentials-fieldset { - display: flex; - flex-direction: column; - } + .credentials-fieldset { + display: flex; + flex-direction: column; + } } .credentials-fieldset-no-warning { - display: grid; - grid-template-columns: subgrid; - grid-template-rows: subgrid; - grid-column: 1 / span 4; - grid-row: 4 / span 4; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 1 / span 4; + grid-row: 4 / span 4; } @media (width <= 600px) { - .credentials-fieldset-no-warning { - display: flex; - flex-direction: column; - } + .credentials-fieldset-no-warning { + display: flex; + flex-direction: column; + } } .mat-h1 { - margin-top: 2vw; + margin-top: 2vw; } .warningMessage { - display: flex; - align-items: center; - margin-bottom: 8px; - padding: 16px 12px; + display: flex; + align-items: center; + margin-bottom: 8px; + padding: 16px 12px; } -@media (prefers-color-scheme: dark) { - .warningMessage { - background: #424242; - } -} - -@media (prefers-color-scheme: light) { - .warningMessage { - background: #F5F5F5; - } +.warningMessage { + background: var(--ra-surface); } .warningMessage__icon { - flex-shrink: 0; - margin-right: 12px; + flex-shrink: 0; + margin-right: 12px; } .warningMessage .mat-body-1 { - margin-bottom: 0; + margin-bottom: 0; } .connectForm__title { - grid-column: 1 / span 3; + grid-column: 1 / span 3; } .connectForm__hostname, .connectForm__port { - padding-bottom: 2em; + padding-bottom: 2em; } .connectForm__fullLine { - grid-column: 1 / span 4; + grid-column: 1 / span 4; } .connectForm__typeSwitch { - margin-bottom: 12px; + margin-bottom: 12px; } .connectForm__typeSwitch ::ng-deep .mat-button-toggle-checked { - background-color: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; } .radio-button { - margin-right: 20px; + margin-right: 20px; } .form-textarea { - resize: none; + resize: none; } .test-connection-actions { - grid-column: 1 / span 4; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - margin-top: 16px; + grid-column: 1 / span 4; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + margin-top: 16px; } .test-connection-message { - color: rgba(0, 0, 0, 0.54); - margin-bottom: 4px; + color: var(--ra-text-muted); + margin-bottom: 4px; } .actions { - grid-column: 1 / span 4; - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: 12px; + grid-column: 1 / span 4; + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 12px; } .delete-button { - margin-right: auto; + margin-right: auto; } .test-button { - margin-right: 20px; + margin-right: 20px; } .instruction__docker { - margin-top: 32px; - margin-bottom: auto; + margin-top: 32px; + margin-bottom: auto; } .github-button { - margin-bottom: 20px; + margin-bottom: 20px; } .github-button ::ng-deep .mdc-button__label { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .github-icon { - margin-right: 8px; - margin-left: -4px; - height: 22px; - width: 22px; + margin-right: 8px; + margin-left: -4px; + height: 22px; + width: 22px; } .docker-instruction { - margin-top: 20px; + margin-top: 20px; } .instruction-steps { - list-style-position: inside; + list-style-position: inside; } .instruction-step { - margin: 1em 0; + margin: 1em 0; } .instruction-step__link { - color: var(--color-accentedPalette-500); - text-decoration: none; + color: var(--ra-accent-text); + text-decoration: none; } .instruction-step__link:hover { - color: #FE5E85; - text-decoration: underline; + color: var(--color-primaryPalette-400); + text-decoration: underline; } .instruction-command { - background: rgba(0, 0, 0, 0.04); - border-radius: 4px; - padding: 8px 12px; + background: rgba(0, 0, 0, 0.04); + border-radius: 4px; + padding: 8px 12px; } .agent-token { - display: flex; - margin-top: 32px; - margin-bottom: 20px; - width: 100%; + display: flex; + margin-top: 32px; + margin-bottom: 20px; + width: 100%; } .agent-token__copy-button { - margin-top: 4px; - margin-left: 12px; -} \ No newline at end of file + margin-top: 4px; + margin-left: 12px; +} diff --git a/frontend/src/app/components/connect-db/db-connection-confirm-dialog/db-connection-confirm-dialog.component.css b/frontend/src/app/components/connect-db/db-connection-confirm-dialog/db-connection-confirm-dialog.component.css index b315831d1..20ce6b2ca 100644 --- a/frontend/src/app/components/connect-db/db-connection-confirm-dialog/db-connection-confirm-dialog.component.css +++ b/frontend/src/app/components/connect-db/db-connection-confirm-dialog/db-connection-confirm-dialog.component.css @@ -1,53 +1,45 @@ .connection-error-message { - display: block; - color: var(--mat-sidenav-content-text-color); - margin-bottom: 20px; + display: block; + color: var(--mat-sidenav-content-text-color); + margin-bottom: 20px; } .docs-notification { - display: block; - background-color: var(--bg-color); - color: var(--mat-sidenav-content-text-color); - margin-bottom: 20px; - padding: 8px 12px; + display: block; + background-color: var(--bg-color); + color: var(--mat-sidenav-content-text-color); + margin-bottom: 20px; + padding: 8px 12px; } -@media (prefers-color-scheme: dark) { - .docs-notification { - --bg-color: #292929; - } -} - -@media (prefers-color-scheme: light) { - .docs-notification { - --bg-color: #F4F4F4; - } +.docs-notification { + --bg-color: var(--ra-surface); } .docs-link { - color: #EF6C00; - font-weight: 500; - text-decoration: none; + color: #ef6c00; + font-weight: 500; + text-decoration: none; } .connection-error__actions { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .main-actions { - display: flex; - gap: 12px; + display: flex; + gap: 12px; } .link { - display: inline-block; - color: var(--color-primaryPalette-500); - margin-top: 15px; + display: inline-block; + color: var(--color-primaryPalette-500); + margin-top: 15px; } @media (prefers-color-scheme: dark) { - .link { - color: var(--color-whitePalette-500); - } -} \ No newline at end of file + .link { + color: var(--color-whitePalette-500); + } +} diff --git a/frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.css b/frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.css index b17d37157..eceea0add 100644 --- a/frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.css +++ b/frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.css @@ -1,58 +1,50 @@ .encription-setting { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + margin-bottom: 20px; } .encription-password { - display: flex; - flex-direction: column; - margin-top: 32px; - width: 100%; + display: flex; + flex-direction: column; + margin-top: 32px; + width: 100%; } .encription-password__field { - display: flex; - align-items: center; - width: 100%; + display: flex; + align-items: center; + width: 100%; } .encription-password__copy-button { - margin-top: -20px; - margin-left: -40px; + margin-top: -20px; + margin-left: -40px; } .docs-notification { - display: flex; - gap: 8px; - background-color: var(--bg-color); - border-left: 12px solid #FF6F00; - color: var(--mat-sidenav-content-text-color); - margin-top: -8px; - padding: 16px 12px; + display: flex; + gap: 8px; + background-color: var(--bg-color); + border-left: 12px solid #ff6f00; + color: var(--mat-sidenav-content-text-color); + margin-top: -8px; + padding: 16px 12px; } -@media (prefers-color-scheme: dark) { - .docs-notification { - --bg-color: #292929; - } -} - -@media (prefers-color-scheme: light) { - .docs-notification { - --bg-color: #F4F4F4; - } +.docs-notification { + --bg-color: var(--ra-surface); } .docs-notification__warning { - line-height: 1.55em; - margin-bottom: 8px; + line-height: 1.55em; + margin-bottom: 8px; } .docs-link { - color: #EF6C00; - font-weight: 500; - text-decoration: none; -} \ No newline at end of file + color: #ef6c00; + font-weight: 500; + text-decoration: none; +} diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.css b/frontend/src/app/components/connection-settings/connection-settings.component.css index 3468578f1..c2bc6defa 100644 --- a/frontend/src/app/components/connection-settings/connection-settings.component.css +++ b/frontend/src/app/components/connection-settings/connection-settings.component.css @@ -1,176 +1,167 @@ .zapier-page { - padding: 32px max(calc(50vw - 325px), 10%); + padding: 32px max(calc(50vw - 325px), 10%); } .settings-page { - padding: 0 max(calc(50vw - 325px), 10%); + padding: 0 max(calc(50vw - 325px), 10%); } .mat-h1 { - margin-top: 2em !important; - margin-bottom: 1.5em !important; + margin-top: 2em !important; + margin-bottom: 1.5em !important; } .settings-form { - display: flex; - flex-direction: column; - align-items: stretch; - padding-bottom: 72px; + display: flex; + flex-direction: column; + align-items: stretch; + padding-bottom: 72px; } .form-group-ordering { - display: flex; + display: flex; } .form-group-ordering__ordering-by { - width: 50% + width: 50%; } .form-group-ordering__order-options { - margin-top: 24px; - margin-left: 16px; + margin-top: 24px; + margin-left: 16px; } .form-group-ordering__order-options * { - margin-right: 16px; + margin-right: 16px; } .logo-uploader { - display: flex; - align-items: flex-start; - gap: 16px; - width: 100%; + display: flex; + align-items: flex-start; + gap: 16px; + width: 100%; } .logo-box { - display: flex; - align-items: center; - justify-content: center; - background: #171d39; - border-radius: 4px; - max-width: 160px; - height: 44px; - object-fit: contain; - padding: 4px 8px; + display: flex; + align-items: center; + justify-content: center; + background: var(--ra-nav-bg); + border-radius: 4px; + max-width: 160px; + height: 44px; + object-fit: contain; + padding: 4px 8px; } .logo-img { - height: 40px; - max-width: 136px; - object-fit: contain; + height: 40px; + max-width: 136px; + object-fit: contain; } .logo-input { - flex-grow: 1; + flex-grow: 1; } .logo-stub { - margin-top: 12px; + margin-top: 12px; } .color-theme { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 24px; - align-items: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 24px; + align-items: center; } .color-item { - position: relative; + position: relative; } .color-input { - width: 100%; + width: 100%; } .color-input ::ng-deep input.mat-mdc-input-element { - box-sizing: border-box; - padding-top: 4px; - padding-left: 24px; + box-sizing: border-box; + padding-top: 4px; + padding-left: 24px; } .color-sample { - position: absolute; - top: 8px; - left: 8px; - background-color: var(--color); - border-radius: 4px; - height: 24px; - margin-top: 4px; - width: 24px; + position: absolute; + top: 8px; + left: 8px; + background-color: var(--color); + border-radius: 4px; + height: 24px; + margin-top: 4px; + width: 24px; } .table-name { - display: flex; - flex-direction: column; - gap: 4px; + display: flex; + flex-direction: column; + gap: 4px; } .table-name__title { - color: black; - font-size: 16px; - margin-bottom: -6px; + color: var(--ra-text); + font-size: 16px; + margin-bottom: -6px; } @media (prefers-color-scheme: dark) { - .table-name__title { - color: var(--color-whitePalette-500); - } } .table-name__line { - color: rgba(0, 0, 0, 0.6); - font-size: 12px; -} - -@media (prefers-color-scheme: dark) { - .table-name__line { - color: rgba(255, 255, 255, 0.6); - } + color: var(--ra-text-muted); + font-size: 12px; } .actions { - position: fixed; - left: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--mat-sidenav-content-background-color); - box-shadow: var(--shadow); - height: 64px; - padding: 0 max(calc(50vw - 325px), 10%); - width: 100vw; + position: fixed; + left: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--mat-sidenav-content-background-color); + box-shadow: var(--shadow); + height: 64px; + padding: 0 max(calc(50vw - 325px), 10%); + width: 100vw; } @media (prefers-color-scheme: dark) { - .actions { - --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85); - } + .actions { + --shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.64), 0 1px 5px 0 rgba(0, 0, 0, 0.85); + } } @media (prefers-color-scheme: light) { - .actions { - --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); - } + .actions { + --shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + } } .settings-form__back-button { - margin-right: auto; + margin-right: auto; } .settings-form__save-button { - margin-left: 20px; + margin-left: 20px; } .settings-banner ::ng-deep .banner-wrapper { - margin-top: 60px; + margin-top: 60px; } .error-details { - margin-top: 8px; + margin-top: 8px; } .audit-toggle { - margin-top: 4px; -} \ No newline at end of file + margin-top: 4px; +} diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css index 4ba6a028d..d75dc0cbc 100644 --- a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css +++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css @@ -1,125 +1,128 @@ :host { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .testConnections { - list-style: none; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-gap: 20px; - margin-top: 24px; - width: 100%; + list-style: none; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-gap: 20px; + margin-top: 24px; + width: 100%; } @media (width <= 600px) { - .testConnections { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } + .testConnections { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } .testConnectionLink { - display: flex; - align-items: center; - gap: 12px; - border-radius: 4px; - box-shadow: - 0px 1px 3px 0px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.12), - 0px 0px 2px 0px rgba(0, 0, 0, 0.14); - color: inherit; - height: 48px; - padding: 0 12px; - text-decoration: none; - transition: box-shadow 200ms, background 200ms, border 200ms; + display: flex; + align-items: center; + gap: 12px; + border-radius: 4px; + box-shadow: + 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.12), + 0px 0px 2px 0px rgba(0, 0, 0, 0.14); + color: inherit; + height: 48px; + padding: 0 12px; + text-decoration: none; + transition: + box-shadow 200ms, + background 200ms, + border 200ms; } @media (width <= 600px) { - .testConnectionLink { - justify-content: flex-start; - } + .testConnectionLink { + justify-content: flex-start; + } } @media (prefers-color-scheme: light) { - .testConnectionLink { - background: var(--mat-sidenav-content-background-color); - border: 1px solid var(--mat-sidenav-content-background-color); - } - - .testConnectionLink:hover { - box-shadow: - 0px 1px 3px 0px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.12), - 0px 0px 2px 0px rgba(0, 0, 0, 0.14); - } + .testConnectionLink { + background: var(--mat-sidenav-content-background-color); + border: 1px solid var(--mat-sidenav-content-background-color); + } + + .testConnectionLink:hover { + box-shadow: + 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.12), + 0px 0px 2px 0px rgba(0, 0, 0, 0.14); + } } @media (prefers-color-scheme: dark) { - .testConnectionLink { - background: #404040; - border: 1px solid #404040; - } - - .testConnectionLink:hover { - background: #212121; - border: 1px solid rgba(255, 255, 255, 0.75); - box-shadow: - 0px 1px 3px 0px rgba(255, 255, 255, 0.1), - 0px 2px 2px 0px rgba(255, 255, 255, 0.08), - 0px 0px 2px 0px rgba(255, 255, 255, 0.12); - } - - .testConnectionLink:hover .connection__goIcon { - color: var(--color-accentedPalette-500); - } + .testConnectionLink { + background: var(--ra-border); + border: 1px solid var(--ra-border); + } + + .testConnectionLink:hover { + background: var(--ra-surface); + border: 1px solid rgba(255, 255, 255, 0.75); + box-shadow: + 0px 1px 3px 0px rgba(255, 255, 255, 0.1), + 0px 2px 2px 0px rgba(255, 255, 255, 0.08), + 0px 0px 2px 0px rgba(255, 255, 255, 0.12); + } + + .testConnectionLink:hover .connection__goIcon { + color: var(--ra-accent-text); + } } .testConnectionLink:hover { - box-shadow: - 0px 1px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); + box-shadow: + 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 4px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); } .testConnectionLink:active { - background: rgba(0, 0, 0, 0.16); + background: rgba(0, 0, 0, 0.16); } .testConnectionLink__icon { - flex-shrink: 0; - height: 28px; - width: 28px; + flex-shrink: 0; + height: 28px; + width: 28px; } -@media(prefers-color-scheme: dark) { - .testConnectionLink__icon { - filter: brightness(0) invert(1); - } +@media (prefers-color-scheme: dark) { + .testConnectionLink__icon { + filter: brightness(0) invert(1); + } } .connection__goIcon { - margin-left: auto; + margin-left: auto; } @media (width <= 600px) { - .testConnectionLink .connection__goIcon { - display: none; - } + .testConnectionLink .connection__goIcon { + display: none; + } } .testConnectionLink:hover .connection__goIcon, -.connection:hover .connection__goIcon{ - opacity: 1; +.connection:hover .connection__goIcon { + opacity: 1; } .testConnectionLink__info { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .testConnectionLink__type { - font-size: 12px; - margin-top: -2px; -} \ No newline at end of file + font-size: 12px; + margin-top: -2px; +} diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css index a485049ab..65a57c33d 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css @@ -1,210 +1,213 @@ :host { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .empty-state { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .empty-state_bottom { - margin-top: auto; + margin-top: auto; } @media (prefers-color-scheme: light) { - .empty-state_bottom { - color: rgba(0, 0, 0, 0.64) - } + .empty-state_bottom { + color: rgba(0, 0, 0, 0.64); + } } @media (prefers-color-scheme: dark) { - .empty-state_bottom { - color: rgba(255, 255, 255, 0.64) - } + .empty-state_bottom { + color: rgba(255, 255, 255, 0.64); + } } .empty-state__text { - font-size: 12px !important; - font-weight: 500 !important; - margin-bottom: 0 !important; - text-align: center; - text-transform: uppercase; + font-size: 12px !important; + font-weight: 500 !important; + margin-bottom: 0 !important; + text-align: center; + text-transform: uppercase; } .supportedDatabases { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); - align-items: stretch; - grid-gap: 20px; - margin-top: 24px; - width: 77%; + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); + align-items: stretch; + grid-gap: 20px; + margin-top: 24px; + width: 77%; } @media (width <= 600px) { - .supportedDatabases { - width: 100%; - } + .supportedDatabases { + width: 100%; + } } .addConnectionLink { - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; - border-radius: 4px; - box-shadow: - 0px 1px 3px 0px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.12), - 0px 0px 2px 0px rgba(0, 0, 0, 0.14); - color: inherit; - font-weight: 600; - padding: 12px; - text-decoration: none; - height: 100%; - transition: box-shadow 200ms, background 200ms, border 200ms; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + border-radius: 4px; + box-shadow: + 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.12), + 0px 0px 2px 0px rgba(0, 0, 0, 0.14); + color: inherit; + font-weight: 600; + padding: 12px; + text-decoration: none; + height: 100%; + transition: + box-shadow 200ms, + background 200ms, + border 200ms; } .addConnectionLink:hover { - box-shadow: - 0px 1px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); + box-shadow: + 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 4px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); } @media (prefers-color-scheme: dark) { - .addConnectionLink { - background: #404040; - border: 1px solid #404040; - } + .addConnectionLink { + background: var(--ra-border); + border: 1px solid var(--ra-border); + } - .addConnectionLink:hover { - background: #212121; - border: 1px solid rgba(255, 255, 255, 0.75); - box-shadow: - 0px 1px 3px 0px rgba(255, 255, 255, 0.1), - 0px 2px 2px 0px rgba(255, 255, 255, 0.08), - 0px 0px 2px 0px rgba(255, 255, 255, 0.12); - } + .addConnectionLink:hover { + background: var(--ra-surface); + border: 1px solid rgba(255, 255, 255, 0.75); + box-shadow: + 0px 1px 3px 0px rgba(255, 255, 255, 0.1), + 0px 2px 2px 0px rgba(255, 255, 255, 0.08), + 0px 0px 2px 0px rgba(255, 255, 255, 0.12); + } } .addConnectionLink__iconBox { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: #fff; - border-radius: 4px; - height: 40px; - width: 40px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border-radius: 4px; + height: 40px; + width: 40px; } .addConnectionLink__icon { - flex-shrink: 0; - height: 30px; - width: 30px; + flex-shrink: 0; + height: 30px; + width: 30px; } .addConnectionLink__label { - text-align: center; + text-align: center; } .showAllButton { - margin-top: 20px; - margin-bottom: -56px; + margin-top: 20px; + margin-bottom: -56px; } @media (width <= 600px) { - .showAllButton { - margin-bottom: 0; - } + .showAllButton { + margin-bottom: 0; + } } .addButton { - margin-top: -44px; - height: 40px; + margin-top: -44px; + height: 40px; } .fabActions { - display: flex; - align-items: center; - gap: 12px; - align-self: flex-end; - margin-top: 20px; + display: flex; + align-items: center; + gap: 12px; + align-self: flex-end; + margin-top: 20px; } .zapier-link { - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 24px; - box-shadow: - 0px 1px 10px 0px rgba(0, 0, 0, 0.08), - 0px 4px 5px 0px rgba(0, 0, 0, 0.05), - 0px 2px 4px 0px rgba(0, 0, 0, 0.06); - color: var(--color-accentedPalette-500); - text-decoration: none; - height: 48px; - padding: 8px; - width: 140px; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 24px; + box-shadow: + 0px 1px 10px 0px rgba(0, 0, 0, 0.08), + 0px 4px 5px 0px rgba(0, 0, 0, 0.05), + 0px 2px 4px 0px rgba(0, 0, 0, 0.06); + color: var(--ra-accent-text); + text-decoration: none; + height: 48px; + padding: 8px; + width: 140px; } @media (prefers-color-scheme: dark) { - .zapier-link { - background: #212121; - } + .zapier-link { + background: var(--ra-surface); + } } .zapier-link__caption { - font-size: 12px; + font-size: 12px; } .zapier-link__logo { - border-radius: 8px; - height: 32px; - width: 32px; + border-radius: 8px; + height: 32px; + width: 32px; } .zapier-link__icon { - color: var(--mat-sidenav-content-text-color); - font-size: 16px; - height: 16px; - width: 16px; + color: var(--mat-sidenav-content-text-color); + font-size: 16px; + height: 16px; + width: 16px; } .fabAddButton { - border-radius: 24px; - box-shadow: - 0px 1px 10px 0px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); - height: 48px !important; - width: 178px; + border-radius: 24px; + box-shadow: + 0px 1px 10px 0px rgba(0, 0, 0, 0.2), + 0px 4px 5px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); + height: 48px !important; + width: 178px; } @media (width <= 600px) { - .fabAddButton { - position: fixed; - bottom: max(64px, 10vw); - z-index: 1; - } + .fabAddButton { + position: fixed; + bottom: max(64px, 10vw); + z-index: 1; + } } .connections { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, calc(33.33% - 14px))); - justify-content: center; - gap: 20px; - margin-top: 24px; - width: 100%; + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, calc(33.33% - 14px))); + justify-content: center; + gap: 20px; + margin-top: 24px; + width: 100%; } /* @media (width <= 600px) { @@ -227,76 +230,80 @@ } */ .connection { - display: flex; - flex-direction: column; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - color: inherit; - padding: 12px; - text-decoration: none; - width: 100%; - transition: border 200ms, box-shadow 200ms; + display: flex; + flex-direction: column; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; + color: inherit; + padding: 12px; + text-decoration: none; + width: 100%; + transition: + border 200ms, + box-shadow 200ms; } @media (prefers-color-scheme: dark) { - .connection { - background-color: #000; - border: 1px solid #313131; - } + .connection { + background-color: var(--ra-bg); + border: 1px solid var(--ra-border); + } } .connection:hover { - border: 1px solid var(--color-primaryPalette-500); - box-shadow: - 0px 4px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 14px 0px rgba(0, 0, 0, 0.12), - 0px 8px 10px 0px rgba(0, 0, 0, 0.14); + border: 1px solid var(--color-primaryPalette-500); + box-shadow: + 0px 4px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 14px 0px rgba(0, 0, 0, 0.12), + 0px 8px 10px 0px rgba(0, 0, 0, 0.14); } @media (prefers-color-scheme: dark) { - .connection:hover { - border: 1px solid #636363; - } + .connection:hover { + border: 1px solid var(--ra-border-hover); + } } .connectionLogoPreview { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 12px; - background-color: var(--color-primaryPalette-500); - border-radius: 2px; - color: #fff; - font-size: 20px; - font-weight: 900; - height: 72px; - overflow: hidden; - padding: 8px; + flex-shrink: 0; + display: flex; + align-items: center; + gap: 12px; + background-color: var(--color-primaryPalette-500); + border-radius: 2px; + color: #fff; + font-size: 20px; + font-weight: 900; + height: 72px; + overflow: hidden; + padding: 8px; } .connectionLogoPreview__logo { - height: 85%; - object-fit: contain; + height: 85%; + object-fit: contain; } .connectionInfo { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .connectionInfo .connectionInfo__connectionTitle { - margin-top: -4px; - margin-bottom: -2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; + margin-top: -4px; + margin-bottom: -2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; } .connection__goIcon { - grid-row: 1 / span 2; - grid-column: 2; - margin-left: auto; - opacity: 0.65; - transition: opacity 200ms, color 200ms; -} \ No newline at end of file + grid-row: 1 / span 2; + grid-column: 2; + margin-left: auto; + opacity: 0.65; + transition: + opacity 200ms, + color 200ms; +} diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css index 55bfbcf55..b059eb488 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.css +++ b/frontend/src/app/components/dashboard/dashboard.component.css @@ -1,129 +1,131 @@ :host { - margin-bottom: -60px; + margin-bottom: -60px; } .mat-sidenav-container { - height: 100%; - /* height: calc(100vh - 56px); */ - overflow-x: hidden !important; + height: 100%; + /* height: calc(100vh - 56px); */ + overflow-x: hidden !important; } .table-list-sidenav { - max-width: 240px; + max-width: 240px; } @media (prefers-color-scheme: dark) { - .table-list-sidenav { - background-color: #202020; - } + .table-list-sidenav { + background-color: var(--ra-surface); + } } @media (width <= 600px) { - .table-list-sidenav { - display: none; - } + .table-list-sidenav { + display: none; + } } .side-bar_collapsed { - position: static; - float: left; - display: block; - height: 100%; - width: 65px; - visibility: visible !important; - transform: translate3d(0, 0, 0); + position: static; + float: left; + display: block; + height: 100%; + width: 65px; + visibility: visible !important; + transform: translate3d(0, 0, 0); } @media (width <= 600px) { - .side-bar_collapsed { - display: none; - } + .side-bar_collapsed { + display: none; + } } .table-list-sidenav-container ::ng-deep .mat-drawer-inner-container, .side-bar_collapsed ::ng-deep .mat-drawer-inner-container { - overflow-y: auto !important; - overflow-x: hidden !important; + overflow-y: auto !important; + overflow-x: hidden !important; } -.table-list-sidenav-container ::ng-deep .mat-drawer:not(.mat-drawer-opened):not(.mat-drawer-animating) .mat-drawer-inner-container { - display: block; +.table-list-sidenav-container + ::ng-deep + .mat-drawer:not(.mat-drawer-opened):not(.mat-drawer-animating) + .mat-drawer-inner-container { + display: block; } .mat-list-item { - text-decoration: none; + text-decoration: none; } .toggle-button { - margin-top: 8px; - margin-left: 12px; + margin-top: 8px; + margin-left: 12px; } .toggle-button-position button { - border-radius: 4px; + border-radius: 4px; } .toggle-button-position button mat-icon { - border-radius: 4px; + border-radius: 4px; } .toggle-button-position button:hover { - border-radius: 4px; + border-radius: 4px; } .toggle-button-position button:hover mat-icon { - border-radius: 4px; + border-radius: 4px; } .dashboard { - display: flex; - flex-direction: column; - height: calc(100vh - 60px - 56px); - max-width: 1000px; - margin: 20px auto; - widows: 96%; + display: flex; + flex-direction: column; + height: calc(100vh - 60px - 56px); + max-width: 1000px; + margin: 20px auto; + widows: 96%; } .title { - align-self: center; + align-self: center; } .alerts { - display: flex; - flex-direction: column; - margin-top: 24px; + display: flex; + flex-direction: column; + margin-top: 24px; } .server-alert { - display: block; - margin-top: 24px; + display: block; + margin-top: 24px; } .alerts:empty, .server-alert:empty { - margin-top: 0; + margin-top: 0; } .error-details { - margin-top: 8px; + margin-top: 8px; } .table-preview { - display: flex; - overflow-x: hidden; - height: calc(100vh - 44px); + display: flex; + overflow-x: hidden; + height: calc(100vh - 44px); } .table-preview-content { - flex-grow: 1; - padding-bottom: 24px; - height: calc(100vh - 44px); - padding: 0 24px; - overflow-y: scroll; - width: 100%; + flex-grow: 1; + padding-bottom: 24px; + height: calc(100vh - 44px); + padding: 0 24px; + overflow-y: scroll; + width: 100%; } .sidenav-content__toggle-button { - display: none !important; + display: none !important; } - diff --git a/frontend/src/app/components/dashboard/db-table-view/db-action-link-dialog/db-action-link-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/db-action-link-dialog/db-action-link-dialog.component.css index e72d9e047..6e101014e 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-action-link-dialog/db-action-link-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-action-link-dialog/db-action-link-dialog.component.css @@ -1,3 +1,3 @@ .location-link { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css index 81d1971f2..01faf1305 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css @@ -77,7 +77,7 @@ position: absolute; top: 44px; left: 0; - color: #e53935; + color: var(--color-warnPalette-500); font-size: 0.75em; width: 100%; } @@ -194,11 +194,11 @@ @media (prefers-color-scheme: dark) { .code-snippet-box { border-color: rgba(255, 255, 255, 0.12); - background-color: #202020; + background-color: var(--ra-surface); } .copy-button { - background-color: #202020; + background-color: var(--ra-surface); } } @@ -295,7 +295,7 @@ @media (prefers-color-scheme: dark) { .rule-example { border-color: rgba(255, 255, 255, 0.12); - background-color: #202020; + background-color: var(--ra-surface); } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css index 6f01a799b..1245434ea 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css @@ -1,329 +1,330 @@ .ai-panel-sidebar { - position: relative; - opacity: 0; - transform: translateX(100%); - height: calc(100vh - 44px); - width: 0; - overflow-y: auto; - transition: width 400ms ease, transform 400ms ease, opacity 400ms ease; + position: relative; + opacity: 0; + transform: translateX(100%); + height: calc(100vh - 44px); + width: 0; + overflow-y: auto; + transition: + width 400ms ease, + transform 400ms ease, + opacity 400ms ease; } @media (width <= 600px) { - .ai-panel-sidebar { - width: 100vw; - z-index: 10; - } + .ai-panel-sidebar { + width: 100vw; + z-index: 10; + } } .ai-panel-sidebar_open { - opacity: 1; - transform: translateX(24px); - width: clamp(200px, 22vw, 400px); + opacity: 1; + transform: translateX(24px); + width: clamp(200px, 22vw, 400px); } @media (prefers-color-scheme: dark) { - .ai-panel-sidebar_open { - background-color: #202020; - } + .ai-panel-sidebar_open { + background-color: var(--ra-surface); + } } @media (width <= 600px) { - .ai-panel-sidebar_open { - width: 0; - } + .ai-panel-sidebar_open { + width: 0; + } } .ai-panel-sidebar-content { - position: fixed; - top: 0; - left: calc(100% - clamp(200px, 22vw, 400px)); - display: flex; - flex-direction: column; - background-color: var(--mat-sidenav-content-background-color); - border-left: solid 1px rgba(0, 0, 0, 0.12); - padding-top: 44px; - height: 100vh; - width: clamp(200px, 22vw, 400px); - z-index: 0; + position: fixed; + top: 0; + left: calc(100% - clamp(200px, 22vw, 400px)); + display: flex; + flex-direction: column; + background-color: var(--mat-sidenav-content-background-color); + border-left: solid 1px rgba(0, 0, 0, 0.12); + padding-top: 44px; + height: 100vh; + width: clamp(200px, 22vw, 400px); + z-index: 0; } .ai-panel-sidebar-content ::ng-deep .ai-message table { - width: 100%; - border-collapse: collapse; - margin: 8px 0; - font-size: 14px; + width: 100%; + border-collapse: collapse; + margin: 8px 0; + font-size: 14px; } .ai-panel-sidebar-content ::ng-deep .ai-message table thead { - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.04); } @media (prefers-color-scheme: dark) { - .ai-panel-sidebar-content ::ng-deep .ai-message table thead { - background-color: rgba(255, 255, 255, 0.04); - } + .ai-panel-sidebar-content ::ng-deep .ai-message table thead { + background-color: rgba(255, 255, 255, 0.04); + } } .ai-panel-sidebar-content ::ng-deep .ai-message table th, .ai-panel-sidebar-content ::ng-deep .ai-message table td { - padding: 8px 12px; - text-align: left; - border: 1px solid rgba(0, 0, 0, 0.12); + padding: 8px 12px; + text-align: left; + border: 1px solid rgba(0, 0, 0, 0.12); } @media (prefers-color-scheme: dark) { - .ai-panel-sidebar-content ::ng-deep .ai-message table th, - .ai-panel-sidebar-content ::ng-deep .ai-message table td { - border: 1px solid rgba(255, 255, 255, 0.12); - } + .ai-panel-sidebar-content ::ng-deep .ai-message table th, + .ai-panel-sidebar-content ::ng-deep .ai-message table td { + border: 1px solid rgba(255, 255, 255, 0.12); + } } .ai-panel-sidebar-content ::ng-deep .ai-message table th { - font-weight: 600; + font-weight: 600; } .ai-panel-sidebar-content ::ng-deep .ai-message table tbody tr:hover { - background-color: rgba(0, 0, 0, 0.02); + background-color: rgba(0, 0, 0, 0.02); } @media (prefers-color-scheme: dark) { - .ai-panel-sidebar-content ::ng-deep .ai-message table tbody tr:hover { - background-color: rgba(255, 255, 255, 0.02); - } + .ai-panel-sidebar-content ::ng-deep .ai-message table tbody tr:hover { + background-color: rgba(255, 255, 255, 0.02); + } } @media (prefers-color-scheme: dark) { - .ai-panel-sidebar-content { - border-left: 1px solid var(--mat-sidenav-container-divider-color); - } + .ai-panel-sidebar-content { + border-left: 1px solid var(--mat-sidenav-container-divider-color); + } } @media (width <= 600px) { - .ai-panel-sidebar-content { - left: 0; - width: 100vw; - z-index: 5; - } + .ai-panel-sidebar-content { + left: 0; + width: 100vw; + z-index: 5; + } } .ai-panel-sidebar__header { - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 20px; - padding-left: 16px; - padding-right: 16px; + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 20px; + padding-left: 16px; + padding-right: 16px; } @media (prefers-color-scheme: dark) { - .ai-icon ::ng-deep svg path { - fill: #fff; - } + .ai-icon ::ng-deep svg path { + fill: #fff; + } } .ai-panel-sidebar__title { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 0 !important; + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 0 !important; } .ai-panel-chat { - display: flex; - flex-direction: column; - margin-top: auto; - padding-left: 16px; - padding-right: 16px; + display: flex; + flex-direction: column; + margin-top: auto; + padding-left: 16px; + padding-right: 16px; } .ai-message-chain-box { - height: calc(100vh - 44px - 252px - 48px); - overflow-y: auto; + height: calc(100vh - 44px - 252px - 48px); + overflow-y: auto; } .ai-message-chain { - display: flex; - flex-direction: column; - justify-content: flex-end; - min-height: 100%; - width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + min-height: 100%; + width: 100%; } .user-message { - align-self: flex-end; - background-color: var(--color-primaryPalette-50); - color: var(--color-primaryPalette-50-contrast); - border-radius: 8px; - padding: 8px 8px 0; - margin: 4px 0; - width: 80%; + align-self: flex-end; + background-color: var(--color-primaryPalette-50); + color: var(--color-primaryPalette-50-contrast); + border-radius: 8px; + padding: 8px 8px 0; + margin: 4px 0; + width: 80%; } .ai-message { - align-self: flex-start; - background-color: var(--color-primaryPalette-100); - color: var(--color-primaryPalette-100-contrast); - border-radius: 8px; - padding: 8px 8px 0; - margin: 4px 0; + align-self: flex-start; + background-color: var(--color-primaryPalette-100); + color: var(--color-primaryPalette-100-contrast); + border-radius: 8px; + padding: 8px 8px 0; + margin: 4px 0; } .ai-error-message { - border-radius: 8px; - padding: 8px 8px 0; - margin: 4px 0; + border-radius: 8px; + padding: 8px 8px 0; + margin: 4px 0; } @media (prefers-color-scheme: light) { - .ai-error-message { - background-color: var(--color-warnPalette-100); - color: var(--color-warnPalette-100-contrast); - } + .ai-error-message { + background-color: var(--color-warnPalette-100); + color: var(--color-warnPalette-100-contrast); + } } @media (prefers-color-scheme: dark) { - .ai-error-message { - background-color: var(--color-warnDarkPalette-200); - color: var(--color-warnDarkPalette-200-contrast); - } + .ai-error-message { + background-color: var(--color-warnDarkPalette-200); + color: var(--color-warnDarkPalette-200-contrast); + } } .ai-message ::ng-deep ol, .ai-message ::ng-deep ul { - padding-left: 20px; - margin: 8px 0; + padding-left: 20px; + margin: 8px 0; } .ai-message ::ng-deep li { - margin: 4px 0; - line-height: 1.5; + margin: 4px 0; + line-height: 1.5; } .ai-message ::ng-deep ol { - list-style-position: outside; + list-style-position: outside; } .ai-message ::ng-deep ul { - list-style-position: outside; + list-style-position: outside; } .ai-message ::ng-deep pre { - white-space: break-spaces; + white-space: break-spaces; } .user-message ::ng-deep p, .ai-message ::ng-deep p { - margin-bottom: 8px; + margin-bottom: 8px; } @media (prefers-color-scheme: dark) { - .suggestions { - background-color: #202020; - } + .suggestions { + background-color: var(--ra-surface); + } } .suggestions-title { - display: block; - color: rgba(0,0,0, 0.54); - padding: 16px 16px 0; + display: block; + color: rgba(0, 0, 0, 0.54); + padding: 16px 16px 0; } @media (prefers-color-scheme: dark) { - .suggestions-title { - color: rgba(255,255,255, 0.54); - } + .suggestions-title { + color: rgba(255, 255, 255, 0.54); + } } .suggestion-button { - height: auto; - padding: 8px 16px; + height: auto; + padding: 8px 16px; } .suggestion-button ::ng-deep .mdc-list-item__content { - text-overflow: initial; - /* white-space: wrap; */ - overflow: initial; + text-overflow: initial; + /* white-space: wrap; */ + overflow: initial; } - .suggestion-button ::ng-deep .mdc-list-item__primary-text { - text-overflow: initial; - white-space: wrap; - overflow: initial; + text-overflow: initial; + white-space: wrap; + overflow: initial; } .loading { - display: flex; - justify-content: center; - align-items: center; - height: 40px; + display: flex; + justify-content: center; + align-items: center; + height: 40px; } .ai-message-form { - position: relative; - width: 100%; + position: relative; + width: 100%; } .ai-message-form__textarea { - width: 100%; + width: 100%; } .ai-message-form__textarea ::ng-deep .mat-mdc-text-field-wrapper { - padding-bottom: 24px !important; + padding-bottom: 24px !important; } .ai-message-form__footer { - position: absolute; - right: 0; - left: 2px; - bottom: 21px; - display: flex; - justify-content: space-between; - align-items: center; - background-color: var(--mat-sidenav-content-background-color); - padding-left: 16px; - padding-right: 4px; - width: calc(100% - 4px); + position: absolute; + right: 0; + left: 2px; + bottom: 21px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--mat-sidenav-content-background-color); + padding-left: 16px; + padding-right: 4px; + width: calc(100% - 4px); } .ai-message-form__button { - } .ai-panel-sidebar__message { - resize: none; - width: 100%; + resize: none; + width: 100%; } .ai-placeholder { - margin-top:72px; - padding-left: 16px; - padding-right: 16px; - text-align: center; + margin-top: 72px; + padding-left: 16px; + padding-right: 16px; + text-align: center; } @media (prefers-color-scheme: light) { - .ai-placeholder { - color: rgba(0, 0, 0, 0.64); - } + .ai-placeholder { + color: rgba(0, 0, 0, 0.64); + } } @media (prefers-color-scheme: dark) { - .ai-placeholder { - color: rgba(255, 255, 255, 0.64); - } + .ai-placeholder { + color: rgba(255, 255, 255, 0.64); + } } .footer p { - color: rgba(0, 0, 0, 0.36) !important; - text-align: center; + color: rgba(0, 0, 0, 0.36) !important; + text-align: center; } @media (prefers-color-scheme: dark) { - .footer p { - color: rgba(255, 255, 255, 0.36) !important; - } + .footer p { + color: rgba(255, 255, 255, 0.36) !important; + } } .link { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css index 4e72a45c8..e87940c89 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css @@ -22,7 +22,7 @@ @media (prefers-color-scheme: dark) { .row-preview-sidebar_open { border-left: 1px solid var(--mat-sidenav-container-divider-color); - background-color: #202020; + background-color: var(--ra-surface); } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index 1fbb6c79a..0a64eb5e8 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -193,34 +193,34 @@ } .active-filters { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 12px; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 12px; } ::ng-deep .active-filters .mat-mdc-chip { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - --mdc-chip-container-shape-radius: 16px !important; - background-color: #E8ECEE !important; - border-radius: 16px !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + --mdc-chip-container-shape-radius: 16px !important; + background-color: var(--ra-chip-bg) !important; + border-radius: 16px !important; } ::ng-deep .active-filters .mat-mdc-chip:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .active-filters .mdc-evolution-chip__cell { - background-color: #E8ECEE !important; - border-radius: 16px !important; + background-color: var(--ra-chip-bg) !important; + border-radius: 16px !important; } ::ng-deep .active-filters .mdc-evolution-chip__cell:hover { - background-color: #E8ECEE !important; + background-color: var(--ra-chip-bg) !important; } .db-table-manage-columns-button__count { @@ -278,8 +278,8 @@ @media (prefers-color-scheme: dark) { .table-surface { - --mat-table-background-color: #202020; - --mat-paginator-container-background-color: #202020; + --mat-table-background-color: var(--ra-surface); + --mat-paginator-container-background-color: var(--ra-surface); } } @@ -463,91 +463,91 @@ td.mat-cell { /* Sortable header styles */ .sortable-header__content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - gap: 4px; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 4px; } .sortable-header__text { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .sortable-header__button { - opacity: 0; - width: 24px; - height: 24px; - line-height: 24px; - flex-shrink: 0; - transition: opacity 0.2s ease; + opacity: 0; + width: 24px; + height: 24px; + line-height: 24px; + flex-shrink: 0; + transition: opacity 0.2s ease; } .sortable-header:hover .sortable-header__button, .sortable-header_active .sortable-header__button { - opacity: 1; + opacity: 1; } .sortable-header__icon { - font-size: 18px; - width: 18px; - height: 18px; - color: rgba(0, 0, 0, 0.54); + font-size: 18px; + width: 18px; + height: 18px; + color: rgba(0, 0, 0, 0.54); } .sortable-header_active .sortable-header__icon { - color: var(--color-primaryPalette-500); + color: var(--color-primaryPalette-500); } @media (prefers-color-scheme: dark) { - .sortable-header__icon { - color: rgba(255, 255, 255, 0.54); - } + .sortable-header__icon { + color: rgba(255, 255, 255, 0.54); + } - .sortable-header_active .sortable-header__icon { - color: var(--color-primaryPalette-300); - } + .sortable-header_active .sortable-header__icon { + color: var(--color-primaryPalette-300); + } } /* Sort menu styles */ .sort-menu__item { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .sort-menu__item mat-icon { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 18px; + width: 18px; + height: 18px; } .sort-menu__item-content { - display: flex; - align-items: center; - gap: 8px; - padding: 4px 10px; - border-radius: 4px; - margin: -4px -10px; + display: flex; + align-items: center; + gap: 8px; + padding: 4px 10px; + border-radius: 4px; + margin: -4px -10px; } .sort-menu__item-content_active { - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.04); } @media (prefers-color-scheme: dark) { - .sort-menu__item-content_active { - background-color: rgba(255, 255, 255, 0.06); - } + .sort-menu__item-content_active { + background-color: rgba(255, 255, 255, 0.06); + } } .sort-menu__lock-icon { - font-size: 16px; - width: 16px; - height: 16px; + font-size: 16px; + width: 16px; + height: 16px; } .db-table-cell-checkbox { @@ -678,83 +678,84 @@ tr.mat-row:hover { } .hidden { - display: none; + display: none; } /* Columns Menu Drag and Drop Styles */ .columns-list { - max-height: 400px; - overflow-y: auto; - padding: 8px 0; + max-height: 400px; + overflow-y: auto; + padding: 8px 0; } .draggable-column-item { - cursor: move; - display: flex !important; - align-items: center; - justify-content: flex-start; - gap: 0px; - padding: 8px 24px 8px 8px !important; - min-height: 48px !important; - transition: background-color 0.2s ease; + cursor: move; + display: flex !important; + align-items: center; + justify-content: flex-start; + gap: 0px; + padding: 8px 24px 8px 8px !important; + min-height: 48px !important; + transition: background-color 0.2s ease; } .draggable-column-item .drag-handle { - color: #9e9e9e; - cursor: grab; - font-size: 20px; - width: 20px; - height: 20px; - margin-right: 0px; - flex-shrink: 0; + color: #9e9e9e; + cursor: grab; + font-size: 20px; + width: 20px; + height: 20px; + margin-right: 0px; + flex-shrink: 0; } .draggable-column-item ::ng-deep .mat-mdc-checkbox { - align-items: center !important; + align-items: center !important; } .draggable-column-item ::ng-deep .mat-mdc-checkbox-label { - text-align: left; - line-height: 1.5; + text-align: left; + line-height: 1.5; } .draggable-column-item ::ng-deep .mdc-form-field { - align-items: center !important; + align-items: center !important; } .draggable-column-item:active .drag-handle { - cursor: grabbing; + cursor: grabbing; } .draggable-column-item:hover .drag-handle { - color: #616161; + color: #616161; } @media (prefers-color-scheme: dark) { - .draggable-column-item .drag-handle { - color: #757575; - } - - .draggable-column-item:hover .drag-handle { - color: #bdbdbd; - } + .draggable-column-item .drag-handle { + color: #757575; + } + + .draggable-column-item:hover .drag-handle { + color: #bdbdbd; + } } .cdk-drag-preview.draggable-column-item { - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); - opacity: 0.9; + box-shadow: + 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + opacity: 0.9; } .cdk-drag-placeholder { - opacity: 0.3; + opacity: 0.3; } .cdk-drag-animating { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .columns-list.cdk-drop-list-dragging .draggable-column-item:not(.cdk-drag-placeholder) { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css index f88fa9c1b..05ab5f305 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css @@ -1,140 +1,140 @@ .wrapper { - min-width: 300px; - margin: 0 auto 16px; - width: 90%; + min-width: 300px; + margin: 0 auto 16px; + width: 90%; } .header { - display: flex; - justify-content: space-between; - margin: 36px 70px 24px 0; + display: flex; + justify-content: space-between; + margin: 36px 70px 24px 0; } .header-actions-box { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 16px; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 16px; } .header-actions { - display: flex; - gap: 16px; + display: flex; + gap: 16px; } .header-links { - display: flex; - gap: 16px; + display: flex; + gap: 16px; } .empty-state { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } .empty-state__actions { - display: flex; - gap: 12px; + display: flex; + gap: 12px; } .widgets-hint { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 20px !important; - text-align: center; - width: clamp(300px, 75vw, 800px); + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20px !important; + text-align: center; + width: clamp(300px, 75vw, 800px); } .widgets-hint__title { - display: inline-block; - font-size: 1.25em; - margin-bottom: 4px; + display: inline-block; + font-size: 1.25em; + margin-bottom: 4px; } .widgets-hint__text { - color: rgba(0, 0, 0, 0.64); + color: rgba(0, 0, 0, 0.64); } @media (prefers-color-scheme: dark) { - .widgets-hint__text { - color: rgba(255, 255, 255, 0.64); - } + .widgets-hint__text { + color: rgba(255, 255, 255, 0.64); + } } .widget-examples { - display: grid; - grid-template-columns: repeat(3, minmax(300px, 1fr)); - grid-template-rows: repeat(2, auto); - gap: 20px; - margin-top: 32px !important; - width: clamp(300px, 80vw, 1200px); + display: grid; + grid-template-columns: repeat(3, minmax(300px, 1fr)); + grid-template-rows: repeat(2, auto); + gap: 20px; + margin-top: 32px !important; + width: clamp(300px, 80vw, 1200px); } .widget-example { - display: flex; - flex-direction: column; - border: 1px solid rgba(0,0,0,0.12); - border-radius: 4px; - padding: 16px 16px 0; + display: flex; + flex-direction: column; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 16px 16px 0; } @media (prefers-color-scheme: dark) { - .widget-example { - border-color: rgba(255,255,255,0.12); - background-color: #202020; - } + .widget-example { + border-color: rgba(255, 255, 255, 0.12); + background-color: var(--ra-surface); + } } .widget-example_row-2 { - grid-row: 2; + grid-row: 2; } .widget-example_row-1-2 { - grid-row: span 2; + grid-row: span 2; } .examples-arrow { - color: var(--color-accentedPalette-500); - margin: 0 auto 12px; + color: var(--ra-accent-text); + margin: 0 auto 12px; } .widget-settings { - display: grid; - grid-template-columns: minmax(10%, 130px) 1fr 2fr 1fr 2fr 50px; - align-items: start; - grid-gap: 0 20px; + display: grid; + grid-template-columns: minmax(10%, 130px) 1fr 2fr 1fr 2fr 50px; + align-items: start; + grid-gap: 0 20px; } .widget-item { - display: contents; + display: contents; } .actions { - position: fixed; - left: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--mat-sidenav-content-background-color); - box-shadow: var(--shadow); - height: 64px; - /* padding: 0 max(calc(50vw - 500px), 2%); */ - padding: 0 calc(5% + 70px) 0 5%; - width: 100vw; - z-index: 10; + position: fixed; + left: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--mat-sidenav-content-background-color); + box-shadow: var(--shadow); + height: 64px; + /* padding: 0 max(calc(50vw - 500px), 2%); */ + padding: 0 calc(5% + 70px) 0 5%; + width: 100vw; + z-index: 10; } @media (prefers-color-scheme: dark) { - .actions { - --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85); - } + .actions { + --shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.64), 0 1px 5px 0 rgba(0, 0, 0, 0.85); + } } @media (prefers-color-scheme: light) { - .actions { - --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); - } -} \ No newline at end of file + .actions { + --shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + } +} diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css index 765543ebd..fafe507c8 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css @@ -1,420 +1,422 @@ .filters-content { - display: grid; - grid-template-columns: 32px auto 228px 0 1fr 120px; - grid-column-gap: 8px; - align-content: flex-start; - align-items: center; - padding-top: 4px !important; + display: grid; + grid-template-columns: 32px auto 228px 0 1fr 120px; + grid-column-gap: 8px; + align-content: flex-start; + align-items: center; + padding-top: 4px !important; } ::ng-deep mat-dialog-content.filters-content { - padding-left: 24px !important; - padding-right: 24px !important; + padding-left: 24px !important; + padding-right: 24px !important; } .filters-select { - grid-column: 2 / span 5; - margin-bottom: 16px; + grid-column: 2 / span 5; + margin-bottom: 16px; } .filter-line { - grid-column: 2 / span 4; + grid-column: 2 / span 4; } .empty-conditions-container { - grid-column: 1 / span 6; - display: flex; - align-items: center; - gap: 12px; - margin-top: 8px; - margin-bottom: 16px; + grid-column: 1 / span 6; + display: flex; + align-items: center; + gap: 12px; + margin-top: 8px; + margin-bottom: 16px; } .add-condition-container { - grid-column: 1 / span 6; - display: flex; - align-items: center; - gap: 12px; - margin-top: 8px; - margin-bottom: 16px; + grid-column: 1 / span 6; + display: flex; + align-items: center; + gap: 12px; + margin-top: 8px; + margin-bottom: 16px; } .where-label { - font-weight: 500; - color: rgba(0, 0, 0, 0.87); - white-space: nowrap; + font-weight: 500; + color: rgba(0, 0, 0, 0.87); + white-space: nowrap; } @media (prefers-color-scheme: dark) { - .where-label { - color: rgba(255, 255, 255, 0.87); - } + .where-label { + color: rgba(255, 255, 255, 0.87); + } } .add-condition-button { - width: auto; - min-width: auto; - min-height: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - text-transform: none; - margin: 0 !important; - padding: 0 16px; - gap: 4px; + width: auto; + min-width: auto; + min-height: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + text-transform: none; + margin: 0 !important; + padding: 0 16px; + gap: 4px; } .add-condition-button.accent-button { - color: #C177FC; + color: var(--ra-accent-text); } .add-condition-button.accent-button:hover { - background-color: rgba(193, 119, 252, 0.04); + background-color: var(--color-accentedPalette-50); } .add-condition-button.accent-button .add-icon { - font-size: 20px; - width: 20px; - height: 20px; - line-height: 20px; + font-size: 20px; + width: 20px; + height: 20px; + line-height: 20px; } .empty-conditions-container .column-name-icon { - font-size: 18px; - width: 18px; - height: 18px; - vertical-align: middle; + font-size: 18px; + width: 18px; + height: 18px; + vertical-align: middle; } .empty-condition-input { - width: auto; - min-width: 200px; - max-width: 300px; - margin: 0; - flex-shrink: 0; + width: auto; + min-width: 200px; + max-width: 300px; + margin: 0; + flex-shrink: 0; } .empty-condition-input ::ng-deep .mat-mdc-form-field-infix { - min-height: 36px; - padding-top: 8px; - padding-bottom: 8px; - display: flex; - align-items: center; + min-height: 36px; + padding-top: 8px; + padding-bottom: 8px; + display: flex; + align-items: center; } .empty-condition-input ::ng-deep .mat-mdc-form-field { - margin: 0; + margin: 0; } .empty-condition-input ::ng-deep .mat-mdc-text-field-wrapper { - padding-bottom: 0; - margin-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; } .empty-condition-input ::ng-deep .mat-mdc-form-field-subscript-wrapper { - margin-top: 0; - position: absolute; - top: 100%; + margin-top: 0; + position: absolute; + top: 100%; } .dynamic-column-radio { - grid-column: 6; - margin-top: -16px; - align-self: center; + grid-column: 6; + margin-top: -16px; + align-self: center; } .comparator-select-field { - grid-column: 3; + grid-column: 3; } .add-condition-footer { - grid-column: 1 / span 6; - margin-top: 24px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - gap: 16px; + grid-column: 1 / span 6; + margin-top: 24px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 16px; } .add-condition-footer button { - width: auto; - min-width: auto; - min-height: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - text-transform: none; - margin: 0 0 16px 0 !important; - padding: 0 16px; + width: auto; + min-width: auto; + min-height: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + text-transform: none; + margin: 0 0 16px 0 !important; + padding: 0 16px; } .add-condition-footer .filters-select { - width: auto; - min-width: 200px; - max-width: 300px; - margin: 0 !important; - min-height: 36px; - margin-top: 0 !important; - flex-shrink: 0; + width: auto; + min-width: 200px; + max-width: 300px; + margin: 0 !important; + min-height: 36px; + margin-top: 0 !important; + flex-shrink: 0; } .add-condition-footer .filters-select ::ng-deep .mat-mdc-form-field-infix { - min-height: 36px; - padding-top: 8px; - padding-bottom: 8px; - display: flex; - align-items: center; + min-height: 36px; + padding-top: 8px; + padding-bottom: 8px; + display: flex; + align-items: center; } .add-condition-footer .filters-select ::ng-deep .mat-mdc-text-field-wrapper { - padding-bottom: 0; - margin-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; } .add-condition-footer ::ng-deep .mat-mdc-form-field { - margin-top: 0 !important; - margin-bottom: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; } .add-condition-footer ::ng-deep .mat-mdc-form-field-wrapper { - padding-bottom: 0; + padding-bottom: 0; } .dynamic-column-radio ::ng-deep .mdc-form-field { - display: flex; - align-items: center; - gap: 4px; + display: flex; + align-items: center; + gap: 4px; } -.dynamic-column-radio ::ng-deep .mdc-form-field>label { - white-space: nowrap; +.dynamic-column-radio ::ng-deep .mdc-form-field > label { + white-space: nowrap; } .filter-save-form { - grid-column: 1 / span 6; - margin-bottom: 24px; + grid-column: 1 / span 6; + margin-bottom: 24px; } .section-title { - grid-column: 1 / span 6; - margin: 16px 0 8px 0; + grid-column: 1 / span 6; + margin: 16px 0 8px 0; - font-weight: 500; + font-weight: 500; } @media (prefers-color-scheme: light) { - .section-title { - color: rgba(0, 0, 0, 0.87); - } + .section-title { + color: rgba(0, 0, 0, 0.87); + } } @media (prefers-color-scheme: dark) { - .section-title { - color: rgba(255, 255, 255, 0.87); - } + .section-title { + color: rgba(255, 255, 255, 0.87); + } } .section-description { - grid-column: 1 / span 6; - margin: 0 0 16px 0; - font-size: 14px; - white-space: nowrap; + grid-column: 1 / span 6; + margin: 0 0 16px 0; + font-size: 14px; + white-space: nowrap; } @media (prefers-color-scheme: light) { - .section-description { - color: rgba(0, 0, 0, 0.6); - } + .section-description { + color: rgba(0, 0, 0, 0.6); + } } @media (prefers-color-scheme: dark) { - .section-description { - color: rgba(255, 255, 255, 0.6); - } + .section-description { + color: rgba(255, 255, 255, 0.6); + } } .full-width { - grid-column: 1 / -1; + grid-column: 1 / -1; } .full-width.filter-name-field { - max-width: 400px; + max-width: 400px; } .default-filter-checkbox { - margin-bottom: 16px; + margin-bottom: 16px; } ::ng-deep .mat-dialog-container > .ng-star-inserted { - display: flex; - flex-direction: column; - width: 100%; + display: flex; + flex-direction: column; + width: 100%; } .filters-form { - flex: 1 0 auto; - display: flex; - flex-direction: column; + flex: 1 0 auto; + display: flex; + flex-direction: column; } .filters-header-description { - margin: 0 24px 16px 24px; - font-size: 14px; - line-height: 1.5; + margin: 0 24px 16px 24px; + font-size: 14px; + line-height: 1.5; } @media (prefers-color-scheme: light) { - .filters-header-description { - color: rgba(0, 0, 0, 0.6); - } + .filters-header-description { + color: rgba(0, 0, 0, 0.6); + } } @media (prefers-color-scheme: dark) { - .filters-header-description { - color: rgba(255, 255, 255, 0.6); - } + .filters-header-description { + color: rgba(255, 255, 255, 0.6); + } } ::ng-deep .mat-dialog-container { - display: flex; + display: flex; } .column-name { - grid-column: 2; - margin-top: -8px; - align-self: center; + grid-column: 2; + margin-top: -8px; + align-self: center; } .conditions-vertical-line { - grid-column: 1; - grid-row: 2 / -1; - width: 1px; - background-color: rgba(0, 0, 0, 0.12); - margin-left: 9px; - margin-top: 0; - margin-bottom: 0; - z-index: 0; + grid-column: 1; + grid-row: 2 / -1; + width: 1px; + background-color: rgba(0, 0, 0, 0.12); + margin-left: 9px; + margin-top: 0; + margin-bottom: 0; + z-index: 0; } @media (prefers-color-scheme: dark) { - .conditions-vertical-line { - background-color: rgba(255, 255, 255, 0.12); - } + .conditions-vertical-line { + background-color: rgba(255, 255, 255, 0.12); + } } .filter-delete-button { - grid-column: 1; - margin-top: -20px; - margin-right: 0; - margin-left: 0; - align-self: center; - justify-self: center; - position: relative; - z-index: 1; - width: 18px; - height: 18px; - display: flex; - align-items: center; - justify-content: center; + grid-column: 1; + margin-top: -20px; + margin-right: 0; + margin-left: 0; + align-self: center; + justify-self: center; + position: relative; + z-index: 1; + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; } .filter-delete-button ::ng-deep .mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - line-height: 18px; + font-size: 18px; + width: 18px; + height: 18px; + line-height: 18px; } .settings-form__reset-button { - margin-right: auto; + margin-right: auto; } .no-filters-message { - grid-column: 1 / span 6; - color: rgba(0, 0, 0, 0.6); - font-style: italic; - margin: 16px 0; + grid-column: 1 / span 6; + color: rgba(0, 0, 0, 0.6); + font-style: italic; + margin: 16px 0; } .comparator-icon { - font-size: 18px; - width: 18px; - height: 18px; - margin-right: 8px; - vertical-align: middle; + font-size: 18px; + width: 18px; + height: 18px; + margin-right: 8px; + vertical-align: middle; } ::ng-deep .mat-mdc-select-panel .mat-mdc-option { - display: flex; - align-items: center; + display: flex; + align-items: center; } .comparator-select-field { - width: auto; - min-width: 140px; - max-width: none; + width: auto; + min-width: 140px; + max-width: none; } .comparator-select-field ::ng-deep .mat-mdc-form-field-infix { - width: 100% !important; - min-width: fit-content; - padding-left: 0; - position: relative; + width: 100% !important; + min-width: fit-content; + padding-left: 0; + position: relative; } .comparator-select-field ::ng-deep .mat-mdc-select-trigger { - width: 100%; - min-width: fit-content; - display: flex; - justify-content: space-between; - align-items: center; - position: relative; + width: 100%; + min-width: fit-content; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; } .comparator-select-field ::ng-deep .mat-mdc-select-value-text { - width: auto; - min-width: fit-content; - flex: 1; + width: auto; + min-width: fit-content; + flex: 1; } .comparator-select-field ::ng-deep .mat-mdc-select-arrow-wrapper { - position: absolute; - right: 12px; - top: 50%; - transform: translateY(-50%); - pointer-events: none; + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; } .comparator-select-field ::ng-deep .mat-mdc-select-panel { - min-width: max-content !important; - width: max-content !important; + min-width: max-content !important; + width: max-content !important; } .conditions-error-message { - grid-column: 1 / span 6; - color: #f44336; - font-size: 12px; - margin: 8px 0 0 0; - padding-left: 16px; + grid-column: 1 / span 6; + color: var(--color-warnPalette-500); + font-size: 12px; + margin: 8px 0 0 0; + padding-left: 16px; } /* Add more spacing for multiline textarea inputs (more than 2 rows) */ -.filters-content ::ng-deep .filter-line mat-form-field:has(textarea[rows]):not(:has(textarea[rows="1"])):not(:has(textarea[rows="2"])), +.filters-content ::ng-deep + .filter-line + mat-form-field:has(textarea[rows]):not(:has(textarea[rows="1"])):not(:has(textarea[rows="2"])), .filters-content ::ng-deep .filter-line mat-form-field:has(textarea.long-textarea), .filters-content ::ng-deep .filter-line mat-form-field:has(textarea.form-textarea) { - margin-top: 24px !important; - margin-bottom: 24px !important; + margin-top: 24px !important; + margin-bottom: 24px !important; } /* Add more spacing for foreign key fields */ .filters-content ::ng-deep .filter-line .foreign-key, .filters-content ::ng-deep .filter-line app-edit-foreign-key, .filters-content ::ng-deep .foreign-key { - margin-top: 24px !important; - margin-bottom: 24px !important; + margin-top: 24px !important; + margin-bottom: 24px !important; } diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css index c16ea7a84..d99259c09 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css @@ -95,7 +95,11 @@ padding-right: 8px !important; } -.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action .mdc-evolution-chip__action__content { +.saved-filters-tabs + ::ng-deep + .mat-mdc-standard-chip.mdc-evolution-chip--selected + .mdc-evolution-chip__action + .mdc-evolution-chip__action__content { margin-left: 0 !important; padding-left: 0 !important; transform: translateX(0) !important; @@ -306,56 +310,56 @@ } ::ng-deep .static-filter-chip .mat-mdc-chip { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; --mdc-chip-container-shape-radius: 16px !important; - background-color: #E8ECEE !important; + background-color: var(--ra-chip-bg) !important; border-radius: 16px !important; pointer-events: none !important; cursor: default !important; } ::ng-deep .static-filter-chip .mat-mdc-chip:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; cursor: default !important; } ::ng-deep .static-filter-chip .mat-mdc-chip:active { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; cursor: default !important; } ::ng-deep .static-filter-chip .mdc-evolution-chip__cell { - background-color: #E8ECEE !important; + background-color: var(--ra-chip-bg) !important; border-radius: 16px !important; } ::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover { - background-color: #E8ECEE !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; pointer-events: none !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; cursor: default !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; cursor: default !important; } @@ -366,47 +370,47 @@ @media (prefers-color-scheme: dark) { ::ng-deep .static-filter-chip .mat-mdc-chip { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip:active { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mdc-evolution-chip__cell { - background-color: #E8ECEE !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover { - background-color: #E8ECEE !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: var(--ra-chip-bg) !important; + --mdc-chip-elevated-container-color: var(--ra-chip-bg) !important; + background-color: var(--ra-chip-bg) !important; } } diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css index cc617fcbd..8bcdfc353 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-tables-list/db-folder-delete-dialog/db-folder-delete-dialog.component.css @@ -1,124 +1,104 @@ .confirmation-message { - margin: 0 0 20px 0; - font-size: 16px; - line-height: 1.5; - color: #424242; + margin: 0 0 20px 0; + font-size: 16px; + line-height: 1.5; + color: var(--ra-text-muted); } .confirmation-message strong { - color: #212121; - font-weight: 600; + color: var(--ra-text); + font-weight: 600; } .folder-info { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 12px 16px; - background-color: #e3f2fd; - border-radius: 4px; - margin-bottom: 20px; + display: flex; + align-items: flex-start; + gap: 12px; + padding: 12px 16px; + background-color: rgba(37, 99, 235, 0.08); + border-radius: 4px; + margin-bottom: 20px; } .info-icon { - color: #1976d2; - font-size: 20px; - width: 20px; - height: 20px; - margin-top: 2px; + color: var(--color-primaryPalette-500); + font-size: 20px; + width: 20px; + height: 20px; + margin-top: 2px; } .info-text { - margin: 0; - font-size: 14px; - line-height: 1.5; - color: #424242; - flex: 1; + margin: 0; + font-size: 14px; + line-height: 1.5; + color: var(--ra-text-muted); + flex: 1; } .warning-note { - padding: 12px 16px; - background-color: #fff3e0; - border-radius: 4px; - border-left: 4px solid #ff9800; + padding: 12px 16px; + background-color: rgba(245, 158, 11, 0.08); + border-radius: 4px; + border-left: 4px solid #f59e0b; } .warning-note p { - margin: 0; - font-size: 14px; - line-height: 1.5; - color: #424242; + margin: 0; + font-size: 14px; + line-height: 1.5; + color: var(--ra-text-muted); } .warning-note strong { - color: #e65100; - font-weight: 600; + color: #d97706; + font-weight: 600; } .cancel-button { - color: #666; + color: var(--ra-text-muted); } .delete-button { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .delete-button mat-icon { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 18px; + width: 18px; + height: 18px; } /* Dark mode support */ @media (prefers-color-scheme: dark) { - .dialog-title { - border-bottom-color: #424242; - } - - .dialog-content { - background-color: #303030; - } - - .confirmation-message { - color: #e0e0e0; - } - - .confirmation-message strong { - color: #fff; - } - - .folder-info { - background-color: #1a3a52; - } - - .info-icon { - color: #64b5f6; - } - - .info-text { - color: #e0e0e0; - } - - .warning-note { - background-color: #4a3c28; - border-left-color: #ffb74d; - } - - .warning-note p { - color: #e0e0e0; - } - - .warning-note strong { - color: #ffb74d; - } - - .dialog-actions { - border-top-color: #424242; - } - - .cancel-button { - color: #aaa; - } -} \ No newline at end of file + .dialog-title { + border-bottom-color: var(--ra-border); + } + + .dialog-content { + background-color: var(--ra-surface); + } + + .folder-info { + background-color: rgba(37, 99, 235, 0.12); + } + + .info-icon { + color: #60a5fa; + } + + .warning-note { + background-color: rgba(245, 158, 11, 0.12); + border-left-color: #fbbf24; + } + + .warning-note strong { + color: #fbbf24; + } + + .dialog-actions { + border-top-color: var(--ra-border); + } +} diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css index ff3c148d5..aec42e746 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css +++ b/frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.css @@ -1,208 +1,187 @@ .dialog-body { - min-width: 400px; - max-height: 500px; - overflow-y: auto; + min-width: 400px; + max-height: 500px; + overflow-y: auto; } .folder-name-section { - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 1px solid #e0e0e0; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 1px solid var(--ra-border); } .folder-name-section h4 { - margin: 0 0 12px 0; - font-size: 14px; - font-weight: 500; - color: #666; + margin: 0 0 12px 0; + font-size: 14px; + font-weight: 500; + color: var(--ra-text-muted); } .folder-name-field { - width: 100%; + width: 100%; } .folder-color-section { - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 1px solid #e0e0e0; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 1px solid var(--ra-border); } .folder-color-section h4 { - margin: 0 0 12px 0; - font-size: 14px; - font-weight: 500; - color: #666; + margin: 0 0 12px 0; + font-size: 14px; + font-weight: 500; + color: var(--ra-text-muted); } .color-radio-group { - width: 100%; + width: 100%; } .color-row { - display: flex; - gap: 12px; - flex-wrap: wrap; - padding: 8px 0; + display: flex; + gap: 12px; + flex-wrap: wrap; + padding: 8px 0; } .color-radio-label { - display: inline-block; - position: relative; - cursor: pointer; + display: inline-block; + position: relative; + cursor: pointer; } .color-radio-input { - position: absolute; - opacity: 0; - width: 0; - height: 0; + position: absolute; + opacity: 0; + width: 0; + height: 0; } .color-swatch { - width: 40px; - height: 40px; - border-radius: 50%; - border: 2px solid transparent; - cursor: pointer; - transition: all 0.2s ease; - position: relative; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid transparent; + cursor: pointer; + transition: all 0.2s ease; + position: relative; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .color-radio-label:hover .color-swatch { - transform: scale(1.1); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); + transform: scale(1.1); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); } .color-radio-label.selected .color-swatch { - /* border: 2px solid currentColor; */ - box-shadow: 0 0 0 3px rgba(33, 33, 33, 0.1), 0 3px 8px rgba(0, 0, 0, 0.2); - transform: scale(1.05); + box-shadow: + 0 0 0 3px rgba(33, 33, 33, 0.1), + 0 3px 8px rgba(0, 0, 0, 0.2); + transform: scale(1.05); } .color-radio-label.selected .color-swatch::after { - content: '✓'; - position: absolute; - /* font-size: 20px; */ - color: white; - /* text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); */ - /* font-weight: bold; */ + content: "\2713"; + position: absolute; + color: white; } .tables-section h4 { - margin: 0 0 12px 0; - font-size: 14px; - font-weight: 500; - color: #666; + margin: 0 0 12px 0; + font-size: 14px; + font-weight: 500; + color: var(--ra-text-muted); } .table-list { - margin-top: 8px; + margin-top: 8px; } .table-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 8px; - border-bottom: 1px solid #e0e0e0; - transition: background-color 0.2s ease; + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 8px; + border-bottom: 1px solid var(--ra-border); + transition: background-color 0.2s ease; } .table-item:hover { - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.04); } .table-item:last-child { - border-bottom: none; + border-bottom: none; } .table-name { - flex: 1; - font-size: 14px; - color: #333; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 12px; + flex: 1; + font-size: 14px; + color: var(--ra-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 12px; } .action-button { - min-width: 70px; - height: 32px; - font-size: 12px; - font-weight: 500; - border-radius: 4px; - transition: all 0.2s ease; + min-width: 70px; + height: 32px; + font-size: 12px; + font-weight: 500; + border-radius: 4px; + transition: all 0.2s ease; } .add-button { - color: #4caf50; - background-color: transparent; + color: #4caf50; + background-color: transparent; } .add-button:hover { - background-color: rgba(76, 175, 80, 0.1); + background-color: rgba(76, 175, 80, 0.1); } .remove-button { - color: #f44336; - background-color: transparent; + color: var(--color-warnPalette-500); + background-color: transparent; } .remove-button:hover { - background-color: rgba(244, 67, 54, 0.1); + background-color: rgba(220, 38, 38, 0.1); } /* Dark mode support */ @media (prefers-color-scheme: dark) { - .folder-name-section { - border-bottom-color: #424242; - } - - .folder-name-section h4 { - color: #999; - } - - .folder-color-section { - border-bottom-color: #424242; - } - - .folder-color-section h4, - .tables-section h4 { - color: #999; - } - - .color-swatch { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - } - - .color-radio-label:hover .color-swatch { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); - } - - .color-radio-label.selected .color-swatch { - border-color: currentColor; - box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.4); - } - - .color-radio-label.selected .color-swatch::before { - border-color: currentColor; - opacity: 0.2; - } - - .table-item { - border-bottom-color: #424242; - } - - .table-item:hover { - background-color: rgba(255, 255, 255, 0.04); - } - - .table-name { - color: #ccc; - } -} \ No newline at end of file + .color-swatch { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + } + + .color-radio-label:hover .color-swatch { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); + } + + .color-radio-label.selected .color-swatch { + border-color: currentColor; + box-shadow: + 0 0 0 3px rgba(255, 255, 255, 0.1), + 0 3px 8px rgba(0, 0, 0, 0.4); + } + + .color-radio-label.selected .color-swatch::before { + border-color: currentColor; + opacity: 0.2; + } + + .table-item:hover { + background-color: rgba(255, 255, 255, 0.04); + } + + .remove-button:hover { + background-color: rgba(239, 68, 68, 0.1); + } +} diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css index bb8824c20..83c143b1e 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css +++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css @@ -1,1190 +1,1176 @@ :host { - width: 240px; - max-width: 240px; - min-width: 240px; - display: block; - overflow-x: hidden; - overflow-y: auto; - position: relative; + width: 240px; + max-width: 240px; + min-width: 240px; + display: block; + overflow-x: hidden; + overflow-y: auto; + position: relative; } :host-context(.side-bar_collapsed) { - width: 65px; - max-width: 65px; - min-width: 65px; - overflow-x: hidden; - overflow-y: auto; + width: 65px; + max-width: 65px; + min-width: 65px; + overflow-x: hidden; + overflow-y: auto; } /* Prevent horizontal scroll in sidebar */ :host * { - max-width: 100%; - box-sizing: border-box; + max-width: 100%; + box-sizing: border-box; } - .collapsed-content { - display: flex; - flex-direction: column; - align-items: center; - height: 100%; - min-height: calc(100vh - 120px); /* Adjust based on header height */ - position: relative; + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + min-height: calc(100vh - 120px); /* Adjust based on header height */ + position: relative; } .collapsed-top-section { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - flex: 1; - justify-content: flex-start; - padding-top: 8px; - overflow-y: auto; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + flex: 1; + justify-content: flex-start; + padding-top: 8px; + overflow-y: auto; + width: 100%; } .collapsed-bottom-section { - display: flex; - flex-direction: column; - align-items: center; - position: sticky; - bottom: 0; - background-color: #ffffff; - padding: 8px 0; - width: 100%; - z-index: 10; + display: flex; + flex-direction: column; + align-items: center; + position: sticky; + bottom: 0; + background-color: #ffffff; + padding: 8px 0; + width: 100%; + z-index: 10; } .collapsed-folders { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; } :host-context(.side-bar_collapsed) .collapsed-folders { - width: 100%; - justify-content: center; - align-items: center; + width: 100%; + justify-content: center; + align-items: center; } .collapsed-folder-item { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; /* Restored to 32px for square shape */ - border-radius: 4px; - background-color: transparent; - color: var(--color-primaryPalette-50-contrast); - cursor: pointer; - transition: background-color 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; /* Restored to 32px for square shape */ + border-radius: 4px; + background-color: transparent; + color: var(--color-primaryPalette-50-contrast); + cursor: pointer; + transition: background-color 0.2s ease; } .collapsed-folder-item:hover { - background-color: var(--color-primaryPalette-100); + background-color: var(--color-primaryPalette-100); } .collapsed-folder-item_active { - background-color: rgba(33, 33, 33, 0.1); - color: #212121; + background-color: rgba(37, 99, 235, 0.1); + color: var(--color-primaryPalette-500); } .collapsed-folder-item_active:hover { - background-color: rgba(33, 33, 33, 0.15); + background-color: rgba(37, 99, 235, 0.15); } .collapsed-folder-icon { - font-size: 20px; - height: 20px; - width: 20px; + font-size: 20px; + height: 20px; + width: 20px; } .collapsed-folder-icon.fallback { - font-size: 20px; - height: 20px; - width: 20px; + font-size: 20px; + height: 20px; + width: 20px; } /* Collapsed action buttons */ .collapsed-search-button, .collapsed-add-button { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.2s ease; - margin-bottom: 4px; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.2s ease; + margin-bottom: 4px; } .collapsed-search-button { - background-color: transparent; - color: var(--color-primaryPalette-500); + background-color: transparent; + color: var(--color-primaryPalette-500); } .collapsed-add-button { - background-color: var(--color-primaryPalette-50); - color: var(--color-primaryPalette-50-contrast); + background-color: var(--color-primaryPalette-50); + color: var(--color-primaryPalette-50-contrast); } .collapsed-search-button:hover { - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.04); } .collapsed-add-button:hover { - background-color: var(--color-primaryPalette-100); + background-color: var(--color-primaryPalette-100); } .collapsed-action-icon { - font-size: 18px; - height: 18px; - width: 18px; + font-size: 18px; + height: 18px; + width: 18px; } - /* Collapsed table list styles */ .collapsed-tables-list { - position: relative; - background: white; - border: 1px solid #e0e0e0; - border-top: none; - overflow: visible; - z-index: 1000; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - display: flex; - flex-direction: column; - gap: 4px; - padding: 8px; - margin-top: 8px; - border-radius: 4px; - width: 48px; - min-width: 48px; + position: relative; + background: var(--ra-elevated); + border: 1px solid var(--ra-border); + border-top: none; + overflow: visible; + z-index: 1000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + gap: 4px; + padding: 8px; + margin-top: 8px; + border-radius: 4px; + width: 48px; + min-width: 48px; } - :host-context(.side-bar_collapsed) .collapsed-tables-list { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } .collapsed-table-item { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; /* Restored to 32px for square shape */ - text-decoration: none; - color: inherit; - cursor: pointer; - transition: all 0.2s ease; - border-radius: 6px; - flex-shrink: 0; - position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; /* Restored to 32px for square shape */ + text-decoration: none; + color: inherit; + cursor: pointer; + transition: all 0.2s ease; + border-radius: 6px; + flex-shrink: 0; + position: relative; } .collapsed-table-item:hover { - transform: translateY(-1px); + transform: translateY(-1px); } .collapsed-table-item:hover .collapsed-table-icon { - transform: scale(1.02); + transform: scale(1.02); } .collapsed-table-item:hover .collapsed-table-initials { - background-color: var(--color-primaryPalette-100); - transform: scale(1.02); + background-color: var(--color-primaryPalette-100); + transform: scale(1.02); } .collapsed-table-item_active { - background-color: rgba(33, 33, 33, 0.1); - color: #212121; + background-color: rgba(37, 99, 235, 0.1); + color: var(--color-primaryPalette-500); } .collapsed-table-item_active .collapsed-table-initials { - background-color: #212121; - color: white; - transform: scale(1.05); + background-color: var(--color-primaryPalette-500); + color: white; + transform: scale(1.05); } .collapsed-table-item_active:hover .collapsed-table-initials { - background-color: #000000; + background-color: var(--color-primaryPalette-700); } /* Dark theme adaptations */ @media (prefers-color-scheme: dark) { - .collapsed-tables-list { - background: #303030; - border: 1px solid #424242; - } - - .collapsed-bottom-section { - background-color: #303030; - } - - .collapsed-folder-item { - background-color: transparent; - color: #ffffff; - } - - .collapsed-folder-item:hover { - background-color: rgba(255, 255, 255, 0.05); - } - - - .collapsed-folder-item_active { - background-color: #212121 !important; - color: #ffffff !important; - } - - /* Более специфичный селектор для гарантии */ - .collapsed-folder-item.collapsed-folder-item_active { - background-color: #212121 !important; - } - - .collapsed-folder-item_active .collapsed-folder-icon { - color: #ffffff !important; - } - - .collapsed-folder-item_active:hover, - .collapsed-folder-item_active:focus, - .collapsed-folder-item_active:active { - background-color: #000000 !important; - } - - /* Гарантируем фон для активной папки во всех состояниях */ - .collapsed-folder-item_active:not(:hover):not(:focus):not(:active) { - background-color: #212121 !important; - } - - .collapsed-table-item { - color: #e0e0e0; - } - - .collapsed-table-item:hover { - background-color: rgba(255, 255, 255, 0.05); - } - - .collapsed-table-item_active { - background-color: #212121; - color: #ffffff; - } - - .collapsed-table-item_active:hover { - background-color: #000000; - } - - .collapsed-table-icon-container { - background-color: #424242; - } - - .collapsed-table-item:hover .collapsed-table-icon-container { - background-color: rgba(255, 255, 255, 0.1); - } - - .collapsed-table-item_active .collapsed-table-icon-container { - background-color: #ffffff; - color: #000000; - } - - .collapsed-table-item_active:hover .collapsed-table-icon-container { - background-color: #f5f5f5; - } - - .collapsed-table-icon-container .collapsed-table-icon { - color: #e0e0e0; - } - - .collapsed-table-item_active .collapsed-table-icon-container .collapsed-table-icon { - color: #000000; - } - - .collapsed-table-initials { - background-color: #424242; - color: #e0e0e0; - } - - .collapsed-table-item:hover .collapsed-table-initials { - background-color: rgba(255, 255, 255, 0.1); - } - - .collapsed-table-item_active .collapsed-table-initials { - background-color: #ffffff; - color: #000000; - } - - .collapsed-table-item_active:hover .collapsed-table-initials { - background-color: #f5f5f5; - } - - .collapsed-search-button { - color: #ffffff !important; - } - - .collapsed-search-button:hover { - background-color: rgba(255, 255, 255, 0.1); - } - - .collapsed-add-button { - background-color: #424242; - color: #ffffff; - } - - .collapsed-add-button:hover { - background-color: #555555; - } + .collapsed-tables-list { + background: var(--ra-surface); + border: 1px solid var(--ra-border); + } + + .collapsed-bottom-section { + background-color: var(--ra-surface); + } + + .collapsed-folder-item { + background-color: transparent; + color: #ffffff; + } + + .collapsed-folder-item:hover { + background-color: rgba(255, 255, 255, 0.05); + } + + .collapsed-folder-item_active { + background-color: var(--ra-border) !important; + color: #ffffff !important; + } + + /* Более специфичный селектор для гарантии */ + .collapsed-folder-item.collapsed-folder-item_active { + background-color: var(--ra-border) !important; + } + + .collapsed-folder-item_active .collapsed-folder-icon { + color: #ffffff !important; + } + + .collapsed-folder-item_active:hover, + .collapsed-folder-item_active:focus, + .collapsed-folder-item_active:active { + background-color: var(--ra-border-hover) !important; + } + + /* Гарантируем фон для активной папки во всех состояниях */ + .collapsed-folder-item_active:not(:hover):not(:focus):not(:active) { + background-color: var(--ra-border) !important; + } + + .collapsed-table-item { + color: var(--ra-text); + } + + .collapsed-table-item:hover { + background-color: rgba(255, 255, 255, 0.05); + } + + .collapsed-table-item_active { + background-color: var(--ra-border); + color: #ffffff; + } + + .collapsed-table-item_active:hover { + background-color: var(--ra-border-hover); + } + + .collapsed-table-icon-container { + background-color: var(--ra-border); + } + + .collapsed-table-item:hover .collapsed-table-icon-container { + background-color: rgba(255, 255, 255, 0.1); + } + + .collapsed-table-item_active .collapsed-table-icon-container { + background-color: #ffffff; + color: #000000; + } + + .collapsed-table-item_active:hover .collapsed-table-icon-container { + background-color: #f5f5f5; + } + + .collapsed-table-icon-container .collapsed-table-icon { + color: var(--ra-text); + } + + .collapsed-table-item_active .collapsed-table-icon-container .collapsed-table-icon { + color: #000000; + } + + .collapsed-table-initials { + background-color: var(--ra-border); + color: var(--ra-text); + } + + .collapsed-table-item:hover .collapsed-table-initials { + background-color: rgba(255, 255, 255, 0.1); + } + + .collapsed-table-item_active .collapsed-table-initials { + background-color: #ffffff; + color: #000000; + } + + .collapsed-table-item_active:hover .collapsed-table-initials { + background-color: #f5f5f5; + } + + .collapsed-search-button { + color: #ffffff !important; + } + + .collapsed-search-button:hover { + background-color: rgba(255, 255, 255, 0.1); + } + + .collapsed-add-button { + background-color: var(--ra-border); + color: #ffffff; + } + + .collapsed-add-button:hover { + background-color: var(--ra-border-hover); + } } .collapsed-table-item_active:hover { - background-color: rgba(33, 33, 33, 0.25); + background-color: rgba(37, 99, 235, 0.25); } .collapsed-table-icon-container { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - background-color: var(--color-primaryPalette-50); - border-radius: 6px; - transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background-color: var(--color-primaryPalette-50); + border-radius: 6px; + transition: all 0.2s ease; } .collapsed-table-item:hover .collapsed-table-icon-container { - background-color: var(--color-primaryPalette-100); - transform: scale(1.02); + background-color: var(--color-primaryPalette-100); + transform: scale(1.02); } .collapsed-table-item_active .collapsed-table-icon-container { - background-color: #212121; - color: white; - transform: scale(1.05); + background-color: var(--color-primaryPalette-500); + color: white; + transform: scale(1.05); } .collapsed-table-item_active:hover .collapsed-table-icon-container { - background-color: #000000; + background-color: var(--color-primaryPalette-700); } .collapsed-table-icon-container .collapsed-table-icon { - font-size: 16px; - color: var(--color-primaryPalette-50-contrast); + font-size: 16px; + color: var(--color-primaryPalette-50-contrast); } .collapsed-table-item_active .collapsed-table-icon-container .collapsed-table-icon { - color: white; + color: white; } - .collapsed-table-initials { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background-color: var(--color-primaryPalette-50); - color: var(--color-primaryPalette-50-contrast); - border-radius: 6px; - font-size: 11px; - font-weight: 600; - letter-spacing: 0.5px; - transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: var(--color-primaryPalette-50); + color: var(--color-primaryPalette-50-contrast); + border-radius: 6px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.5px; + transition: all 0.2s ease; } .collapsed-table-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: inherit; + font-size: 18px; + width: 18px; + height: 18px; + color: inherit; } .collapsed-table-initials { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 6px; - background-color: var(--color-primaryPalette-50); - color: var(--color-primaryPalette-50-contrast); - transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 6px; + background-color: var(--color-primaryPalette-50); + color: var(--color-primaryPalette-50-contrast); + transition: all 0.2s ease; } .collapsed-table-text { - font-size: 11px; - font-weight: 600; - text-align: center; - letter-spacing: 0.5px; - text-transform: uppercase; + font-size: 11px; + font-weight: 600; + text-align: center; + letter-spacing: 0.5px; + text-transform: uppercase; } .collapsed-table-icon { - font-size: 16px; - width: 16px; - height: 16px; + font-size: 16px; + width: 16px; + height: 16px; } - .mat-icon-button { - margin-right: -8px; + margin-right: -8px; } .mat-line { - line-height: 48px; + line-height: 48px; } .tables-list { - width: 100%; - box-sizing: border-box; - /* min-height: 0; */ - height: calc(100vh - 100px); /* Adjust based on header height */ + width: 100%; + box-sizing: border-box; + /* min-height: 0; */ + height: calc(100vh - 100px); /* Adjust based on header height */ } .tables-list ::ng-deep .table-list-item .mat-list-item-content { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .table-list-item { - cursor: pointer; - transition: opacity 0.2s ease; + cursor: pointer; + transition: opacity 0.2s ease; } .table-list-item[draggable="true"]:hover { - opacity: 0.8; + opacity: 0.8; } .table-list-item[draggable="true"]:active { - opacity: 0.6; + opacity: 0.6; } - .table-list-initials { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 4px; - background-color: var(--color-primaryPalette-50); - color: var(--color-primaryPalette-50-contrast); + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 4px; + background-color: var(--color-primaryPalette-50); + color: var(--color-primaryPalette-50-contrast); } @media (prefers-color-scheme: dark) { - .table-list-initials { - background-color: var(--color-whitePalette-900); - color: var(--color-whitePalette-900-contrast); - } + .table-list-initials { + background-color: var(--color-whitePalette-900); + color: var(--color-whitePalette-900-contrast); + } - .folder-header.expanded { - background-color: #212121 !important; - color: #ffffff !important; - } + .folder-header.expanded { + background-color: var(--ra-border) !important; + color: #ffffff !important; + } - .folder-header .folder-icon { - color: #ffffff !important; - } + .folder-header .folder-icon { + color: #ffffff !important; + } - /* .folder-header.expanded .folder-name, */ - .folder-header .folder-name { - color: #ffffff !important; - } + /* .folder-header.expanded .folder-name, */ + .folder-header .folder-name { + color: #ffffff !important; + } - .folder-header.expanded .folder-expand-icon { - color: #ffffff !important; - } + .folder-header.expanded .folder-expand-icon { + color: #ffffff !important; + } - .folder-header:hover { - background-color: rgba(255, 255, 255, 0.05) !important; - } + .folder-header:hover { + background-color: rgba(255, 255, 255, 0.05) !important; + } } .table-list-initials:hover { - background-color: var(--color-primaryPalette-100); + background-color: var(--color-primaryPalette-100); } @media (prefers-color-scheme: dark) { - .table-list-initials:hover { - background-color: var(--color-whitePalette-900); - } + .table-list-initials:hover { + background-color: var(--color-whitePalette-900); + } } .table-list-icon { - font-size: 20px; - height: 20px; - width: 20px; + font-size: 20px; + height: 20px; + width: 20px; } .tables-list ::ng-deep .mat-list-base .mat-list-item { - height: 40px !important; + height: 40px !important; } .list-item_active ::ng-deep .mdc-list-item__primary-text { - color: var(--color-accentedPalette-500); + color: var(--color-accentedPalette-500); } .list-item_active ::ng-deep .table-list-initials { - background-color: var(--color-accentedPalette-500); - color: var(--color-accentedPalette-500-contrast); + background-color: var(--color-accentedPalette-500); + color: var(--color-accentedPalette-500-contrast); } .empty-message { - margin-top: 20px; - margin-left: 16px; + margin-top: 20px; + margin-left: 16px; } /* Expanded state container */ .expanded-container { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - position: relative; - overflow-y: auto; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + position: relative; + overflow-y: auto; } .search-input { - background-color: transparent; - margin-top: 8px; - margin-left: 16px; - margin-bottom: -8px; - width: calc(100% - 32px); - max-width: calc(240px - 32px); - box-sizing: border-box; - order: 1; /* Always first */ + background-color: transparent; + margin-top: 8px; + margin-left: 16px; + margin-bottom: -8px; + width: calc(100% - 32px); + max-width: calc(240px - 32px); + box-sizing: border-box; + order: 1; /* Always first */ } /* Add folder button container */ .add-folder-button-container { - order: 2; /* Default: after search when no custom folders */ - margin-left: 16px; - margin-right: 16px; - margin-top: 4px; - margin-bottom: 8px; - width: calc(100% - 32px); - box-sizing: border-box; + order: 2; /* Default: after search when no custom folders */ + margin-left: 16px; + margin-right: 16px; + margin-top: 4px; + margin-bottom: 8px; + width: calc(100% - 32px); + box-sizing: border-box; } /* When custom folders exist, move add button to bottom */ .expanded-container.has-custom-folders .add-folder-button-container { - order: 4; /* After folders section */ - position: sticky; - bottom: 0; - background-color: #ffffff; - padding: 8px 16px; - z-index: 10; - margin-top: auto; -} - -/* Dark theme support for add button container when at bottom */ -@media (prefers-color-scheme: dark) { - .expanded-container.has-custom-folders .add-folder-button-container { - background-color: #303030; - } + order: 4; /* After folders section */ + position: sticky; + bottom: 0; + background-color: var(--ra-bg); + padding: 8px 16px; + z-index: 10; + margin-top: auto; } .search-input ::ng-deep * { - background-color: transparent !important; + background-color: transparent !important; } .search-input ::ng-deep .mdc-text-field { - padding: 0 !important; + padding: 0 !important; } .search-input ::ng-deep .mat-mdc-form-field-infix { - min-height: 0; + min-height: 0; } -.search-input ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix { - padding-top: 8px; - padding-bottom: 8px; +.search-input + ::ng-deep + .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) + .mat-mdc-form-field-infix { + padding-top: 8px; + padding-bottom: 8px; } .add-folder-button { - width: 100%; + width: 100%; } .add-folder-button:hover { - border-color: #757575 !important; - background-color: rgba(0, 0, 0, 0.04) !important; + border-color: #757575 !important; + background-color: rgba(0, 0, 0, 0.04) !important; } .add-folder-button mat-icon { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 18px; + width: 18px; + height: 18px; } .folders-section { - margin: 0 16px; - margin-bottom: 8px; - width: calc(100% - 32px); - box-sizing: border-box; - order: 3; /* After search and (optionally) add button */ - flex: 1; - overflow-y: auto; + margin: 0 16px; + margin-bottom: 8px; + width: calc(100% - 32px); + box-sizing: border-box; + order: 3; /* After search and (optionally) add button */ + flex: 1; + overflow-y: auto; } .folder-item { - margin-bottom: 4px; - border: none; - border-radius: 4px; - background: transparent; - width: 100%; - box-sizing: border-box; - position: relative; - transition: background-color 0.2s ease; + margin-bottom: 4px; + border: none; + border-radius: 4px; + background: transparent; + width: 100%; + box-sizing: border-box; + position: relative; + transition: background-color 0.2s ease; } .folder-item.drag-over { - background-color: rgba(33, 150, 243, 0.1); - border: 2px dashed #2196f3; + background-color: rgba(33, 150, 243, 0.1); + border: 2px dashed #2196f3; } .folder-item.expanded::after { - content: ''; - position: absolute; - bottom: 0; - left: 12px; - right: 12px; - height: 1px; - background-color: #e0e0e0; + content: ""; + position: absolute; + bottom: 0; + left: 12px; + right: 12px; + height: 1px; + background-color: var(--ra-border); } .folder-header { - display: flex; - align-items: center; - padding: 8px 4px 8px 0; - cursor: pointer; - user-select: none; - height: 40px; + display: flex; + align-items: center; + padding: 8px 4px 8px 0; + cursor: pointer; + user-select: none; + height: 40px; } .folder-header:hover { - background: #f5f5f5; + background: #f5f5f5; } .folder-header.expanded { - background-color: var(--color-primaryPalette-50); - color: var(--color-primaryPalette-50-contrast); - border-radius: 4px; + background-color: var(--color-primaryPalette-50); + color: var(--color-primaryPalette-50-contrast); + border-radius: 4px; } .folder-header.expanded .folder-icon { - color: var(--color-primaryPalette-50-contrast); + color: var(--color-primaryPalette-50-contrast); } .folder-header.expanded .folder-expand-icon { - color: var(--color-primaryPalette-50-contrast); + color: var(--color-primaryPalette-50-contrast); } .folder-actions { - display: flex; - align-items: center; - opacity: 0; - transition: opacity 0.2s ease; + display: flex; + align-items: center; + opacity: 0; + transition: opacity 0.2s ease; } .folder-header:hover .folder-actions { - opacity: 1; + opacity: 1; } - .more-folder-button { - width: 16px; - height: 16px; - line-height: 16px; - border: none; - border-radius: 0; - background-color: transparent !important; - color: #bdbdbd !important; - margin-left: 4px; + width: 16px; + height: 16px; + line-height: 16px; + border: none; + border-radius: 0; + background-color: transparent !important; + color: #bdbdbd !important; + margin-left: 4px; } .more-folder-button:hover { - border: none !important; - background-color: rgba(0, 0, 0, 0.02) !important; - color: #9e9e9e !important; + border: none !important; + background-color: rgba(0, 0, 0, 0.02) !important; + color: #9e9e9e !important; } .more-folder-button mat-icon { - font-size: 12px; - width: 12px; - height: 12px; + font-size: 12px; + width: 12px; + height: 12px; } .folder-name { - flex: 1; - font-weight: 500; - color: #424242; + flex: 1; + font-weight: 500; + color: var(--ra-text-muted); } .folder-name-edit-container { - display: flex; - align-items: center; - flex: 1; - max-width: calc(100% - 40px); + display: flex; + align-items: center; + flex: 1; + max-width: calc(100% - 40px); } .folder-name.editing { - background: white; - border: 1px solid #2196f3; - border-radius: 2px; - padding: 2px 6px; - margin: 0 4px; - flex: 1; - max-width: 100%; + background: var(--ra-elevated); + border: 1px solid var(--color-primaryPalette-500); + border-radius: 2px; + padding: 2px 6px; + margin: 0 4px; + flex: 1; + max-width: 100%; } .enter-icon { - font-size: 16px; - width: 16px; - height: 16px; - color: #9e9e9e; - cursor: pointer; - margin-left: 4px; + font-size: 16px; + width: 16px; + height: 16px; + color: #9e9e9e; + cursor: pointer; + margin-left: 4px; } .enter-icon:hover { - color: #757575; + color: #757575; } .folder-icon { - font-size: 20px; - width: 20px; - height: 20px; - color: #666; - margin-right: 8px; /* Уменьшаем отступ до названия папки до 8px */ - margin-left: 8px; /* Сдвигаем иконку вправо на 8px */ - flex-shrink: 0; + font-size: 20px; + width: 20px; + height: 20px; + color: var(--ra-text-muted); + margin-right: 8px; /* Уменьшаем отступ до названия папки до 8px */ + margin-left: 8px; /* Сдвигаем иконку вправо на 8px */ + flex-shrink: 0; } .folder-expand-icon { - transition: transform 0.2s ease; - font-size: 20px; - width: 20px; - height: 20px; - color: #666; - margin-left: auto; + transition: transform 0.2s ease; + font-size: 20px; + width: 20px; + height: 20px; + color: var(--ra-text-muted); + margin-left: auto; } .folder-expand-icon.expanded { - transform: rotate(90deg); + transform: rotate(90deg); } .folder-tables { - padding: 0 12px 8px; - border-top: none; - width: 100%; - max-width: 240px; - box-sizing: border-box; - min-height: 40px; + padding: 0 12px 8px; + border-top: none; + width: 100%; + max-width: 240px; + box-sizing: border-box; + min-height: 40px; } .folder-tables-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - margin-bottom: 4px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + margin-bottom: 4px; } .tables-count { - font-size: 12px; - color: #666; - font-weight: 500; + font-size: 12px; + color: var(--ra-text-muted); + font-weight: 500; } .add-table-button { - width: 24px; - height: 24px; - line-height: 24px; - border: none; - border-radius: 0; - background-color: transparent !important; - color: #9e9e9e !important; + width: 24px; + height: 24px; + line-height: 24px; + border: none; + border-radius: 0; + background-color: transparent !important; + color: #9e9e9e !important; } .add-table-button:hover { - border: none !important; - background-color: rgba(0, 0, 0, 0.02) !important; - color: #757575 !important; + border: none !important; + background-color: rgba(0, 0, 0, 0.02) !important; + color: #757575 !important; } .add-table-button mat-icon { - font-size: 16px; - width: 16px; - height: 16px; + font-size: 16px; + width: 16px; + height: 16px; } .selected-tables-list { - max-height: none; - overflow-y: visible; + max-height: none; + overflow-y: visible; } .selected-table-item { - display: flex; - align-items: center; - padding: 2px 0 2px 8px; - margin-bottom: 0; - background: transparent; - border-radius: 0; - font-size: 14px; - width: 100%; - box-sizing: border-box; - overflow: hidden; + display: flex; + align-items: center; + padding: 2px 0 2px 8px; + margin-bottom: 0; + background: transparent; + border-radius: 0; + font-size: 14px; + width: 100%; + box-sizing: border-box; + overflow: hidden; } - .table-link { - flex: 1; - display: block; - text-decoration: none; - color: inherit; - overflow: hidden; - min-width: 0; + flex: 1; + display: block; + text-decoration: none; + color: inherit; + overflow: hidden; + min-width: 0; } .table-link:hover { - background-color: rgba(0, 0, 0, 0.04); - border-radius: 0; - margin: 0 -12px; - padding: 0 12px; + background-color: rgba(0, 0, 0, 0.04); + border-radius: 0; + margin: 0 -12px; + padding: 0 12px; } .table-link_active .table-name { - color: var(--color-accentedPalette-500); + color: var(--color-accentedPalette-500); } .table-name { - flex: 1; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - min-width: 0; - display: block; - padding: 4px 0 4px 0; + flex: 1; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; + display: block; + padding: 4px 0 4px 0; } .remove-table-button { - width: 20px; - height: 20px; - line-height: 20px; - opacity: 0.4; - flex-shrink: 0; - border: none; - border-radius: 0; - background-color: transparent !important; - color: #9e9e9e !important; - margin-left: auto; - margin-right: 0; + width: 20px; + height: 20px; + line-height: 20px; + opacity: 0.4; + flex-shrink: 0; + border: none; + border-radius: 0; + background-color: transparent !important; + color: #9e9e9e !important; + margin-left: auto; + margin-right: 0; } .remove-table-button:hover { - opacity: 0.7; - border: none !important; - background-color: transparent !important; - color: #757575 !important; + opacity: 0.7; + border: none !important; + background-color: transparent !important; + color: #757575 !important; } .remove-table-button mat-icon { - font-size: 14px; - width: 14px; - height: 14px; + font-size: 14px; + width: 14px; + height: 14px; } .no-tables-message { - text-align: center; - padding: 16px 8px; - color: #666; - height: 200px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + text-align: center; + padding: 16px 8px; + color: var(--ra-text-muted); + height: 200px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .no-tables-message p { - margin: 0 0 12px 0; - font-size: 14px; + margin: 0 0 12px 0; + font-size: 14px; } .no-tables-message button { - font-size: 12px; - border-color: #e0e0e0 !important; - color: #9e9e9e !important; - background-color: transparent !important; + font-size: 12px; + border-color: var(--ra-border) !important; + color: #9e9e9e !important; + background-color: transparent !important; } .no-tables-message button:hover { - border-color: #bdbdbd !important; - background-color: rgba(0, 0, 0, 0.02) !important; - color: #757575 !important; + border-color: #bdbdbd !important; + background-color: rgba(0, 0, 0, 0.02) !important; + color: #757575 !important; } /* Styles for empty folders */ .no-tables-message.empty-folder-message { - padding: 12px 20px; - height: auto; - min-height: auto; + padding: 12px 20px; + height: auto; + min-height: auto; } - .empty-folder-button { - border-style: dashed !important; - border-width: 2px !important; - border-color: #ccc !important; - background-color: transparent !important; - color: #666 !important; - font-size: 14px !important; - min-width: 200px !important; - padding: 20px 16px !important; + border-style: dashed !important; + border-width: 2px !important; + border-color: var(--ra-border) !important; + background-color: transparent !important; + color: var(--ra-text-muted) !important; + font-size: 14px !important; + min-width: 200px !important; + padding: 20px 16px !important; } .empty-folder-button:hover { - border-color: #2196F3 !important; - color: #2196F3 !important; - background-color: rgba(33, 150, 243, 0.04) !important; + border-color: var(--color-primaryPalette-500) !important; + color: var(--color-primaryPalette-500) !important; + background-color: rgba(37, 99, 235, 0.04) !important; } /* Folder menu alignment */ ::ng-deep .mat-menu-panel .mat-menu-item { - display: flex !important; - align-items: center !important; - gap: 12px !important; - min-height: 48px !important; + display: flex !important; + align-items: center !important; + gap: 12px !important; + min-height: 48px !important; } ::ng-deep .mat-menu-panel .mat-menu-item .material-icons-outlined { - font-size: 20px !important; - width: 20px !important; - height: 20px !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - line-height: 1 !important; + font-size: 20px !important; + width: 20px !important; + height: 20px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + line-height: 1 !important; } ::ng-deep .mat-menu-panel .mat-menu-item span { - display: flex !important; - align-items: center !important; + display: flex !important; + align-items: center !important; } /* Add Table Dialog Styles */ .edit-tables-dialog { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - opacity: 1; - visibility: visible; - transition: opacity 0.2s ease, visibility 0.2s ease; - outline: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + opacity: 1; + visibility: visible; + transition: + opacity 0.2s ease, + visibility 0.2s ease; + outline: none; } .dialog-content { - background: white; - border-radius: 8px; - max-width: 400px; - width: 90%; - max-height: 500px; - display: flex; - flex-direction: column; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); - transform: scale(1); - transition: transform 0.2s ease; - position: relative; + background: var(--ra-elevated); + border-radius: 8px; + max-width: 400px; + width: 90%; + max-height: 500px; + display: flex; + flex-direction: column; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + transform: scale(1); + transition: transform 0.2s ease; + position: relative; } .dialog-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 20px; - border-bottom: 1px solid #e0e0e0; + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid var(--ra-border); } .dialog-header h3 { - margin: 0; - font-size: 18px; - font-weight: 500; + margin: 0; + font-size: 18px; + font-weight: 500; } .dialog-header .close-button { - color: #666; - width: 32px; - height: 32px; - line-height: 32px; + color: var(--ra-text-muted); + width: 32px; + height: 32px; + line-height: 32px; } .dialog-header .close-button:hover { - color: #333; - background-color: rgba(0, 0, 0, 0.04); + color: var(--ra-text); + background-color: rgba(0, 0, 0, 0.04); } .dialog-header .close-button mat-icon { - font-size: 20px; - width: 20px; - height: 20px; + font-size: 20px; + width: 20px; + height: 20px; } .dialog-body { - padding: 16px 20px; - max-height: 300px; - overflow-y: auto; + padding: 16px 20px; + max-height: 300px; + overflow-y: auto; } .available-table-item { - padding: 8px 0; - border-bottom: 1px solid #f0f0f0; + padding: 8px 0; + border-bottom: 1px solid #f0f0f0; } .available-table-item:last-child { - border-bottom: none; + border-bottom: none; } /* Edit Tables Dialog specific styles */ .edit-tables-dialog .dialog-content { - max-width: 450px; - width: 90%; + max-width: 450px; + width: 90%; } .edit-tables-dialog .dialog-body { - max-height: 400px; - overflow-y: auto; + max-height: 400px; + overflow-y: auto; } .edit-tables-dialog .table-list { - margin-top: 16px; + margin-top: 16px; } .edit-tables-dialog .table-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 0; - border-bottom: 1px solid #e0e0e0; - transition: background-color 0.2s ease; - padding-left: 4px; - padding-right: 4px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid var(--ra-border); + transition: background-color 0.2s ease; + padding-left: 4px; + padding-right: 4px; } .edit-tables-dialog .table-item:hover { - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.04); } .edit-tables-dialog .table-item:last-child { - border-bottom: none; + border-bottom: none; } .edit-tables-dialog .table-name { - flex: 1; - font-size: 14px; - color: #333; + flex: 1; + font-size: 14px; + color: var(--ra-text); } .edit-tables-dialog .action-button { - min-width: 60px; - height: 32px; - font-size: 12px; - font-weight: 500; - border-radius: 4px; - border: none; + min-width: 60px; + height: 32px; + font-size: 12px; + font-weight: 500; + border-radius: 4px; + border: none; } .edit-tables-dialog .add-button { - color: #4caf50; - background-color: transparent; + color: #4caf50; + background-color: transparent; } .edit-tables-dialog .add-button:hover { - background-color: rgba(76, 175, 80, 0.1); + background-color: rgba(76, 175, 80, 0.1); } .edit-tables-dialog .remove-button { - color: #f44336; - background-color: transparent; + color: var(--color-warnPalette-500); + background-color: transparent; } .edit-tables-dialog .remove-button:hover { - background-color: rgba(244, 67, 54, 0.1); + background-color: rgba(220, 38, 38, 0.1); } .edit-tables-dialog .folder-color-section { - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 1px solid #e0e0e0; + margin-bottom: 20px; + padding-bottom: 16px; + border-bottom: 1px solid var(--ra-border); } .edit-tables-dialog .folder-color-section h4 { - margin: 0 0 8px 0; - font-size: 14px; - font-weight: 500; - color: #666; + margin: 0 0 8px 0; + font-size: 14px; + font-weight: 500; + color: var(--ra-text-muted); } .edit-tables-dialog .color-row { - display: flex; - gap: 8px; - flex-wrap: wrap; + display: flex; + gap: 8px; + flex-wrap: wrap; } .edit-tables-dialog .tables-section h4 { - margin: 0 0 2px 0; - font-size: 14px; - font-weight: 500; - color: #666; + margin: 0 0 2px 0; + font-size: 14px; + font-weight: 500; + color: var(--ra-text-muted); } .edit-tables-dialog .color-option { - width: 32px; - height: 32px; - border-radius: 50%; - border: 2px solid #e0e0e0; - cursor: pointer; - transition: all 0.2s ease; - position: relative; + width: 32px; + height: 32px; + border-radius: 50%; + border: 2px solid var(--ra-border); + cursor: pointer; + transition: all 0.2s ease; + position: relative; } .edit-tables-dialog .color-option:hover { - transform: scale(1.1); - border-color: #999; + transform: scale(1.1); + border-color: #999; } .edit-tables-dialog .color-option.selected { - border-color: #333; - border-width: 3px; - transform: scale(1.15); + border-color: var(--ra-text); + border-width: 3px; + transform: scale(1.15); } .edit-tables-dialog .color-option.selected::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-weight: bold; - font-size: 12px; - text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); + content: "✓"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-weight: bold; + font-size: 12px; + text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); } .dialog-actions { - display: flex; - justify-content: flex-end; - gap: 8px; - padding: 16px 20px; - border-top: 1px solid #e0e0e0; + display: flex; + justify-content: flex-end; + gap: 8px; + padding: 16px 20px; + border-top: 1px solid var(--ra-border); } - - diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts index ac7da4bbb..ab73d07bb 100644 --- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts +++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts @@ -1,16 +1,9 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; -import { DbFolderDeleteDialogComponent, DbFolderDeleteDialogData } from './db-folder-delete-dialog/db-folder-delete-dialog.component'; -import { DbFolderEditDialogComponent, DbFolderEditDialogData } from './db-folder-edit-dialog/db-folder-edit-dialog.component'; -import { MatDialog, MatDialogModule } from '@angular/material/dialog'; -import { TableProperties, } from 'src/app/models/table'; - -import { AccessLevel } from 'src/app/models/user'; import { CommonModule } from '@angular/common'; -import { ConnectionsService } from 'src/app/services/connections.service'; -import { ContentLoaderComponent } from '../../ui-components/content-loader/content-loader.component'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; @@ -19,627 +12,640 @@ import { MatMenuModule } from '@angular/material/menu'; import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TableCategory } from 'src/app/models/connection'; +import { TableProperties } from 'src/app/models/table'; +import { AccessLevel } from 'src/app/models/user'; +import { ConnectionsService } from 'src/app/services/connections.service'; import { TableStateService } from 'src/app/services/table-state.service'; import { TablesService } from 'src/app/services/tables.service'; import { UiSettingsService } from 'src/app/services/ui-settings.service'; +import { ContentLoaderComponent } from '../../ui-components/content-loader/content-loader.component'; +import { + DbFolderDeleteDialogComponent, + DbFolderDeleteDialogData, +} from './db-folder-delete-dialog/db-folder-delete-dialog.component'; +import { + DbFolderEditDialogComponent, + DbFolderEditDialogData, +} from './db-folder-edit-dialog/db-folder-edit-dialog.component'; export interface Folder { - id: string; - name: string; - expanded: boolean; - tableIds: string[]; - iconColor?: string; // Optional color for folder icon - isEmpty?: boolean; // Flag to indicate if folder is newly created and empty + id: string; + name: string; + expanded: boolean; + tableIds: string[]; + iconColor?: string; // Optional color for folder icon + isEmpty?: boolean; // Flag to indicate if folder is newly created and empty } @Component({ - selector: 'app-db-tables-list', - templateUrl: './db-tables-list.component.html', - styleUrls: ['./db-tables-list.component.css'], - imports: [ - CommonModule, - FormsModule, - MatButtonModule, - MatCheckboxModule, - MatIconModule, - MatFormFieldModule, - MatInputModule, - MatListModule, - MatTooltipModule, - MatMenuModule, - MatDialogModule, - RouterModule, - ContentLoaderComponent - ] + selector: 'app-db-tables-list', + templateUrl: './db-tables-list.component.html', + styleUrls: ['./db-tables-list.component.css'], + imports: [ + CommonModule, + FormsModule, + MatButtonModule, + MatCheckboxModule, + MatIconModule, + MatFormFieldModule, + MatInputModule, + MatListModule, + MatTooltipModule, + MatMenuModule, + MatDialogModule, + RouterModule, + ContentLoaderComponent, + ], }) export class DbTablesListComponent implements OnInit, OnChanges { - @Input() connectionID: string; - @Input() connectionTitle: string; - @Input() tables: TableProperties[]; - @Input() selectedTable: string; - @Input() collapsed: boolean; - @Input() uiSettings: any; - @Input() accessLevel: AccessLevel; - - @Output() expandSidebar = new EventEmitter(); - - public tableCategories: TableCategory[] = []; - public substringToSearch: string; - public foundTables: TableProperties[]; - public folders: Folder[] = []; - - // Dialog state - public currentFolder: Folder | null = null; - - // Drag and drop state - public draggedTable: TableProperties | null = null; - public dragOverFolder: string | null = null; - - // Collapsed state - public showCollapsedTableList: boolean = false; - public currentCollapsedFolder: Folder | null = null; - - // State preservation - private preservedFolderStates: { [key: string]: boolean } = {}; - private preservedActiveFolder: string | null = null; - - // Folder icon colors - public folderIconColors = [ - { name: 'Default', value: '#212121' }, - { name: 'Blue', value: '#2196F3' }, - { name: 'Green', value: '#4CAF50' }, - { name: 'Orange', value: '#FF9800' }, - { name: 'Red', value: '#F44336' }, - { name: 'Purple', value: '#9C27B0' }, - { name: 'Teal', value: '#009688' }, - { name: 'Pink', value: '#E91E63' } - ]; - - constructor( - private _tableState: TableStateService,_tablesService: TablesService, - private _connectionsService: ConnectionsService, - private _uiSettingsService: UiSettingsService, - private dialog: MatDialog - ) { } - - ngOnInit() { - this.foundTables = this.tables; - this.loadFolders(); - console.log('ngOnInit - showCollapsedTableList initialized to:', this.showCollapsedTableList); - } - - ngOnChanges(changes: SimpleChanges) { - if (changes.collapsed) { - if (changes.collapsed.currentValue === true) { - // Sidebar is being collapsed - preserve current state - this.preserveFolderStates(); - } else if (changes.collapsed.currentValue === false) { - // Sidebar is being expanded - restore preserved state - this.restoreFolderStates(); - } - } - } - - searchSubstring() { - if (!this.substringToSearch || this.substringToSearch.trim() === '') { - this.foundTables = this.tables; - // Collapse all folders when search is cleared - this.folders.forEach(folder => { - folder.expanded = false; - }); - return; - } - - const searchTerm = this.substringToSearch.toLowerCase(); - - // Get all tables that match the search (including those in folders) - const allTables = [...this.tables]; - - // Add tables from folders that might not be in the main tables list - this.folders.forEach(folder => { - folder.tableIds.forEach(tableId => { - // Find the table object by ID - const tableInFolder = this.tables.find(t => t.table === tableId); - if (tableInFolder && !allTables.find(t => t.table === tableId)) { - allTables.push(tableInFolder); - } - }); - }); - - // Filter all tables by search term - this.foundTables = allTables.filter(tableItem => - tableItem.table.toLowerCase().includes(searchTerm) || - (tableItem.display_name?.toLowerCase().includes(searchTerm)) || - (tableItem.normalizedTableName?.toLowerCase().includes(searchTerm)) - ); - - // Remove duplicates - this.foundTables = this.foundTables.filter((table, index, self) => - index === self.findIndex(t => t.table === table.table) - ); - - // Expand all folders that contain matching tables - this.folders.forEach(folder => { - const folderTables = this.getFolderTables(folder); - const hasMatchingTables = folderTables.some(table => - this.foundTables.some(foundTable => foundTable.table === table.table) - ); - - if (hasMatchingTables) { - folder.expanded = true; - } else { - folder.expanded = false; - } - }); - } - - getTableName(table: TableProperties) { - return table.display_name || table.normalizedTableName || table.table - } - - // saveCollapsedMenuState() { - // const state = { - // showCollapsedTableList: this.showCollapsedTableList, - // currentCollapsedFolderId: this.currentCollapsedFolder?.id || null - // }; - // const key = `collapsedMenuState_${this.connectionID}`; - // localStorage.setItem(key, JSON.stringify(state)); - // console.log('Collapsed menu state saved:', state); - // } - - // loadAndSetExpandedFolders() { - - // } - - getTableNameLength(tableName: string) { - return tableName.length; - } - - closeSidebar() { - this._tableState.clearSelection(); - this._tableState.closeAIpanel(); - } - - onAddFolder() { - const newFolder: Folder = { - id: this.generateFolderId(), - name: `Folder ${this.folders.length}`, - expanded: true, // Разворачиваем папку сразу после создания - tableIds: [], - isEmpty: true // Mark as empty for special styling - }; - this.folders.push(newFolder); - console.log('onAddFolder'); - this.saveFolders(); - } - - toggleFolder(folderId: string) { - const folder = this.folders.find (f => f.id === folderId); - if (folder) { - folder.expanded = !folder.expanded; - const expandedFolders = this.folders.filter(f => f.expanded).map(f => f.id); - this._uiSettingsService.updateConnectionSetting(this.connectionID, 'tableFoldersExpanded', expandedFolders); - } - } - - onCollapsedFolderClick(folder: Folder) { - console.log('Clicked on folder:', folder.name); - - // If clicking on the same folder that's already open, close it - if (this.currentCollapsedFolder?.id === folder.id) { - this.showCollapsedTableList = false; - this.currentCollapsedFolder = null; - } else { - // If clicking on a different folder, open it immediately - this.showCollapsedTableList = true; - this.currentCollapsedFolder = folder; - } - - // Save the collapsed menu state - // this.saveCollapsedMenuState(); - - console.log('showCollapsedTableList is now:', this.showCollapsedTableList); - console.log('currentCollapsedFolder is now:', this.currentCollapsedFolder?.name); - } - - getCollapsedTableList(): TableProperties[] { - if (!this.currentCollapsedFolder) { - console.log('No current collapsed folder'); - return []; - } - - const tables = this.getFolderTables(this.currentCollapsedFolder); - console.log('getCollapsedTableList - tables:', tables); - return tables; - } - - navigateToTable(_table: TableProperties) { - // This method is called when clicking on a table in collapsed mode - // The actual navigation is handled by routerLink in the template - // We just need to close the sidebar after navigation - this.closeSidebar(); - } - - toggleCollapsedSearch() { - // Open the sidebar and activate search - this.expandSidebar.emit(); - // Focus on search input after sidebar expands - setTimeout(() => { - const input = document.querySelector('.search-input input') as HTMLInputElement; - if (input) { - input.focus(); - input.select(); - } - }, 300); // Wait for sidebar animation to complete - } - - deleteFolder(folder: Folder) { - const dialogData: DbFolderDeleteDialogData = { - folderName: folder.name, - tableCount: folder.tableIds.length - }; - - const dialogRef = this.dialog.open(DbFolderDeleteDialogComponent, { - width: '24em', - data: dialogData, - panelClass: 'db-folder-delete-dialog' - }); - - dialogRef.afterClosed().subscribe((confirmed: boolean) => { - if (confirmed) { - const index = this.folders.findIndex(f => f.id === folder.id); - if (index > -1) { - this.folders.splice(index, 1); - this.saveFolders(); - } - } - }); - } - - getFolderTables(folder: Folder): TableProperties[] { - const folderTables = this.tables.filter(table => folder.tableIds.includes(table.table)); - - // If there's a search term, filter the collection tables too - if (this.substringToSearch && this.substringToSearch.trim() !== '') { - const searchTerm = this.substringToSearch.toLowerCase(); - return folderTables.filter(table => - table.table.toLowerCase().includes(searchTerm) || - (table.display_name?.toLowerCase().includes(searchTerm)) || - (table.normalizedTableName?.toLowerCase().includes(searchTerm)) - ); - } - - return folderTables; - } - - getAvailableTables(folder: Folder | null): TableProperties[] { - if (!folder) return []; - return this.tables.filter(table => !folder.tableIds.includes(table.table)); - } - - isTableInAnyFolder(table: TableProperties): boolean { - return this.folders.some(folder => folder.tableIds.includes(table.table)); - } - - shouldShowFolder(folder: Folder): boolean { - // If no search term, show all folders - if (!this.substringToSearch || this.substringToSearch.trim() === '') { - return true; - } - - // Show collection if it has tables matching the search - const matchingTables = this.getFolderTables(folder); - return matchingTables.length > 0; - } - - showEditTablesDialog(folder: Folder) { - // Expand the folder if it's collapsed - folder.expanded = true; - - const dialogData: DbFolderEditDialogData = { - folder: folder, - tables: this.tables, - folderIconColors: this.folderIconColors - }; - - const dialogRef = this.dialog.open(DbFolderEditDialogComponent, { - width: '32em', - data: dialogData, - panelClass: 'db-folder-edit-dialog' - }); - - dialogRef.afterClosed().subscribe((result: Folder | undefined) => { - if (result) { - // Update the folder with the result from dialog - const index = this.folders.findIndex(f => f.id === result.id); - if (index !== -1) { - this.folders[index] = result; - this.saveFolders(); - } - } - }); - } - - - getFolderIconColor(folder: Folder, isActive?: boolean): string { - if (isActive) { - return '#212121'; // Black for active folders - } - - // Check if we're in dark theme - if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) { - // In dark theme, use #212121 for folders without custom color - return folder.iconColor || '#212121'; - } - - // In light theme, use default color - return folder.iconColor || '#212121'; - } - - - get allTables(): TableProperties[] { - return this.tables; - } - - isTableInFolder(table: TableProperties): boolean { - return this.currentFolder ? this.currentFolder.tableIds.includes(table.table) : false; - } - - isTableInCurrentDraggedFolder(table: TableProperties, folder: Folder): boolean { - return this.draggedTable && - this.draggedTable.table === table.table && - folder.tableIds.includes(table.table); - } - - toggleTableInFolder(table: TableProperties) { - if (!this.currentFolder) return; - - const tableId = table.table; - const isInFolder = this.currentFolder.tableIds.includes(tableId); - - if (isInFolder) { - // Remove from folder - this.currentFolder.tableIds = this.currentFolder.tableIds.filter(id => id !== tableId); - } else { - // Add to folder - this.currentFolder.tableIds.push(tableId); - // Remove empty flag when adding tables - if (this.currentFolder.isEmpty) { - this.currentFolder.isEmpty = false; - } - } - - console.log('toggleTableInFolder'); - this.saveFolders(); - } - - - removeTableFromFolder(folder: Folder, table: TableProperties, event: Event) { - event.stopPropagation(); - folder.tableIds = folder.tableIds.filter(id => id !== table.table); - console.log('removeTableFromFolder'); - this.saveFolders(); - } - - trackByFolderId(_index: number, folder: Folder): string { - return folder.id; - } - - hasCustomFolders(): boolean { - // Check if there are folders other than "All Tables" - return this.folders.some(folder => folder.name !== 'All Tables'); - } - - private preserveFolderStates() { - // Save expanded states of all folders - this.folders.forEach(folder => { - this.preservedFolderStates[folder.id] = folder.expanded; - }); - - // Check if there are only "All Tables" folder (no custom folders) - const hasCustomFolders = this.folders.some(folder => folder.name !== 'All Tables'); - - // If no custom folders exist, ensure "All Tables" is always expanded - if (!hasCustomFolders) { - const allTablesFolder = this.folders.find(folder => folder.name === 'All Tables'); - if (allTablesFolder) { - this.preservedFolderStates[allTablesFolder.id] = true; - this.preservedActiveFolder = allTablesFolder.id; - } - } else { - // Find and save the currently active folder (the one that contains selected table) - const activeFolder = this.findActiveFolder(); - this.preservedActiveFolder = activeFolder ? activeFolder.id : null; - } - - console.log('Preserved folder states:', this.preservedFolderStates); - console.log('Preserved active folder:', this.preservedActiveFolder); - console.log('Expanded folders count:', Object.values(this.preservedFolderStates).filter(expanded => expanded).length); - } - - private restoreFolderStates() { - // Check if there are only "All Tables" folder (no custom folders) - const hasCustomFolders = this.folders.some(folder => folder.name !== 'All Tables'); - - // If no custom folders exist, always expand "All Tables" - if (!hasCustomFolders) { - const allTablesFolder = this.folders.find(folder => folder.name === 'All Tables'); - if (allTablesFolder) { - allTablesFolder.expanded = true; - this.currentCollapsedFolder = allTablesFolder; - this.showCollapsedTableList = true; - console.log('No custom folders - keeping All Tables expanded'); - // Save the collapsed menu state after restoration - // this.saveCollapsedMenuState(); - return; - } - } - - // Restore expanded states of all folders - this.folders.forEach(folder => { - if (Object.hasOwn(this.preservedFolderStates, folder.id)) { - folder.expanded = this.preservedFolderStates[folder.id]; - } - }); - - // In collapsed view, show the table list if any folder was expanded - const hasExpandedFolders = Object.values(this.preservedFolderStates).some(expanded => expanded); - if (hasExpandedFolders) { - // If there was an active folder, use it; otherwise use the first expanded folder - let targetFolder = null; - - if (this.preservedActiveFolder) { - targetFolder = this.folders.find(f => f.id === this.preservedActiveFolder); - } - - if (!targetFolder) { - // Find the first expanded folder - targetFolder = this.folders.find(f => this.preservedFolderStates[f.id]); - } - - if (targetFolder) { - this.currentCollapsedFolder = targetFolder; - this.showCollapsedTableList = true; - } - } - - console.log('Restored folder states:', this.preservedFolderStates); - console.log('Restored active folder:', this.preservedActiveFolder); - console.log('Has expanded folders:', hasExpandedFolders); - - // Save the collapsed menu state after restoration - // this.saveCollapsedMenuState(); - } - - private findActiveFolder(): Folder | null { - if (!this.selectedTable) return null; - - return this.folders.find(folder => - folder.tableIds.includes(this.selectedTable) - ) || null; - } - - private generateFolderId(): string { - return Date.now().toString(); - } - - private loadFolders() { - this._connectionsService.getTablesFolders(this.connectionID).subscribe({ - next: (categories: TableCategory[]) => { - if (categories && categories.length > 0) { - this.tableCategories = categories; - this.folders = categories.map(cat => ({ - id: cat.category_id, - name: cat.category_name, - expanded: false, - tableIds: cat.tables, - iconColor: cat.category_color - })); - console.log('Folders loaded from connection settings:', this.folders.map(c => ({ name: c.name, expanded: c.expanded }))); - } else { - console.log('No folders found in connection settings.'); - this.folders = []; - } - - const expandedFolders = this.uiSettings?.tableFoldersExpanded || ['0']; - if (expandedFolders && expandedFolders.length > 0) { - this.folders.forEach(folder => { - folder.expanded = expandedFolders.includes(folder.id); - }); - } - - const allTablesFolder: Folder = { - id: '0', - name: 'All Tables', - expanded: expandedFolders && expandedFolders.length === 0 ? false : expandedFolders.includes('0'), - tableIds: this.tables.map(table => table.table) - }; - this.folders.unshift(allTablesFolder); - }, - error: (error) => { - console.error('Error fetching folders from connection settings:', error); - this.folders = []; - } - }); - } - - private saveFolders() { - try { - this.tableCategories = this.folders - .filter(folder => folder.name !== 'All Tables') // Exclude "All Tables" from saving - .map(folder => ({ - category_id: folder.id, - category_name: folder.name, - category_color: folder.iconColor, - tables: folder.tableIds - })); - this._connectionsService.updateTablesFolders(this.connectionID, this.tableCategories).subscribe({ - next: () => { - console.log('Connection settings updated with folders.'); - }, - error: (error) => { - console.error('Error updating connection settings with folders:', error); - } - }); - } catch (e) { - console.error('Error saving folders:', e); - } - } - - // Drag and drop methods - onTableDragStart(event: DragEvent, table: TableProperties) { - this.draggedTable = table; - if (event.dataTransfer) { - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('text/plain', table.table); - } - } - - onTableDragEnd(_event: DragEvent) { - this.draggedTable = null; - this.dragOverFolder = null; - } - - onFolderDragOver(event: DragEvent, folderId: string) { - event.preventDefault(); - if (event.dataTransfer) { - event.dataTransfer.dropEffect = 'move'; - } - this.dragOverFolder = folderId; - } - - onFolderDragLeave(event: DragEvent, _folderId: string) { - // Only clear if we're actually leaving the collection (not moving to a child element) - const rect = (event.currentTarget as HTMLElement).getBoundingClientRect(); - const x = event.clientX; - const y = event.clientY; - - if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) { - this.dragOverFolder = null; - } - } - - onFolderDrop(event: DragEvent, folder: Folder) { - event.preventDefault(); - - if (this.draggedTable) { - // Check if table is already in this specific folder - if (folder.tableIds.includes(this.draggedTable.table)) { - // Table already exists in this folder, do nothing (no notification) - return; - } else { - // Simply add table to the target folder (don't remove from other folders) - folder.tableIds.push(this.draggedTable.table); - // Remove empty flag when adding tables via drag and drop - if (folder.isEmpty) { - folder.isEmpty = false; - } - console.log('onFolderDrop'); - this.saveFolders(); - } - } - - this.draggedTable = null; - this.dragOverFolder = null; - } + @Input() connectionID: string; + @Input() connectionTitle: string; + @Input() tables: TableProperties[]; + @Input() selectedTable: string; + @Input() collapsed: boolean; + @Input() uiSettings: any; + @Input() accessLevel: AccessLevel; + + @Output() expandSidebar = new EventEmitter(); + + public tableCategories: TableCategory[] = []; + public substringToSearch: string; + public foundTables: TableProperties[]; + public folders: Folder[] = []; + + // Dialog state + public currentFolder: Folder | null = null; + + // Drag and drop state + public draggedTable: TableProperties | null = null; + public dragOverFolder: string | null = null; + + // Collapsed state + public showCollapsedTableList: boolean = false; + public currentCollapsedFolder: Folder | null = null; + + // State preservation + private preservedFolderStates: { [key: string]: boolean } = {}; + private preservedActiveFolder: string | null = null; + + // Folder icon colors + public folderIconColors = [ + { name: 'Default', value: '#2563EB' }, + { name: 'Blue', value: '#2196F3' }, + { name: 'Green', value: '#4CAF50' }, + { name: 'Orange', value: '#FF9800' }, + { name: 'Red', value: '#F44336' }, + { name: 'Purple', value: '#9C27B0' }, + { name: 'Teal', value: '#009688' }, + { name: 'Pink', value: '#E91E63' }, + ]; + + constructor( + private _tableState: TableStateService, + _tablesService: TablesService, + private _connectionsService: ConnectionsService, + private _uiSettingsService: UiSettingsService, + private dialog: MatDialog, + ) {} + + ngOnInit() { + this.foundTables = this.tables; + this.loadFolders(); + console.log('ngOnInit - showCollapsedTableList initialized to:', this.showCollapsedTableList); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes.collapsed) { + if (changes.collapsed.currentValue === true) { + // Sidebar is being collapsed - preserve current state + this.preserveFolderStates(); + } else if (changes.collapsed.currentValue === false) { + // Sidebar is being expanded - restore preserved state + this.restoreFolderStates(); + } + } + } + + searchSubstring() { + if (!this.substringToSearch || this.substringToSearch.trim() === '') { + this.foundTables = this.tables; + // Collapse all folders when search is cleared + this.folders.forEach((folder) => { + folder.expanded = false; + }); + return; + } + + const searchTerm = this.substringToSearch.toLowerCase(); + + // Get all tables that match the search (including those in folders) + const allTables = [...this.tables]; + + // Add tables from folders that might not be in the main tables list + this.folders.forEach((folder) => { + folder.tableIds.forEach((tableId) => { + // Find the table object by ID + const tableInFolder = this.tables.find((t) => t.table === tableId); + if (tableInFolder && !allTables.find((t) => t.table === tableId)) { + allTables.push(tableInFolder); + } + }); + }); + + // Filter all tables by search term + this.foundTables = allTables.filter( + (tableItem) => + tableItem.table.toLowerCase().includes(searchTerm) || + tableItem.display_name?.toLowerCase().includes(searchTerm) || + tableItem.normalizedTableName?.toLowerCase().includes(searchTerm), + ); + + // Remove duplicates + this.foundTables = this.foundTables.filter( + (table, index, self) => index === self.findIndex((t) => t.table === table.table), + ); + + // Expand all folders that contain matching tables + this.folders.forEach((folder) => { + const folderTables = this.getFolderTables(folder); + const hasMatchingTables = folderTables.some((table) => + this.foundTables.some((foundTable) => foundTable.table === table.table), + ); + + if (hasMatchingTables) { + folder.expanded = true; + } else { + folder.expanded = false; + } + }); + } + + getTableName(table: TableProperties) { + return table.display_name || table.normalizedTableName || table.table; + } + + // saveCollapsedMenuState() { + // const state = { + // showCollapsedTableList: this.showCollapsedTableList, + // currentCollapsedFolderId: this.currentCollapsedFolder?.id || null + // }; + // const key = `collapsedMenuState_${this.connectionID}`; + // localStorage.setItem(key, JSON.stringify(state)); + // console.log('Collapsed menu state saved:', state); + // } + + // loadAndSetExpandedFolders() { + + // } + + getTableNameLength(tableName: string) { + return tableName.length; + } + + closeSidebar() { + this._tableState.clearSelection(); + this._tableState.closeAIpanel(); + } + + onAddFolder() { + const newFolder: Folder = { + id: this.generateFolderId(), + name: `Folder ${this.folders.length}`, + expanded: true, // Разворачиваем папку сразу после создания + tableIds: [], + isEmpty: true, // Mark as empty for special styling + }; + this.folders.push(newFolder); + console.log('onAddFolder'); + this.saveFolders(); + } + + toggleFolder(folderId: string) { + const folder = this.folders.find((f) => f.id === folderId); + if (folder) { + folder.expanded = !folder.expanded; + const expandedFolders = this.folders.filter((f) => f.expanded).map((f) => f.id); + this._uiSettingsService.updateConnectionSetting(this.connectionID, 'tableFoldersExpanded', expandedFolders); + } + } + + onCollapsedFolderClick(folder: Folder) { + console.log('Clicked on folder:', folder.name); + + // If clicking on the same folder that's already open, close it + if (this.currentCollapsedFolder?.id === folder.id) { + this.showCollapsedTableList = false; + this.currentCollapsedFolder = null; + } else { + // If clicking on a different folder, open it immediately + this.showCollapsedTableList = true; + this.currentCollapsedFolder = folder; + } + + // Save the collapsed menu state + // this.saveCollapsedMenuState(); + + console.log('showCollapsedTableList is now:', this.showCollapsedTableList); + console.log('currentCollapsedFolder is now:', this.currentCollapsedFolder?.name); + } + + getCollapsedTableList(): TableProperties[] { + if (!this.currentCollapsedFolder) { + console.log('No current collapsed folder'); + return []; + } + + const tables = this.getFolderTables(this.currentCollapsedFolder); + console.log('getCollapsedTableList - tables:', tables); + return tables; + } + + navigateToTable(_table: TableProperties) { + // This method is called when clicking on a table in collapsed mode + // The actual navigation is handled by routerLink in the template + // We just need to close the sidebar after navigation + this.closeSidebar(); + } + + toggleCollapsedSearch() { + // Open the sidebar and activate search + this.expandSidebar.emit(); + // Focus on search input after sidebar expands + setTimeout(() => { + const input = document.querySelector('.search-input input') as HTMLInputElement; + if (input) { + input.focus(); + input.select(); + } + }, 300); // Wait for sidebar animation to complete + } + + deleteFolder(folder: Folder) { + const dialogData: DbFolderDeleteDialogData = { + folderName: folder.name, + tableCount: folder.tableIds.length, + }; + + const dialogRef = this.dialog.open(DbFolderDeleteDialogComponent, { + width: '24em', + data: dialogData, + panelClass: 'db-folder-delete-dialog', + }); + + dialogRef.afterClosed().subscribe((confirmed: boolean) => { + if (confirmed) { + const index = this.folders.findIndex((f) => f.id === folder.id); + if (index > -1) { + this.folders.splice(index, 1); + this.saveFolders(); + } + } + }); + } + + getFolderTables(folder: Folder): TableProperties[] { + const folderTables = this.tables.filter((table) => folder.tableIds.includes(table.table)); + + // If there's a search term, filter the collection tables too + if (this.substringToSearch && this.substringToSearch.trim() !== '') { + const searchTerm = this.substringToSearch.toLowerCase(); + return folderTables.filter( + (table) => + table.table.toLowerCase().includes(searchTerm) || + table.display_name?.toLowerCase().includes(searchTerm) || + table.normalizedTableName?.toLowerCase().includes(searchTerm), + ); + } + + return folderTables; + } + + getAvailableTables(folder: Folder | null): TableProperties[] { + if (!folder) return []; + return this.tables.filter((table) => !folder.tableIds.includes(table.table)); + } + + isTableInAnyFolder(table: TableProperties): boolean { + return this.folders.some((folder) => folder.tableIds.includes(table.table)); + } + + shouldShowFolder(folder: Folder): boolean { + // If no search term, show all folders + if (!this.substringToSearch || this.substringToSearch.trim() === '') { + return true; + } + + // Show collection if it has tables matching the search + const matchingTables = this.getFolderTables(folder); + return matchingTables.length > 0; + } + + showEditTablesDialog(folder: Folder) { + // Expand the folder if it's collapsed + folder.expanded = true; + + const dialogData: DbFolderEditDialogData = { + folder: folder, + tables: this.tables, + folderIconColors: this.folderIconColors, + }; + + const dialogRef = this.dialog.open(DbFolderEditDialogComponent, { + width: '32em', + data: dialogData, + panelClass: 'db-folder-edit-dialog', + }); + + dialogRef.afterClosed().subscribe((result: Folder | undefined) => { + if (result) { + // Update the folder with the result from dialog + const index = this.folders.findIndex((f) => f.id === result.id); + if (index !== -1) { + this.folders[index] = result; + this.saveFolders(); + } + } + }); + } + + getFolderIconColor(folder: Folder, isActive?: boolean): string { + if (isActive) { + return '#2563EB'; // Primary blue for active folders + } + + // Check if we're in dark theme + if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) { + return folder.iconColor || '#2563EB'; + } + + // In light theme, use default color + return folder.iconColor || '#2563EB'; + } + + get allTables(): TableProperties[] { + return this.tables; + } + + isTableInFolder(table: TableProperties): boolean { + return this.currentFolder ? this.currentFolder.tableIds.includes(table.table) : false; + } + + isTableInCurrentDraggedFolder(table: TableProperties, folder: Folder): boolean { + return this.draggedTable && this.draggedTable.table === table.table && folder.tableIds.includes(table.table); + } + + toggleTableInFolder(table: TableProperties) { + if (!this.currentFolder) return; + + const tableId = table.table; + const isInFolder = this.currentFolder.tableIds.includes(tableId); + + if (isInFolder) { + // Remove from folder + this.currentFolder.tableIds = this.currentFolder.tableIds.filter((id) => id !== tableId); + } else { + // Add to folder + this.currentFolder.tableIds.push(tableId); + // Remove empty flag when adding tables + if (this.currentFolder.isEmpty) { + this.currentFolder.isEmpty = false; + } + } + + console.log('toggleTableInFolder'); + this.saveFolders(); + } + + removeTableFromFolder(folder: Folder, table: TableProperties, event: Event) { + event.stopPropagation(); + folder.tableIds = folder.tableIds.filter((id) => id !== table.table); + console.log('removeTableFromFolder'); + this.saveFolders(); + } + + trackByFolderId(_index: number, folder: Folder): string { + return folder.id; + } + + hasCustomFolders(): boolean { + // Check if there are folders other than "All Tables" + return this.folders.some((folder) => folder.name !== 'All Tables'); + } + + private preserveFolderStates() { + // Save expanded states of all folders + this.folders.forEach((folder) => { + this.preservedFolderStates[folder.id] = folder.expanded; + }); + + // Check if there are only "All Tables" folder (no custom folders) + const hasCustomFolders = this.folders.some((folder) => folder.name !== 'All Tables'); + + // If no custom folders exist, ensure "All Tables" is always expanded + if (!hasCustomFolders) { + const allTablesFolder = this.folders.find((folder) => folder.name === 'All Tables'); + if (allTablesFolder) { + this.preservedFolderStates[allTablesFolder.id] = true; + this.preservedActiveFolder = allTablesFolder.id; + } + } else { + // Find and save the currently active folder (the one that contains selected table) + const activeFolder = this.findActiveFolder(); + this.preservedActiveFolder = activeFolder ? activeFolder.id : null; + } + + console.log('Preserved folder states:', this.preservedFolderStates); + console.log('Preserved active folder:', this.preservedActiveFolder); + console.log( + 'Expanded folders count:', + Object.values(this.preservedFolderStates).filter((expanded) => expanded).length, + ); + } + + private restoreFolderStates() { + // Check if there are only "All Tables" folder (no custom folders) + const hasCustomFolders = this.folders.some((folder) => folder.name !== 'All Tables'); + + // If no custom folders exist, always expand "All Tables" + if (!hasCustomFolders) { + const allTablesFolder = this.folders.find((folder) => folder.name === 'All Tables'); + if (allTablesFolder) { + allTablesFolder.expanded = true; + this.currentCollapsedFolder = allTablesFolder; + this.showCollapsedTableList = true; + console.log('No custom folders - keeping All Tables expanded'); + // Save the collapsed menu state after restoration + // this.saveCollapsedMenuState(); + return; + } + } + + // Restore expanded states of all folders + this.folders.forEach((folder) => { + if (Object.hasOwn(this.preservedFolderStates, folder.id)) { + folder.expanded = this.preservedFolderStates[folder.id]; + } + }); + + // In collapsed view, show the table list if any folder was expanded + const hasExpandedFolders = Object.values(this.preservedFolderStates).some((expanded) => expanded); + if (hasExpandedFolders) { + // If there was an active folder, use it; otherwise use the first expanded folder + let targetFolder = null; + + if (this.preservedActiveFolder) { + targetFolder = this.folders.find((f) => f.id === this.preservedActiveFolder); + } + + if (!targetFolder) { + // Find the first expanded folder + targetFolder = this.folders.find((f) => this.preservedFolderStates[f.id]); + } + + if (targetFolder) { + this.currentCollapsedFolder = targetFolder; + this.showCollapsedTableList = true; + } + } + + console.log('Restored folder states:', this.preservedFolderStates); + console.log('Restored active folder:', this.preservedActiveFolder); + console.log('Has expanded folders:', hasExpandedFolders); + + // Save the collapsed menu state after restoration + // this.saveCollapsedMenuState(); + } + + private findActiveFolder(): Folder | null { + if (!this.selectedTable) return null; + + return this.folders.find((folder) => folder.tableIds.includes(this.selectedTable)) || null; + } + + private generateFolderId(): string { + return Date.now().toString(); + } + + private loadFolders() { + this._connectionsService.getTablesFolders(this.connectionID).subscribe({ + next: (categories: TableCategory[]) => { + if (categories && categories.length > 0) { + this.tableCategories = categories; + this.folders = categories.map((cat) => ({ + id: cat.category_id, + name: cat.category_name, + expanded: false, + tableIds: cat.tables, + iconColor: cat.category_color, + })); + console.log( + 'Folders loaded from connection settings:', + this.folders.map((c) => ({ name: c.name, expanded: c.expanded })), + ); + } else { + console.log('No folders found in connection settings.'); + this.folders = []; + } + + const expandedFolders = this.uiSettings?.tableFoldersExpanded || ['0']; + if (expandedFolders && expandedFolders.length > 0) { + this.folders.forEach((folder) => { + folder.expanded = expandedFolders.includes(folder.id); + }); + } + + const allTablesFolder: Folder = { + id: '0', + name: 'All Tables', + expanded: expandedFolders && expandedFolders.length === 0 ? false : expandedFolders.includes('0'), + tableIds: this.tables.map((table) => table.table), + }; + this.folders.unshift(allTablesFolder); + }, + error: (error) => { + console.error('Error fetching folders from connection settings:', error); + this.folders = []; + }, + }); + } + + private saveFolders() { + try { + this.tableCategories = this.folders + .filter((folder) => folder.name !== 'All Tables') // Exclude "All Tables" from saving + .map((folder) => ({ + category_id: folder.id, + category_name: folder.name, + category_color: folder.iconColor, + tables: folder.tableIds, + })); + this._connectionsService.updateTablesFolders(this.connectionID, this.tableCategories).subscribe({ + next: () => { + console.log('Connection settings updated with folders.'); + }, + error: (error) => { + console.error('Error updating connection settings with folders:', error); + }, + }); + } catch (e) { + console.error('Error saving folders:', e); + } + } + + // Drag and drop methods + onTableDragStart(event: DragEvent, table: TableProperties) { + this.draggedTable = table; + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/plain', table.table); + } + } + + onTableDragEnd(_event: DragEvent) { + this.draggedTable = null; + this.dragOverFolder = null; + } + + onFolderDragOver(event: DragEvent, folderId: string) { + event.preventDefault(); + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'move'; + } + this.dragOverFolder = folderId; + } + + onFolderDragLeave(event: DragEvent, _folderId: string) { + // Only clear if we're actually leaving the collection (not moving to a child element) + const rect = (event.currentTarget as HTMLElement).getBoundingClientRect(); + const x = event.clientX; + const y = event.clientY; + + if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) { + this.dragOverFolder = null; + } + } + + onFolderDrop(event: DragEvent, folder: Folder) { + event.preventDefault(); + + if (this.draggedTable) { + // Check if table is already in this specific folder + if (folder.tableIds.includes(this.draggedTable.table)) { + // Table already exists in this folder, do nothing (no notification) + return; + } else { + // Simply add table to the target folder (don't remove from other folders) + folder.tableIds.push(this.draggedTable.table); + // Remove empty flag when adding tables via drag and drop + if (folder.isEmpty) { + folder.isEmpty = false; + } + console.log('onFolderDrop'); + this.saveFolders(); + } + } + + this.draggedTable = null; + this.dragOverFolder = null; + } } diff --git a/frontend/src/app/components/feature-notification/feature-notification.component.css b/frontend/src/app/components/feature-notification/feature-notification.component.css index eea3f9919..893a99373 100644 --- a/frontend/src/app/components/feature-notification/feature-notification.component.css +++ b/frontend/src/app/components/feature-notification/feature-notification.component.css @@ -1,49 +1,49 @@ .feature-notification { - position: fixed; - bottom: 32px; - left: 32px; - z-index: 1000; - display: flex; - flex-direction: column; - padding: 16px; - border-radius: 8px; - background-color: #fff; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - width: clamp(200px, 25vw, 400px); + position: fixed; + bottom: 32px; + left: 32px; + z-index: 1000; + display: flex; + flex-direction: column; + padding: 16px; + border-radius: 8px; + background-color: #fff; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: clamp(200px, 25vw, 400px); } @media (prefers-color-scheme: dark) { - .feature-notification { - background-color: #202020; - } + .feature-notification { + background-color: var(--ra-surface); + } } .feature-notification__image { - border-radius: 8px; - height: auto; - margin-bottom: 16px; - width: 100%; + border-radius: 8px; + height: auto; + margin-bottom: 16px; + width: 100%; } .feature-notification__title { - font-size: 20px !important; - font-weight: 600 !important; - line-height: 1.15em !important; + font-size: 20px !important; + font-weight: 600 !important; + line-height: 1.15em !important; } .feature-notification__description { - color: rgba(0,0,0,0.64); + color: rgba(0, 0, 0, 0.64); } @media (prefers-color-scheme: dark) { - .feature-notification__description { - color: rgba(255,255,255,0.64); - } + .feature-notification__description { + color: rgba(255, 255, 255, 0.64); + } } .actions { - display: flex; - justify-content: flex-end; - gap: 8px; - margin-top: 16px; -} \ No newline at end of file + display: flex; + justify-content: flex-end; + gap: 8px; + margin-top: 16px; +} diff --git a/frontend/src/app/components/login/login.component.css b/frontend/src/app/components/login/login.component.css index 4a5c61f92..a572d864e 100644 --- a/frontend/src/app/components/login/login.component.css +++ b/frontend/src/app/components/login/login.component.css @@ -87,7 +87,7 @@ } .loginTitle__emphasis { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } @media (width <= 600px) { @@ -246,7 +246,7 @@ .login-form__link { grid-column: 1 / span 3; grid-row: 6; - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); margin-top: 48px; text-decoration: none; } @@ -262,7 +262,7 @@ grid-row: 2 / span 3; align-self: center; position: relative; - background-color: #e8e8e8; + background-color: var(--ra-divider); margin: 36px 0; height: 100%; width: 1px; @@ -338,12 +338,7 @@ @media (prefers-color-scheme: dark) { .login-form__field-loader::after { - background-image: linear-gradient( - 90deg, - transparent 40%, - var(--mat-sidenav-content-background-color, #303030), - transparent 60% - ); + background-image: linear-gradient(90deg, transparent 40%, var(--ra-skeleton-shimmer), transparent 60%); } } diff --git a/frontend/src/app/components/password-request/password-request.component.css b/frontend/src/app/components/password-request/password-request.component.css index 9b5316a7a..44c5daff0 100644 --- a/frontend/src/app/components/password-request/password-request.component.css +++ b/frontend/src/app/components/password-request/password-request.component.css @@ -1,84 +1,79 @@ .wrapper { - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - margin: 0 auto; - padding: 16px; - max-width: 420px; - min-width: 300px; - width: 90%; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + margin: 0 auto; + padding: 16px; + max-width: 420px; + min-width: 300px; + width: 90%; } @media (width <= 600px) { - .wrapper { - padding: 16px 9vw; - width: 100%; - } + .wrapper { + padding: 16px 9vw; + width: 100%; + } } .password-form { - display: flex; - flex-direction: column; - justify-content: center; - margin-top: -16px; + display: flex; + flex-direction: column; + justify-content: center; + margin-top: -16px; } .request-text { - margin-bottom: 20px; + margin-bottom: 20px; } .email-field { - margin-top: 8px; + margin-top: 8px; } .change-password-button { - margin-top: 20px; + margin-top: 20px; } .password-form__field-loader { - position: relative; - background-color: rgba(0, 0, 0, 0.06); - margin-bottom: 16px; - overflow: hidden; - height: 44px; - width: 100%; + position: relative; + background-color: rgba(0, 0, 0, 0.06); + margin-bottom: 16px; + overflow: hidden; + height: 44px; + width: 100%; } .password-form__field-loader::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - background-image: linear-gradient( - 90deg, - transparent 40%, - var(--mat-sidenav-content-background-color, #fff), - transparent 60% - ); - animation: shimmer 800ms ease-in-out infinite alternate; + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + background-image: linear-gradient( + 90deg, + transparent 40%, + var(--mat-sidenav-content-background-color, #fff), + transparent 60% + ); + animation: shimmer 800ms ease-in-out infinite alternate; } @media (prefers-color-scheme: dark) { - .password-form__field-loader::after { - background-image: linear-gradient( - 90deg, - transparent 40%, - var(--mat-sidenav-content-background-color, #303030), - transparent 60% - ); - } + .password-form__field-loader::after { + background-image: linear-gradient(90deg, transparent 40%, var(--ra-skeleton-shimmer), transparent 60%); + } } @keyframes shimmer { - 100% { - transform: translateX(100%); - } + 100% { + transform: translateX(100%); + } } .password-form__reset-button { - margin-top: 8px; -} \ No newline at end of file + margin-top: 8px; +} diff --git a/frontend/src/app/components/registration/registration.component.css b/frontend/src/app/components/registration/registration.component.css index 1079fb769..0b34c8156 100644 --- a/frontend/src/app/components/registration/registration.component.css +++ b/frontend/src/app/components/registration/registration.component.css @@ -35,7 +35,7 @@ } .registrationTitle__emphasis { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } .register-form-box { @@ -85,7 +85,7 @@ .divider { position: relative; - background-color: #e8e8e8; + background-color: var(--ra-divider); height: 1px; margin: 24px 0; width: 100%; @@ -162,7 +162,7 @@ } .link { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } .register-form__github-button { diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css index bd4b5d068..bcde5ce02 100644 --- a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css +++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css @@ -1,176 +1,145 @@ h2[mat-dialog-title] { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .title-icon { - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .title-icon { - color: rgba(255, 255, 255, 0.7); - } + color: var(--ra-text-muted); } mat-dialog-content { - min-width: 600px; - max-height: 60vh; + min-width: 600px; + max-height: 60vh; } @media (width <= 800px) { - mat-dialog-content { - min-width: auto; - } + mat-dialog-content { + min-width: auto; + } } .loading-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 40px; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px; + text-align: center; } .loading-container p { - margin-top: 16px; - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .loading-container p { - color: rgba(255, 255, 255, 0.54); - } + margin-top: 16px; + color: var(--ra-text-muted); } .empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 48px 24px; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 48px 24px; + text-align: center; } .empty-icon { - font-size: 48px; - width: 48px; - height: 48px; - color: rgba(0, 0, 0, 0.26); - margin-bottom: 16px; -} - -@media (prefers-color-scheme: dark) { - .empty-icon { - color: rgba(255, 255, 255, 0.3); - } + font-size: 48px; + width: 48px; + height: 48px; + color: var(--ra-text-muted); + margin-bottom: 16px; } .empty-state h3 { - margin: 0 0 8px 0; + margin: 0 0 8px 0; } .empty-state p { - margin: 0; - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .empty-state p { - color: rgba(255, 255, 255, 0.54); - } + margin: 0; + color: var(--ra-text-muted); } .audit-log-table { - width: 100%; + width: 100%; } .action-cell { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .action-cell mat-icon { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 18px; + width: 18px; + height: 18px; } .action-create { - color: #2e7d32; + color: #16a34a; } @media (prefers-color-scheme: dark) { - .action-create { - color: #81c784; - } + .action-create { + color: #4ade80; + } } .action-view, .action-copy { - color: #1976d2; -} - -@media (prefers-color-scheme: dark) { - .action-view, - .action-copy { - color: #64b5f6; - } + color: var(--color-primaryPalette-500); } .action-update { - color: #ef6c00; + color: #d97706; } @media (prefers-color-scheme: dark) { - .action-update { - color: #ffb74d; - } + .action-update { + color: #fbbf24; + } } .action-delete { - color: #c62828; + color: #dc2626; } @media (prefers-color-scheme: dark) { - .action-delete { - color: #ef5350; - } + .action-delete { + color: #f87171; + } } .user-email { - font-size: 14px; + font-size: 14px; } .success-icon { - color: #2e7d32; + color: #16a34a; } @media (prefers-color-scheme: dark) { - .success-icon { - color: #81c784; - } + .success-icon { + color: #4ade80; + } } .failure-icon { - color: #c62828; + color: #dc2626; } @media (prefers-color-scheme: dark) { - .failure-icon { - color: #ef5350; - } + .failure-icon { + color: #f87171; + } } .failed-row { - background-color: rgba(198, 40, 40, 0.05); + background-color: rgba(220, 38, 38, 0.05); } @media (prefers-color-scheme: dark) { - .failed-row { - background-color: rgba(239, 83, 80, 0.1); - } + .failed-row { + background-color: rgba(248, 113, 113, 0.1); + } } diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css index 88501b0c3..632343a80 100644 --- a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css +++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css @@ -1,46 +1,40 @@ .warning-container { - display: flex; - gap: 16px; - padding: 16px; - background-color: #fff3e0; - border-radius: 8px; + display: flex; + gap: 16px; + padding: 16px; + background-color: rgba(245, 158, 11, 0.08); + border-radius: 8px; } @media (prefers-color-scheme: dark) { - .warning-container { - background-color: rgba(255, 152, 0, 0.15); - } + .warning-container { + background-color: rgba(245, 158, 11, 0.12); + } } .warning-icon { - font-size: 32px; - width: 32px; - height: 32px; - color: #ef6c00; - flex-shrink: 0; + font-size: 32px; + width: 32px; + height: 32px; + color: #d97706; + flex-shrink: 0; } @media (prefers-color-scheme: dark) { - .warning-icon { - color: #ffb74d; - } + .warning-icon { + color: #fbbf24; + } } .warning-content p { - margin: 0; + margin: 0; } .warning-content p:first-child { - margin-bottom: 8px; + margin-bottom: 8px; } .warning-details { - font-size: 14px; - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .warning-details { - color: rgba(255, 255, 255, 0.54); - } + font-size: 14px; + color: var(--ra-text-muted); } diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css index 8471b4629..3e3886318 100644 --- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css +++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css @@ -1,60 +1,59 @@ mat-dialog-content { - min-width: 400px; - min-height: 200px; + min-width: 400px; + min-height: 200px; } @media (width <= 600px) { - mat-dialog-content { - min-width: auto; - } + mat-dialog-content { + min-width: auto; + } } .full-width { - width: 100%; - margin-bottom: 16px; + width: 100%; + margin-bottom: 16px; } .info-note { - display: flex; - align-items: flex-start; - gap: 8px; - padding: 12px 16px; - background-color: rgba(25, 118, 210, 0.08); - border-radius: 8px; - color: #1565c0; - font-size: 14px; - margin-bottom: 20px; + display: flex; + align-items: flex-start; + gap: 8px; + padding: 12px 16px; + background-color: rgba(37, 99, 235, 0.08); + border-radius: 8px; + color: var(--color-primaryPalette-500); + font-size: 14px; + margin-bottom: 20px; } .info-note mat-icon { - font-size: 20px; - width: 20px; - height: 20px; - flex-shrink: 0; + font-size: 20px; + width: 20px; + height: 20px; + flex-shrink: 0; } @media (prefers-color-scheme: dark) { - .info-note { - background-color: rgba(100, 181, 246, 0.15); - color: #64b5f6; - } + .info-note { + background-color: rgba(37, 99, 235, 0.12); + } } .expiration-section { - margin-bottom: 16px; + margin-bottom: 16px; } .master-password-section { - margin-top: 16px; + margin-top: 16px; } .master-password-error { - color: #f44336; - font-size: 12px; - margin-top: -12px; - margin-bottom: 8px; + color: var(--color-warnPalette-500); + font-size: 12px; + margin-top: -12px; + margin-bottom: 8px; } .secret-masked { - -webkit-text-security: disc; + -webkit-text-security: disc; } diff --git a/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css index ee5f25435..37e056507 100644 --- a/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css +++ b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css @@ -1,40 +1,28 @@ h2[mat-dialog-title] { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .title-icon { - color: #1976d2; -} - -@media (prefers-color-scheme: dark) { - .title-icon { - color: #64b5f6; - } + color: var(--color-primaryPalette-500); } mat-dialog-content { - min-width: 350px; + min-width: 350px; } @media (width <= 600px) { - mat-dialog-content { - min-width: auto; - } + mat-dialog-content { + min-width: auto; + } } .description { - color: rgba(0, 0, 0, 0.54); - margin: 0 0 24px 0; -} - -@media (prefers-color-scheme: dark) { - .description { - color: rgba(255, 255, 255, 0.54); - } + color: var(--ra-text-muted); + margin: 0 0 24px 0; } .full-width { - width: 100%; + width: 100%; } diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css index c62246a46..5fef0cbf9 100644 --- a/frontend/src/app/components/secrets/secrets.component.css +++ b/frontend/src/app/components/secrets/secrets.component.css @@ -1,257 +1,209 @@ .secrets-page { - margin: 3em auto; - padding: 0 clamp(200px, 20vw, 300px); + margin: 3em auto; + padding: 0 clamp(200px, 20vw, 300px); } @media (width <= 600px) { - .secrets-page { - padding: 0 9vw; - } + .secrets-page { + padding: 0 9vw; + } } .secrets-header { - margin-bottom: 32px; + margin-bottom: 32px; } .secrets-description { - color: rgba(0, 0, 0, 0.64); - margin-top: 8px; -} - -@media (prefers-color-scheme: dark) { - .secrets-description { - color: rgba(255, 255, 255, 0.7); - } + color: var(--ra-text-muted); + margin-top: 8px; } .secrets-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - margin-bottom: 24px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-bottom: 24px; } @media (width <= 600px) { - .secrets-toolbar { - flex-direction: column; - align-items: stretch; - } + .secrets-toolbar { + flex-direction: column; + align-items: stretch; + } } .search-field { - flex: 1; - max-width: 400px; + flex: 1; + max-width: 400px; } @media (width <= 600px) { - .search-field { - max-width: 100%; - } + .search-field { + max-width: 100%; + } } .secrets-table { - width: 100%; - margin-bottom: 16px; + width: 100%; + margin-bottom: 16px; } .secrets-cell_slug { - max-width: 250px; + max-width: 250px; } .slug-text { - font-weight: 500; + font-weight: 500; } .secrets-cell_actions { - text-align: right; + text-align: right; } .encryption-icon { - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .encryption-icon { - color: rgba(255, 255, 255, 0.7); - } + color: var(--ra-text-muted); } .encryption-icon_master { - color: #1976d2; -} - -@media (prefers-color-scheme: dark) { - .encryption-icon_master { - color: #64b5f6; - } + color: var(--color-primaryPalette-500); } .no-expiry { - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .no-expiry { - color: rgba(255, 255, 255, 0.5); - } + color: var(--ra-text-muted); } .expired-badge { - display: inline-flex; - align-items: center; - gap: 4px; - color: #c62828; - font-weight: 500; + display: inline-flex; + align-items: center; + gap: 4px; + color: #dc2626; + font-weight: 500; } .expired-badge mat-icon { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 18px; + width: 18px; + height: 18px; } @media (prefers-color-scheme: dark) { - .expired-badge { - color: #ef5350; - } + .expired-badge { + color: #f87171; + } } .expiring-soon-badge { - display: inline-flex; - align-items: center; - gap: 4px; - color: #ef6c00; - font-weight: 500; + display: inline-flex; + align-items: center; + gap: 4px; + color: #d97706; + font-weight: 500; } .expiring-soon-badge mat-icon { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 18px; + width: 18px; + height: 18px; } @media (prefers-color-scheme: dark) { - .expiring-soon-badge { - color: #ffb74d; - } + .expiring-soon-badge { + color: #fbbf24; + } } .no-secrets { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 64px 24px; - text-align: center; - background-color: rgba(0, 0, 0, 0.02); - border-radius: 8px; -} - -@media (prefers-color-scheme: dark) { - .no-secrets { - background-color: rgba(255, 255, 255, 0.05); - } + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 64px 24px; + text-align: center; + background-color: var(--ra-surface); + border-radius: 8px; } .no-secrets-icon { - font-size: 64px; - width: 64px; - height: 64px; - color: rgba(0, 0, 0, 0.26); - margin-bottom: 16px; -} - -@media (prefers-color-scheme: dark) { - .no-secrets-icon { - color: rgba(255, 255, 255, 0.3); - } + font-size: 64px; + width: 64px; + height: 64px; + color: var(--ra-text-muted); + margin-bottom: 16px; } .no-secrets h3 { - margin: 0 0 8px 0; - color: rgba(0, 0, 0, 0.87); -} - -@media (prefers-color-scheme: dark) { - .no-secrets h3 { - color: rgba(255, 255, 255, 0.87); - } + margin: 0 0 8px 0; + color: var(--ra-text); } .no-secrets p { - margin: 0 0 16px 0; - color: rgba(0, 0, 0, 0.54); -} - -@media (prefers-color-scheme: dark) { - .no-secrets p { - color: rgba(255, 255, 255, 0.54); - } + margin: 0 0 16px 0; + color: var(--ra-text-muted); } .delete-action { - color: #c62828; + color: #dc2626; } @media (prefers-color-scheme: dark) { - .delete-action { - color: #ef5350; - } + .delete-action { + color: #f87171; + } } /* Responsive table styles */ @media (width <= 600px) { - .secrets-table { - display: grid; - grid-template-columns: auto 1fr; - max-width: 100%; - } - - .secrets-table-heading { - display: none; - } - - .secrets-table ::ng-deep tbody { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / 3; - } - - .secrets-row { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / 3; - grid-gap: 12px 28px; - border-bottom-color: var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12)); - border-bottom-width: var(--mat-table-row-item-outline-width, 1px); - border-bottom-style: solid; - height: auto; - padding: 20px 0; - } - - .secrets-cell { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / 3; - border-bottom: none; - } - - .secrets-cell::before { - content: attr(data-label); - display: inline-block; - font-weight: bold; - white-space: nowrap; - } - - .secrets-cell_actions { - grid-column: 1 / span 3; - display: flex; - justify-content: flex-end; - border-bottom: none; - } - - .secrets-cell_actions::before { - display: none; - } + .secrets-table { + display: grid; + grid-template-columns: auto 1fr; + max-width: 100%; + } + + .secrets-table-heading { + display: none; + } + + .secrets-table ::ng-deep tbody { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / 3; + } + + .secrets-row { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / 3; + grid-gap: 12px 28px; + border-bottom-color: var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12)); + border-bottom-width: var(--mat-table-row-item-outline-width, 1px); + border-bottom-style: solid; + height: auto; + padding: 20px 0; + } + + .secrets-cell { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / 3; + border-bottom: none; + } + + .secrets-cell::before { + content: attr(data-label); + display: inline-block; + font-weight: bold; + white-space: nowrap; + } + + .secrets-cell_actions { + grid-column: 1 / span 3; + display: flex; + justify-content: flex-end; + border-bottom: none; + } + + .secrets-cell_actions::before { + display: none; + } } diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css index 450b916d6..5234502b6 100644 --- a/frontend/src/app/components/ui-components/alert/alert.component.css +++ b/frontend/src/app/components/ui-components/alert/alert.component.css @@ -1,121 +1,120 @@ :host { - position: sticky; - top: var(--mat-toolbar-standard-height); - z-index: 2; + position: sticky; + top: var(--mat-toolbar-standard-height); + z-index: 2; } .alert { - display: flex; - gap: 12px; - background-color: var(--bg-color); - border-left: 12px solid var(--alert-theme-color); - margin-bottom: 8px; - padding: 12px 16px; + display: flex; + gap: 12px; + background-color: var(--bg-color); + border-left: 12px solid var(--alert-theme-color); + margin-bottom: 8px; + padding: 12px 16px; } @media (prefers-color-scheme: dark) { - .alert { - --bg-color: var(--alert-dark-theme-bg); - border-top: 1px solid var(--alert-dark-theme-color); - border-right: 1px solid var(--alert-dark-theme-color); - border-bottom: 1px solid var(--alert-dark-theme-color); - border-left: 12px solid var(--alert-dark-theme-color); - } + .alert { + --bg-color: var(--alert-dark-theme-bg); + border-top: 1px solid var(--alert-dark-theme-color); + border-right: 1px solid var(--alert-dark-theme-color); + border-bottom: 1px solid var(--alert-dark-theme-color); + border-left: 12px solid var(--alert-dark-theme-color); + } } @media (prefers-color-scheme: light) { - .alert { - --bg-color: #F4F4F4; - } + .alert { + --bg-color: var(--ra-surface); + } } @media (width <= 600px) { - .alert { - display: grid; - grid-template-columns: auto 1fr; - } + .alert { + display: grid; + grid-template-columns: auto 1fr; + } } .alert_error { - --alert-theme-color: #B71C1C; - --alert-dark-theme-color: #E53935; - --alert-dark-theme-bg: rgba(229, 57, 53, 0.15); - z-index: 2; + --alert-theme-color: #dc2626; + --alert-dark-theme-color: #f87171; + --alert-dark-theme-bg: rgba(220, 38, 38, 0.15); + z-index: 2; } .alert_warning { - --alert-theme-color: #FF6F00; - --alert-dark-theme-color: #FF6F00; - --alert-dark-theme-bg: rgba(255, 236, 179, 0.15); + --alert-theme-color: #d97706; + --alert-dark-theme-color: #fbbf24; + --alert-dark-theme-bg: rgba(245, 158, 11, 0.15); } .alert_info { - --alert-theme-color: #01579B; - --alert-dark-theme-color: #00BCD4; - --alert-dark-theme-bg: rgba(0, 188, 212, 0.15); + --alert-theme-color: #01579b; + --alert-dark-theme-color: #00bcd4; + --alert-dark-theme-bg: rgba(0, 188, 212, 0.15); } .alert_success { - --alert-theme-color: #1B5E20; - --alert-dark-theme-color: #4CAF50; - --alert-dark-theme-bg: rgba(76, 175, 80, 0.15); + --alert-theme-color: #1b5e20; + --alert-dark-theme-color: #4caf50; + --alert-dark-theme-bg: rgba(76, 175, 80, 0.15); } .alert__icon { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - background: var(--alert-theme-color); - border-radius: 50%; - color: #fff; - font-size: 18px; - height: 36px; - opacity: 0.9; - width: 36px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background: var(--alert-theme-color); + border-radius: 50%; + color: #fff; + font-size: 18px; + height: 36px; + opacity: 0.9; + width: 36px; } @media (prefers-color-scheme: dark) { - .alert__icon { - background: var(--alert-dark-theme-color); - } + .alert__icon { + background: var(--alert-dark-theme-color); + } } .alert__message { - flex: 1; - display: flex; - justify-content: center; - flex-direction: column; - min-height: 36px; - margin: 0 !important; + flex: 1; + display: flex; + justify-content: center; + flex-direction: column; + min-height: 36px; + margin: 0 !important; } .alert__title { - color: var(--alert-theme-color); - margin-bottom: 8px; + color: var(--alert-theme-color); + margin-bottom: 8px; } @media (prefers-color-scheme: dark) { - .alert__title { - color: inherit; - } + .alert__title { + color: inherit; + } } .alert__text { - margin: 0 !important; + margin: 0 !important; } .actions { - margin-left: auto; + margin-left: auto; } @media (width <= 600px) { - .actions { - grid-column: 1 / -1; - } + .actions { + grid-column: 1 / -1; + } } .mat-flat-button { - color: var(--text-color); + color: var(--text-color); } - diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css index b0a317690..0d672b739 100644 --- a/frontend/src/app/components/ui-components/banner/banner.component.css +++ b/frontend/src/app/components/ui-components/banner/banner.component.css @@ -1,54 +1,46 @@ .banner-wrapper { - display: flex; - align-items: center; - justify-content: center; - background-image: url('../../../../assets/bg/banner.svg'); - background-repeat: no-repeat; - /* background-position: left 125%, right -26%; */ - background-size: cover; - height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-image: url("../../../../assets/bg/banner.svg"); + background-repeat: no-repeat; + /* background-position: left 125%, right -26%; */ + background-size: cover; + height: 100%; } .banner_error { - --alert-theme-color: #B71C1C; + --alert-theme-color: #b71c1c; - z-index: 2; + z-index: 2; } .banner_info { - --alert-theme-color: #01579B; + --alert-theme-color: #01579b; } .banner_success { - --alert-theme-color: #1B5E20; + --alert-theme-color: #1b5e20; } .banner-box { - background-color: var(--bg-color); - border-left: 12px solid var(--alert-theme-color); - border-radius: 4px; - box-shadow: - 0px 1px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); - padding: 24px 20px 24px 28px; - width: clamp(300px, 50vw, 450px); + background-color: var(--bg-color); + border-left: 12px solid var(--alert-theme-color); + border-radius: 4px; + box-shadow: + 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 4px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); + padding: 24px 20px 24px 28px; + width: clamp(300px, 50vw, 450px); } -@media (prefers-color-scheme: dark) { - .banner-box { - --bg-color: #292929; - } -} - -@media (prefers-color-scheme: light) { - .banner-box { - --bg-color: #F4F4F4; - } +.banner-box { + --bg-color: var(--ra-surface); } .banner-box ::ng-deep .error-actions { - display: flex; - justify-content: flex-end; - gap: 20px; - margin-top: 32px; -} \ No newline at end of file + display: flex; + justify-content: flex-end; + gap: 20px; + margin-top: 32px; +} diff --git a/frontend/src/app/components/ui-components/icon-picker/icon-picker.component.css b/frontend/src/app/components/ui-components/icon-picker/icon-picker.component.css index a65c695f4..b1b1f0414 100644 --- a/frontend/src/app/components/ui-components/icon-picker/icon-picker.component.css +++ b/frontend/src/app/components/ui-components/icon-picker/icon-picker.component.css @@ -1,82 +1,81 @@ .anchor-icon-button { - background-color: var(--bg-color); + background-color: var(--bg-color); } @media (prefers-color-scheme: dark) { - .anchor-icon-button { - --bg-color: #292929; - } + .anchor-icon-button { + --bg-color: var(--ra-surface); + } } @media (prefers-color-scheme: light) { - .anchor-icon-button { - --bg-color: var(--color-primaryPalette-100); - } + .anchor-icon-button { + --bg-color: var(--color-primaryPalette-100); + } } .icons-menu { - display: flex; - flex-direction: column; - padding: 0 16px; + display: flex; + flex-direction: column; + padding: 0 16px; } .icons-menu__header { - display: flex; - align-items: center; - justify-content: space-between; - color: var(--mat-sidenav-content-text-color); - margin-top: 8px; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--mat-sidenav-content-text-color); + margin-top: 8px; } .icons-list { - list-style: none; - display: grid; - grid-template-columns: repeat(5, 40px); - grid-gap: 4px; - justify-content: space-between; - margin-top: 8px; - margin-bottom: 12px; + list-style: none; + display: grid; + grid-template-columns: repeat(5, 40px); + grid-gap: 4px; + justify-content: space-between; + margin-top: 8px; + margin-bottom: 12px; } .icon-button { - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - color: var(--mat-sidenav-content-text-color); - height: 40px; - width: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + color: var(--mat-sidenav-content-text-color); + height: 40px; + width: 40px; } .icon-radio-button:checked + ::ng-deep.icon-button { - background-color: rgba(0,0,0,0.16); + background-color: rgba(0, 0, 0, 0.16); } - .custom-icon-box { - position: relative; + position: relative; } .apply-icon-button { - position: absolute; - top: 0; - right: 8px; - align-self: flex-end; - margin-top: 4px; + position: absolute; + top: 0; + right: 8px; + align-self: flex-end; + margin-top: 4px; } .icon-input__hint { - color: rgba(0, 0, 0, 0.64); + color: rgba(0, 0, 0, 0.64); } @media (prefers-color-scheme: dark) { - .icon-input__hint { - color: rgba(255, 255, 255, 0.64); - } + .icon-input__hint { + color: rgba(255, 255, 255, 0.64); + } } .google-icons-link { - color: var(--color-primaryPalette-500); - font-weight: 600; - text-decoration: none; -} \ No newline at end of file + color: var(--color-primaryPalette-500); + font-weight: 600; + text-decoration: none; +} diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css index af4b5f51d..ec4853f13 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css +++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css @@ -1,55 +1,54 @@ .full-width { - position: relative; - width: 100%; + position: relative; + width: 100%; } .loader { - position: absolute; - top: 12px; - right: 12px; + position: absolute; + top: 12px; + right: 12px; } .disabled { - pointer-events: none; + pointer-events: none; } .foreign-key { - display: grid; - grid-template-columns: 1fr 36px; + display: grid; + grid-template-columns: 1fr 36px; } .foreign-key ::ng-deep .mat-mdc-form-field-subscript-wrapper { - margin-bottom: 16px; + margin-bottom: 16px; } .foreign-key ::ng-deep .mat-mdc-form-field-hint-wrapper { - padding-right: 0; - width: calc(100% + 8px); + padding-right: 0; + width: calc(100% + 8px); } @media screen and (width <= 600px) { - .foreign-key ::ng-deep .mat-mdc-form-field-subscript-wrapper{ - margin-bottom: 24px; - } - - .foreign-key ::ng-deep .mat-mdc-form-field-bottom-align::before { - margin-left: 0; - } + .foreign-key ::ng-deep .mat-mdc-form-field-subscript-wrapper { + margin-bottom: 24px; + } + .foreign-key ::ng-deep .mat-mdc-form-field-bottom-align::before { + margin-left: 0; + } } .hint-link { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } .foreign-key__link { - display: flex; - /* align-items: center; */ - justify-content: flex-end; - color: inherit; + display: flex; + /* align-items: center; */ + justify-content: flex-end; + color: inherit; } .foreign-key__link-icon { - margin-left: auto; - margin-top: 12px; -} \ No newline at end of file + margin-left: auto; + margin-top: 12px; +} diff --git a/frontend/src/app/components/ui-components/record-edit-fields/phone/phone.component.css b/frontend/src/app/components/ui-components/record-edit-fields/phone/phone.component.css index 88291a68b..6c622bca7 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/phone/phone.component.css +++ b/frontend/src/app/components/ui-components/record-edit-fields/phone/phone.component.css @@ -1,67 +1,58 @@ .phone-input-container { - display: flex; - gap: 12px; - align-items: flex-start; - width: 100%; + display: flex; + gap: 12px; + align-items: flex-start; + width: 100%; } .country-select-field { - flex: 0 0 200px; - min-width: 200px; + flex: 0 0 200px; + min-width: 200px; } .phone-number-field { - flex: 1; - min-width: 0; + flex: 1; + min-width: 0; } .country-option { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .flag { - font-size: 16px; - width: 20px; - text-align: center; + font-size: 16px; + width: 20px; + text-align: center; } .dial-code { - font-weight: 500; - color: rgba(0, 0, 0, 0.87); - min-width: 40px; + font-weight: 500; + color: var(--ra-text); + min-width: 40px; } .country-name { - color: rgba(0, 0, 0, 0.6); + color: var(--ra-text-muted); } .phone-number-field input.invalid { - border-color: #f44336; + border-color: var(--color-warnPalette-500); } @media (max-width: 768px) { - .phone-input-container { - flex-direction: column; - gap: 8px; - } - - .country-select-field { - flex: none; - width: 100%; - } - - .phone-number-field { - width: 100%; - } -} + .phone-input-container { + flex-direction: column; + gap: 8px; + } -/* Dark theme support */ -:host-context(.dark-theme) .dial-code { - color: rgba(255, 255, 255, 0.87); -} + .country-select-field { + flex: none; + width: 100%; + } -:host-context(.dark-theme) .country-name { - color: rgba(255, 255, 255, 0.6); -} \ No newline at end of file + .phone-number-field { + width: 100%; + } +} diff --git a/frontend/src/app/components/ui-components/record-edit-fields/range/range.component.css b/frontend/src/app/components/ui-components/record-edit-fields/range/range.component.css index 74aa047b1..3119e1f1d 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/range/range.component.css +++ b/frontend/src/app/components/ui-components/record-edit-fields/range/range.component.css @@ -1,120 +1,98 @@ .range-edit-container { - width: 100%; - display: flex; - flex-direction: column; - gap: 4px; - padding-bottom: 28px; + width: 100%; + display: flex; + flex-direction: column; + gap: 4px; + padding-bottom: 28px; } .range-label { - font-size: 14px; - color: rgba(0, 0, 0, 0.87); - margin-bottom: 8px; - display: block; + font-size: 14px; + color: var(--ra-text); + margin-bottom: 8px; + display: block; } .range-labels { - display: flex; - justify-content: space-between; - font-size: 12px; - color: rgba(0, 0, 0, 0.6); - padding: 0 2px; + display: flex; + justify-content: space-between; + font-size: 12px; + color: var(--ra-text-muted); + padding: 0 2px; } .range-current { - font-weight: 600; - color: rgba(0, 0, 0, 0.87); + font-weight: 600; + color: var(--ra-text); } .range-input { - width: 100%; - height: 6px; - -webkit-appearance: none; - appearance: none; - background: transparent; - outline: none; - cursor: pointer; + width: 100%; + height: 6px; + -webkit-appearance: none; + appearance: none; + background: transparent; + outline: none; + cursor: pointer; } .range-input::-webkit-slider-track { - width: 100%; - height: 6px; - background: #e0e0e0; - border-radius: 3px; + width: 100%; + height: 6px; + background: var(--ra-border); + border-radius: 3px; } .range-input::-moz-range-track { - width: 100%; - height: 6px; - background: #e0e0e0; - border-radius: 3px; + width: 100%; + height: 6px; + background: var(--ra-border); + border-radius: 3px; } .range-input::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 18px; - height: 18px; - background: #1976d2; - border-radius: 50%; - cursor: pointer; - margin-top: -6px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - transition: all 0.2s ease; + -webkit-appearance: none; + appearance: none; + width: 18px; + height: 18px; + background: var(--color-primaryPalette-500); + border-radius: 50%; + cursor: pointer; + margin-top: -6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + transition: all 0.2s ease; } .range-input::-moz-range-thumb { - width: 18px; - height: 18px; - background: #1976d2; - border-radius: 50%; - cursor: pointer; - border: none; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - transition: all 0.2s ease; + width: 18px; + height: 18px; + background: var(--color-primaryPalette-500); + border-radius: 50%; + cursor: pointer; + border: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + transition: all 0.2s ease; } .range-input::-webkit-slider-thumb:hover { - transform: scale(1.1); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + transform: scale(1.1); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } .range-input::-moz-range-thumb:hover { - transform: scale(1.1); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + transform: scale(1.1); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } .range-input:disabled { - opacity: 0.5; - cursor: not-allowed; + opacity: 0.5; + cursor: not-allowed; } .range-input:disabled::-webkit-slider-thumb { - cursor: not-allowed; + cursor: not-allowed; } .range-input:disabled::-moz-range-thumb { - cursor: not-allowed; + cursor: not-allowed; } - -@media (prefers-color-scheme: dark) { - .range-label { - color: rgba(255, 255, 255, 0.87); - } - - .range-labels { - color: rgba(255, 255, 255, 0.6); - } - - .range-current { - color: rgba(255, 255, 255, 0.87); - } - - .range-input::-webkit-slider-track { - background: #424242; - } - - .range-input::-moz-range-track { - background: #424242; - } -} \ No newline at end of file diff --git a/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.css b/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.css index 7c0f62d5d..1250ea7ed 100644 --- a/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.css +++ b/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.css @@ -1,57 +1,57 @@ .s3-widget { - display: flex; - flex-direction: column; - gap: 12px; + display: flex; + flex-direction: column; + gap: 12px; } .s3-widget__key { - width: 100%; + width: 100%; } .s3-widget__actions { - display: flex; - gap: 8px; + display: flex; + gap: 8px; } .s3-widget__actions button { - display: flex; - align-items: center; - gap: 4px; + display: flex; + align-items: center; + gap: 4px; } .s3-widget__preview { - display: flex; - align-items: center; - justify-content: center; - min-height: 100px; - border: 1px dashed #ccc; - border-radius: 4px; - padding: 8px; + display: flex; + align-items: center; + justify-content: center; + min-height: 100px; + border: 1px dashed #ccc; + border-radius: 4px; + padding: 8px; } .s3-widget__thumbnail { - max-width: 200px; - max-height: 150px; - object-fit: contain; - border-radius: 4px; + max-width: 200px; + max-height: 150px; + object-fit: contain; + border-radius: 4px; } .s3-widget__file-icon { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - color: #666; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + color: var(--ra-text-muted); } .s3-widget__file-icon mat-icon { - font-size: 48px; - width: 48px; - height: 48px; + font-size: 48px; + width: 48px; + height: 48px; } .s3-widget__filename { - font-size: 12px; - word-break: break-all; - text-align: center; + font-size: 12px; + word-break: break-all; + text-align: center; } diff --git a/frontend/src/app/components/ui-components/record-view-fields/file/file.component.css b/frontend/src/app/components/ui-components/record-view-fields/file/file.component.css index 7f667e698..d0f489300 100644 --- a/frontend/src/app/components/ui-components/record-view-fields/file/file.component.css +++ b/frontend/src/app/components/ui-components/record-view-fields/file/file.component.css @@ -1,4 +1,4 @@ .field-value { - font-style: italic; - color: #666; + font-style: italic; + color: var(--ra-text-muted); } diff --git a/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css b/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css index 5b2ca4ec5..2c526e2b4 100644 --- a/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css +++ b/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css @@ -1,23 +1,10 @@ .markdown-container { - padding: 16px; - border-radius: 4px; - min-height: 100px; -} - -@media (prefers-color-scheme: light) { - .markdown-container { - background: #f9f9f9; - border: 1px solid #e0e0e0; - color: rgba(0, 0, 0, 0.64); - } -} - -@media (prefers-color-scheme: dark) { - .markdown-container { - background: #2a2a2a; - border: 1px solid #404040; - color: rgba(255, 255, 255, 0.64); - } + padding: 16px; + border-radius: 4px; + min-height: 100px; + background: var(--ra-surface); + border: 1px solid var(--ra-border); + color: var(--ra-text-muted); } .markdown-container ::ng-deep h1, @@ -26,71 +13,59 @@ .markdown-container ::ng-deep h4, .markdown-container ::ng-deep h5, .markdown-container ::ng-deep h6 { - margin-top: 16px; - margin-bottom: 8px; + margin-top: 16px; + margin-bottom: 8px; } .markdown-container ::ng-deep p { - margin-bottom: 8px; + margin-bottom: 8px; } .markdown-container ::ng-deep ul, .markdown-container ::ng-deep ol { - margin-left: 20px; - margin-bottom: 8px; + margin-left: 20px; + margin-bottom: 8px; } .markdown-container ::ng-deep code { - padding: 2px 4px; - border-radius: 3px; - font-family: monospace; + padding: 2px 4px; + border-radius: 3px; + font-family: monospace; } @media (prefers-color-scheme: light) { - .markdown-container ::ng-deep code { - background: #f5f5f5; - } + .markdown-container ::ng-deep code { + background: #f5f5f5; + } } @media (prefers-color-scheme: dark) { - .markdown-container ::ng-deep code { - background: #3a3a3a; - } + .markdown-container ::ng-deep code { + background: var(--ra-elevated); + } } .markdown-container ::ng-deep pre { - padding: 12px; - border-radius: 4px; - overflow-x: auto; + padding: 12px; + border-radius: 4px; + overflow-x: auto; } @media (prefers-color-scheme: light) { - .markdown-container ::ng-deep pre { - background: #f5f5f5; - } + .markdown-container ::ng-deep pre { + background: #f5f5f5; + } } @media (prefers-color-scheme: dark) { - .markdown-container ::ng-deep pre { - background: #3a3a3a; - } + .markdown-container ::ng-deep pre { + background: var(--ra-elevated); + } } .markdown-container ::ng-deep blockquote { - padding-left: 16px; - margin-left: 0; -} - -@media (prefers-color-scheme: light) { - .markdown-container ::ng-deep blockquote { - border-left: 4px solid #ddd; - color: #666; - } -} - -@media (prefers-color-scheme: dark) { - .markdown-container ::ng-deep blockquote { - border-left: 4px solid #555; - color: #aaa; - } + padding-left: 16px; + margin-left: 0; + border-left: 4px solid var(--ra-border); + color: var(--ra-text-muted); } diff --git a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css index 0c680164f..7b1815542 100644 --- a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css +++ b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css @@ -7,7 +7,7 @@ .range-value-label { font-size: 14px; - color: rgba(0, 0, 0, 0.87); + color: var(--ra-text); font-weight: 500; } @@ -25,7 +25,7 @@ /* Light theme progress bar styles */ .range-progress-bar { --mat-progress-bar-active-indicator-color: var(--color-accentedPalette-300); - --mat-progress-bar-track-color: #e0e0e0; + --mat-progress-bar-track-color: var(--ra-border); --mat-progress-bar-active-indicator-height: 8px; --mat-progress-bar-track-height: 8px; } @@ -53,10 +53,6 @@ /* Dark theme styles */ @media (prefers-color-scheme: dark) { - .range-value-label { - color: rgba(255, 255, 255, 0.87); - } - .range-progress-bar { --mat-progress-bar-active-indicator-color: var(--color-accentedPalette-700); --mat-progress-bar-track-color: rgba(255, 255, 255, 0.12); diff --git a/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css index 7f667e698..d0f489300 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css @@ -1,4 +1,4 @@ .field-value { - font-style: italic; - color: #666; + font-style: italic; + color: var(--ra-text-muted); } diff --git a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css index e534da063..195b256f4 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css @@ -1,36 +1,36 @@ .foreign-key-button { - background: transparent; - border: 1px solid transparent; - border-radius: 12px; - color: var(--color-accentedPalette-500); - cursor: pointer; - font-size: inherit; - padding: 2px 8px; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; - max-width: 100%; - transition: background 100ms, border-color 100ms; + background: transparent; + border: 1px solid transparent; + border-radius: 12px; + color: var(--ra-accent-text); + cursor: pointer; + font-size: inherit; + padding: 2px 8px; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; + max-width: 100%; + transition: + background 100ms, + border-color 100ms; } @media (prefers-color-scheme: dark) { - .foreign-key-button:hover{ - background-color: var(--color-accentedPalette-900); - border: 1px solid var(--color-accentedPalette-700); - } + .foreign-key-button:hover { + background-color: var(--color-accentedPalette-900); + border: 1px solid var(--color-accentedPalette-700); + } } @media (prefers-color-scheme: light) { - .foreign-key-button:hover{ - background-color: var(--color-accentedPalette-100); - border: 1px solid var(--color-accentedPalette-300); - } + .foreign-key-button:hover { + background-color: var(--color-accentedPalette-100); + border: 1px solid var(--color-accentedPalette-300); + } } .foreign-key-button_selected { - background-color: var(--color-accentedPalette-100); - border-radius: 12px; - border: 1px solid var(--color-accentedPalette-300); + background-color: var(--color-accentedPalette-100); + border-radius: 12px; + border: 1px solid var(--color-accentedPalette-300); } - - diff --git a/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css b/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css index fad6ddbcf..7c7468960 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css @@ -1,10 +1,10 @@ .field-value { - font-style: italic; - color: #666; + font-style: italic; + color: var(--ra-text-muted); } .image-thumbnail { - display: block; - height: var(--height); - margin: 12px 0; + display: block; + height: var(--height); + margin: 12px 0; } diff --git a/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css b/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css index 8a428ec78..c5f360e07 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css @@ -7,7 +7,7 @@ .range-value-label { font-size: 14px; - color: rgba(0, 0, 0, 0.87); + color: var(--ra-text); font-weight: 500; } @@ -24,7 +24,7 @@ /* Light theme progress bar styles */ .range-progress-bar { --mat-progress-bar-active-indicator-color: var(--color-accentedPalette-300); - --mat-progress-bar-track-color: #e0e0e0; + --mat-progress-bar-track-color: var(--ra-border); --mat-progress-bar-active-indicator-height: 8px; --mat-progress-bar-track-height: 8px; } @@ -52,10 +52,6 @@ /* Dark theme styles */ @media (prefers-color-scheme: dark) { - .range-value-label { - color: rgba(255, 255, 255, 0.87); - } - .range-progress-bar { --mat-progress-bar-active-indicator-color: var(--color-accentedPalette-700); --mat-progress-bar-track-color: rgba(255, 255, 255, 0.12); diff --git a/frontend/src/app/components/ui-components/table-display-fields/s3/s3.component.css b/frontend/src/app/components/ui-components/table-display-fields/s3/s3.component.css index e25649dba..7fc5394e4 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/s3/s3.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/s3/s3.component.css @@ -1,6 +1,6 @@ .field-value { font-style: italic; - color: #666; + color: var(--ra-text-muted); } .s3-thumbnail { diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css index 128998579..6920ed288 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.css +++ b/frontend/src/app/components/upgrade/upgrade.component.css @@ -66,7 +66,7 @@ @media (prefers-color-scheme: dark) { .plan-header { - background-color: #202020; + background-color: var(--ra-surface); } .plan-header_current { @@ -141,7 +141,7 @@ @media (prefers-color-scheme: light) { .users__value { - --color-value: #333; + --color-value: var(--ra-text); } } diff --git a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css index 51f8d0f71..798e3646e 100644 --- a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css +++ b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css @@ -1,151 +1,151 @@ .permissions-header { - display: flex; - align-items: center; - justify-content: space-between; - margin: 16px 0; + display: flex; + align-items: center; + justify-content: space-between; + margin: 16px 0; } .permissions-header::before { - display: none; + display: none; } .permissions-alert { - position: relative; - top: -8px; + position: relative; + top: -8px; } .permissions-form ::ng-deep .mat-mdc-dialog-content { - color: var(--mat-sidenav-content-text-color); + color: var(--mat-sidenav-content-text-color); } .permissions { - display: grid; - grid-template-columns: auto 1fr; - grid-column-gap: 60px; - grid-row-gap: 16px; - align-items: center; - margin-bottom: 8px; + display: grid; + grid-template-columns: auto 1fr; + grid-column-gap: 60px; + grid-row-gap: 16px; + align-items: center; + margin-bottom: 8px; } .permissions__title { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .permissions-toggle-group { - justify-self: flex-start; + justify-self: flex-start; } .tables-options { - display: flex; - align-items: center; - justify-content: flex-end; + display: flex; + align-items: center; + justify-content: flex-end; } .tables-list { - position: relative; - grid-column: 1 / span 2; - display: grid; - grid-template-columns: 72px 1fr 72px repeat(3, 60px); - grid-row-gap: 8px; - align-items: center; - justify-items: center; - margin: 0 -8px; + position: relative; + grid-column: 1 / span 2; + display: grid; + grid-template-columns: 72px 1fr 72px repeat(3, 60px); + grid-row-gap: 8px; + align-items: center; + justify-items: center; + margin: 0 -8px; } .tables-list__header { - grid-column: 1 / -1; - display: grid; - grid-template-columns: subgrid; - justify-items: center; - background-color: var(--color-accentedPalette-100); - padding: 8px 0; + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + justify-items: center; + background-color: var(--color-accentedPalette-100); + padding: 8px 0; } @media (prefers-color-scheme: dark) { - .tables-list__header { - background-color: var(--color-accentedPalette-800); - } + .tables-list__header { + background-color: var(--color-accentedPalette-800); + } } .tables-list__item { - display: contents; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + display: contents; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .tables-list__divider { - grid-column: 1 / -1; - width: 100%; + grid-column: 1 / -1; + width: 100%; } .table-name-title { - justify-self: flex-start; - padding-left: 16px; + justify-self: flex-start; + padding-left: 16px; } .table-name { - --normalized-table-name-color: var(--mat-sidenav-content-text-color); - --orginal-table-name-color: rgba(0, 0, 0, 0.6); + --normalized-table-name-color: var(--mat-sidenav-content-text-color); + --orginal-table-name-color: rgba(0, 0, 0, 0.6); - justify-self: flex-start; - display: flex; - flex-direction: column; - gap: 4px; - padding-left: 16px; + justify-self: flex-start; + display: flex; + flex-direction: column; + gap: 4px; + padding-left: 16px; } @media (prefers-color-scheme: dark) { - .table-name { - --orginal-table-name-color: rgba(255, 255, 255, 0.75); - } + .table-name { + --orginal-table-name-color: rgba(255, 255, 255, 0.75); + } } .table-name_disabled { - --normalized-table-name-color: rgba(0, 0, 0, 0.38); - --orginal-table-name-color: rgba(0, 0, 0, 0.38); + --normalized-table-name-color: rgba(0, 0, 0, 0.38); + --orginal-table-name-color: rgba(0, 0, 0, 0.38); } @media (prefers-color-scheme: dark) { - .table-name_disabled { - --normalized-table-name-color: rgba(255, 255, 255, 0.38); - --orginal-table-name-color: rgba(255, 255, 255, 0.38); - } + .table-name_disabled { + --normalized-table-name-color: rgba(255, 255, 255, 0.38); + --orginal-table-name-color: rgba(255, 255, 255, 0.38); + } } .table-name__title { - color: var(--normalized-table-name-color); - font-size: 16px; - margin-bottom: -6px; + color: var(--normalized-table-name-color); + font-size: 16px; + margin-bottom: -6px; } .table-name__line { - color: var(--orginal-table-name-color); - font-size: 12px; + color: var(--orginal-table-name-color); + font-size: 12px; } .tables-overlay { - position: absolute; - background: rgba(255, 255, 255, 0.75); - box-sizing: border-box; - padding-top: 12px; - width: 100%; - height: 100%; - z-index: 2; - text-align: center; + position: absolute; + background: rgba(255, 255, 255, 0.75); + box-sizing: border-box; + padding-top: 12px; + width: 100%; + height: 100%; + z-index: 2; + text-align: center; } .tables-overlay__message { - background: rgba(255, 255, 255, 0.9); - box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0.9); - padding: 8px; - display: block; - max-width: 32%; - margin: 0 auto; + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0.9); + padding: 8px; + display: block; + max-width: 32%; + margin: 0 auto; } .visibilityIcon { - cursor: pointer; + cursor: pointer; } .visibilityIcon_visible { - color: var(--color-accentedPalette-500); + color: var(--ra-accent-text); } diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts index 5d949638a..b1a9c5644 100644 --- a/frontend/src/app/services/connections.service.ts +++ b/frontend/src/app/services/connections.service.ts @@ -1,538 +1,535 @@ -import { AlertActionType, AlertType } from '../models/alert'; -import { BehaviorSubject, EMPTY, throwError } from 'rxjs'; -import { Connection, ConnectionSettings, ConnectionType, DBtype } from '../models/connection'; +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; import { IColorConfig, NgxThemeService } from '@brumeilde/ngx-theme'; -import { NavigationEnd, Router, } from '@angular/router'; +import { BehaviorSubject, EMPTY, throwError } from 'rxjs'; import { catchError, filter, map } from 'rxjs/operators'; - +import { AlertActionType, AlertType } from '../models/alert'; +import { Connection, ConnectionSettings, ConnectionType, DBtype } from '../models/connection'; import { AccessLevel } from '../models/user'; -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; import { MasterPasswordService } from './master-password.service'; import { NotificationsService } from './notifications.service'; interface LogParams { - connectionID: string, - tableName?: string, - userEmail?: string, - requstedPage?: number, - chunkSize?: number, + connectionID: string; + tableName?: string; + userEmail?: string; + requstedPage?: number; + chunkSize?: number; } -type Palettes = { primaryPalette: string, accentedPalette: string }; +type Palettes = { primaryPalette: string; accentedPalette: string }; type Colors = { myColorName: string }; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class ConnectionsService { - public connectionID: string | null = null; - public connectionInitialState: Connection = Object.freeze({ - id: null, - type: DBtype.MySQL, - host: '', - port: '3306', - sid: '', - username: '', - password: '', - database: '', - authSource: '', - title: '', - ssh: false, - privateSSHKey: '', - sshHost: '', - sshPort: '', - sshUsername: '', - ssl: false, - cert: '', - masterEncryption: false, - azure_encryption: false, - connectionType: ConnectionType.Direct, - signing_key: null - }); - public connection: Connection; - public connectionAccessLevel: AccessLevel; - public groupsAccessLevel: boolean; - public currentPage: string; - public isCustomAccentedColor: boolean; - public defaultDisplayTable: string; - public ownConnections: Connection[] = null; - public testConnections: Connection[] = null; - - private connectionNameSubject: BehaviorSubject = new BehaviorSubject('Rocketadmin'); - private connectionSigningKeySubject: BehaviorSubject = new BehaviorSubject(null); - private connectionsSubject: BehaviorSubject = new BehaviorSubject([]); - - public cast = this.connectionsSubject.asObservable(); - - constructor( - private _http: HttpClient, - private router: Router, - private _notifications: NotificationsService, - private _masterPassword: MasterPasswordService, - public _themeService: NgxThemeService> - ) { - this.connection = {...this.connectionInitialState}; - this.router = router; - this.router.events + public connectionID: string | null = null; + public connectionInitialState: Connection = Object.freeze({ + id: null, + type: DBtype.MySQL, + host: '', + port: '3306', + sid: '', + username: '', + password: '', + database: '', + authSource: '', + title: '', + ssh: false, + privateSSHKey: '', + sshHost: '', + sshPort: '', + sshUsername: '', + ssl: false, + cert: '', + masterEncryption: false, + azure_encryption: false, + connectionType: ConnectionType.Direct, + signing_key: null, + }); + public connection: Connection; + public connectionAccessLevel: AccessLevel; + public groupsAccessLevel: boolean; + public currentPage: string; + public isCustomAccentedColor: boolean; + public defaultDisplayTable: string; + public ownConnections: Connection[] = null; + public testConnections: Connection[] = null; + + private connectionNameSubject: BehaviorSubject = new BehaviorSubject('Rocketadmin'); + private connectionSigningKeySubject: BehaviorSubject = new BehaviorSubject(null); + private connectionsSubject: BehaviorSubject = new BehaviorSubject([]); + + public cast = this.connectionsSubject.asObservable(); + + constructor( + private _http: HttpClient, + private router: Router, + private _notifications: NotificationsService, + private _masterPassword: MasterPasswordService, + public _themeService: NgxThemeService>, + ) { + this.connection = { ...this.connectionInitialState }; + this.router = router; + this.router.events .pipe( - filter( - (event) : boolean => { - return( event instanceof NavigationEnd ); - } - ) + filter((event): boolean => { + return event instanceof NavigationEnd; + }), ) - .subscribe( - ( _event: NavigationEnd ) : void => { - const urlConnectionID = this.router.routerState.snapshot.root.firstChild.paramMap.get('connection-id'); - this.currentPage = this.router.routerState.snapshot.root.firstChild.url[0].path; - this.setConnectionID(urlConnectionID); - this.setConnectionInfo(urlConnectionID); - this._notifications.resetAlert(); + .subscribe((_event: NavigationEnd): void => { + const urlConnectionID = this.router.routerState.snapshot.root.firstChild.paramMap.get('connection-id'); + this.currentPage = this.router.routerState.snapshot.root.firstChild.url[0].path; + this.setConnectionID(urlConnectionID); + this.setConnectionInfo(urlConnectionID); + this._notifications.resetAlert(); + }); + } + + get currentConnectionID() { + return this.connectionID; + } + + get currentConnectionName() { + return this.defineConnectionTitle(this.connection); + } + + get defaultTableToOpen() { + return this.defaultDisplayTable; + } + + get currentConnection() { + return this.connection; + } + + get currentConnectionAccessLevel() { + return this.connectionAccessLevel; + } + + get currentConnectionGroupAccessLevel() { + return this.groupsAccessLevel; + } + + get currentTab() { + return this.currentPage; + } + + get visibleTabs() { + let tabs = ['dashboard', 'audit']; + if (this.groupsAccessLevel) tabs.push('permissions'); + if (this.isPermitted(this.connectionAccessLevel)) tabs.push('connection-settings', 'edit-db'); + return tabs; + } + + get ownConnectionsList() { + return this.ownConnections; + } + + get testConnectionsList() { + return this.testConnections; + } + + getCurrentConnectionTitle() { + return this.connectionNameSubject.asObservable(); + } + + getCurrentConnectionSigningKey() { + return this.connectionSigningKeySubject.asObservable(); + } + + setConnectionID(id: string) { + this.connectionID = id; + } + + setConnectionInfo(id: string) { + this.defaultDisplayTable = null; + if (id) { + this.fetchConnection(id).subscribe((res) => { + this.connection = res.connection; + this.connectionAccessLevel = res.accessLevel; + this.groupsAccessLevel = res.groupManagement; + this.connectionNameSubject.next(res.connection.title || res.connection.database); + this.connectionSigningKeySubject.next(res.connection.signing_key); + if (res.connectionProperties) { + this.defaultDisplayTable = res.connectionProperties.default_showing_table; + this.isCustomAccentedColor = !!res.connectionProperties.secondary_color; + this._themeService.updateColors({ + palettes: { + primaryPalette: res.connectionProperties.primary_color, + accentedPalette: res.connectionProperties.secondary_color, + }, + }); + } else { + this.isCustomAccentedColor = false; + this._themeService.updateColors({ palettes: { primaryPalette: '#2563EB', accentedPalette: '#3FC5B8' } }); } - ) - ; - } - - get currentConnectionID() { - return this.connectionID; - } - - get currentConnectionName() { - return this.defineConnectionTitle(this.connection); - } - - get defaultTableToOpen() { - return this.defaultDisplayTable; - } - - get currentConnection() { - return this.connection; - } - - get currentConnectionAccessLevel() { - return this.connectionAccessLevel; - } - - get currentConnectionGroupAccessLevel() { - return this.groupsAccessLevel; - } - - get currentTab() { - return this.currentPage; - } - - get visibleTabs() { - let tabs = ['dashboard', 'audit']; - if (this.groupsAccessLevel) tabs.push('permissions'); - if (this.isPermitted(this.connectionAccessLevel)) tabs.push('connection-settings', 'edit-db'); - return tabs; - } - - get ownConnectionsList() { - return this.ownConnections; - } - - get testConnectionsList() { - return this.testConnections; - } - - getCurrentConnectionTitle() { - return this.connectionNameSubject.asObservable(); - } - - getCurrentConnectionSigningKey() { - return this.connectionSigningKeySubject.asObservable(); - } - - setConnectionID(id: string) { - this.connectionID = id; - } - - setConnectionInfo(id: string) { - this.defaultDisplayTable = null; - if (id) { - this.fetchConnection(id).subscribe(res => { - this.connection = res.connection; - this.connectionAccessLevel = res.accessLevel; - this.groupsAccessLevel = res.groupManagement; - this.connectionNameSubject.next(res.connection.title || res.connection.database); - this.connectionSigningKeySubject.next(res.connection.signing_key); - if (res.connectionProperties) { - this.defaultDisplayTable = res.connectionProperties.default_showing_table; - this.isCustomAccentedColor = !!res.connectionProperties.secondary_color; - this._themeService.updateColors({ palettes: { primaryPalette: res.connectionProperties.primary_color, accentedPalette: res.connectionProperties.secondary_color }}); - } else { - this.isCustomAccentedColor = false; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC' }}); - } - }); - } else { - this.connection = {...this.connectionInitialState}; - this.isCustomAccentedColor = false; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC' }}); - } - - console.log('this.defaultDisplayTable'); - console.log(this.defaultDisplayTable); - } - - isPermitted(accessLevel: AccessLevel) { - return accessLevel === 'edit' || accessLevel === 'readonly' - } - - defineConnectionType(connection) { - if (connection.type?.startsWith('agent_')) { - connection.type = connection.type.slice(6); - connection.connectionType = ConnectionType.Agent; - } else { - connection.connectionType = ConnectionType.Direct; - } - return connection; - } - - defineConnectionTitle(connection: Connection) { - if (!connection.title && connection.masterEncryption) return 'Untitled encrypted connection'; - if (!connection.title && !connection.database) return 'Untitled connection'; - return connection.title || connection.database; - } - - private checkAndSendConversion() { - const now = new Date(); - const firstVisitTime = localStorage.getItem('first_visit_time'); - - if (!firstVisitTime) { - // First visit - record the current date - localStorage.setItem('first_visit_time', now.toISOString()); - return; - } - - const firstVisit = new Date(firstVisitTime); - const daysDifference = Math.floor((now.getTime() - firstVisit.getTime()) / (1000 * 60 * 60 * 24)); - - if (daysDifference >= 7) { - const repeatConversionSent = localStorage.getItem('repeat_conversion_sent'); - - if (!repeatConversionSent) { - localStorage.setItem('repeat_conversion_sent', 'true'); - - // Send conversion event - if (typeof window !== 'undefined' && (window as any).gtag) { - (window as any).gtag('event', 'conversion', { - 'send_to': 'AW-419937947/jqGyCJWo4qobEJv9nsgB', - 'value': 1.0, - 'currency': 'USD', - 'event_callback': () => { - console.log('Conversion event sent successfully'); - } - }); - } - } - } - } - - fetchConnections() { - // Check for first visit and send conversion if needed - this.checkAndSendConversion(); - - return this._http.get('/connections') - .pipe( - map(res => { - const connections = res.connections.map(connectionItem => { - const connection = this.defineConnectionType(connectionItem.connection); - const displayTitle = this.defineConnectionTitle(connectionItem.connection); - return {...connectionItem, connection, displayTitle}; - }); - this.ownConnections = connections.filter(connectionItem => !connectionItem.connection.isTestConnection); - this.testConnections = connections.filter(connectionItem => connectionItem.connection.isTestConnection); - return connections; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - const errorDetails = err.error?.originalMessage || ''; - this._notifications.showAlert(AlertType.Error, {abstract: errorMessage, details: errorDetails}, [ - { - type: AlertActionType.Button, - caption: 'Dismiss', - action: (_id: number) => this._notifications.dismissAlert() - } - ]); - return EMPTY; - }) - ); - } - - fetchConnection(id: string) { - return this._http.get(`/connection/one/${id}`) - .pipe( - map(res => { - const connection = this.defineConnectionType(res.connection); - if (res.connectionProperties) { - this.defaultDisplayTable = res.connectionProperties.default_showing_table; - this._themeService.updateColors({ palettes: { primaryPalette: res.connectionProperties.primary_color, accentedPalette: res.connectionProperties.secondary_color }}); - } else { - this.defaultDisplayTable = null; - this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC' }}); - } - return {...res, connection}; - }), - catchError((err) => { - console.log(err); - if (err.error?.type === 'no_master_key' && this.router.url !== '/connections-list') { - this._masterPassword.showMasterPasswordDialog() - }; - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(errorMessage); - return EMPTY; - } - ) - ); - } - - testConnection(connectionID: string, connection: Connection) { - let dbCredentials; - dbCredentials = { - ...connection, - port: parseInt(connection.port, 10), - sshPort: parseInt(connection.sshPort, 10) - }; - - if (connection.connectionType === 'agent') { - dbCredentials.type = `agent_${dbCredentials.type}` - } - - return this._http.post(`/connection/test`, dbCredentials, - {params: { - ...(connectionID ? {connectionId: connectionID} : {}) - }}) - .pipe( - map(res => res), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - const errorDetails = err.error?.originalMessage || ''; - this._notifications.showAlert(AlertType.Error, {abstract: errorMessage, details: errorDetails}, []); - return EMPTY; - } - ) - ); - } - - createConnection(connection: Connection, masterKey: string) { - let dbCredentials; - dbCredentials = { - ...connection, - port: parseInt(connection.port, 10), - sshPort: parseInt(connection.sshPort, 10) - }; - - if (connection.connectionType === 'agent') { - dbCredentials.type = `agent_${dbCredentials.type}` - } - - return this._http.post('/connection', dbCredentials, { - headers: masterKey ? { - masterpwd: masterKey - } : {} - }) - .pipe( - map((res: any) => { - this.connectionsSubject.next(null); - this._masterPassword.checkMasterPassword(connection.masterEncryption, res.id, masterKey); - this._notifications.showSuccessSnackbar('Connection was added successfully.'); - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - const errorDetails = err.error?.originalMessage || ''; - this._notifications.showAlert(AlertType.Error, {abstract: errorMessage, details: errorDetails}, []); - return throwError(() => errorMessage); - }) - ); - } - - updateConnection(connection: Connection, masterKey: string) { - let dbCredentials; - dbCredentials = { - ...connection, - port: parseInt(connection.port, 10), - sshPort: parseInt(connection.sshPort, 10) - }; - - if (connection.connectionType === 'agent') { - dbCredentials.type = `agent_${dbCredentials.type}` - } - - return this._http.put(`/connection/${connection.id}`, dbCredentials, { - headers: masterKey ? { - masterpwd: masterKey - } : {} - }) - .pipe( - map(res => { - this._masterPassword.checkMasterPassword(connection.masterEncryption, connection.id, masterKey); - this._notifications.showSuccessSnackbar('Connection has been updated successfully.'); - this.connectionsSubject.next(null); - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - const errorDetails = err.error?.originalMessage || ''; - this._notifications.showAlert(AlertType.Error, {abstract: errorMessage, details: errorDetails}, [ - { - type: AlertActionType.Button, - caption: 'Dismiss', - action: (_id: number) => this._notifications.dismissAlert() - } - ]); - // this._notifications.showErrorSnackbar(`${err.error.message}. Connection has not been updated.`); - console.log('updateConnection catchError'); - return throwError(() => new Error(errorMessage)); - } - ) - ); - } - - deleteConnection(id: string, metadata) { - return this._http.put(`/connection/delete/${id}`, metadata) - .pipe( - map(() => { - this.connectionsSubject.next(null); - this._notifications.showSuccessSnackbar('Connection has been deleted successfully.'); - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(errorMessage); - return EMPTY; - } - ) - ); - } - - fetchAuditLog({connectionID, tableName, userEmail, requstedPage, chunkSize}: LogParams) { - if (tableName === "showAll") tableName = null; - if (userEmail === "showAll") userEmail = null; - return this._http.get(`/logs/${connectionID}`, { - params: { - page: requstedPage.toString(), - perPage: chunkSize.toString(), - ...(tableName ? {tableName} : {}), - ...(userEmail ? {email: userEmail} : {}), - } - }) - .pipe( - map(res => res), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(errorMessage); - return EMPTY; - } - ) - ); - } - - getConnectionSettings(connectionID: string) { - return this._http.get(`/connection/properties/${connectionID}`) - .pipe( - map((res: any) => { - if (res) { - this._themeService.updateColors({ palettes: { primaryPalette: res.primary_color, accentedPalette: res.secondary_color }}); - } - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(`${errorMessage}.`); - return EMPTY; - } - ) - ); - } - - createConnectionSettings(connectionID: string, settings: ConnectionSettings) { - return this._http.post(`/connection/properties/${connectionID}`, settings) - .pipe( - map(res => { - this._notifications.showSuccessSnackbar('Connection settings has been created successfully.'); - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(`${errorMessage}.`); - return EMPTY; - } - ) - ); - } - - updateConnectionSettings(connectionID: string, settings: ConnectionSettings) { - return this._http.put(`/connection/properties/${connectionID}`, settings) - .pipe( - map(res => { - this._notifications.showSuccessSnackbar('Connection settings has been updated successfully.'); - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(`${errorMessage}.`); - return EMPTY; - } - ) - ); - } - - deleteConnectionSettings(connectionID: string) { - return this._http.delete(`/connection/properties/${connectionID}`) - .pipe( - map(() => { - this._notifications.showSuccessSnackbar('Connection settings has been removed successfully.'); - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(`${errorMessage}.`); - return EMPTY; - } - ) - ); - } - - getTablesFolders(connectionID: string) { - return this._http.get(`/table-categories/${connectionID}`) - .pipe( - map(res => { - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(`${errorMessage}.`); - return EMPTY; - }) - ); - } - - updateTablesFolders(connectionID: string, tablesFolders: any){ - return this._http.put(`/table-categories/${connectionID}`, tablesFolders) - .pipe( - map(res => { - // this._notifications.showSuccessSnackbar('Connection settings has been updated successfully.'); - return res; - }), - catchError((err) => { - console.log(err); - const errorMessage = err.error?.message || 'Unknown error'; - this._notifications.showErrorSnackbar(`${errorMessage}.`); - return EMPTY; - }) - ); - } + }); + } else { + this.connection = { ...this.connectionInitialState }; + this.isCustomAccentedColor = false; + this._themeService.updateColors({ palettes: { primaryPalette: '#2563EB', accentedPalette: '#3FC5B8' } }); + } + + console.log('this.defaultDisplayTable'); + console.log(this.defaultDisplayTable); + } + + isPermitted(accessLevel: AccessLevel) { + return accessLevel === 'edit' || accessLevel === 'readonly'; + } + + defineConnectionType(connection) { + if (connection.type?.startsWith('agent_')) { + connection.type = connection.type.slice(6); + connection.connectionType = ConnectionType.Agent; + } else { + connection.connectionType = ConnectionType.Direct; + } + return connection; + } + + defineConnectionTitle(connection: Connection) { + if (!connection.title && connection.masterEncryption) return 'Untitled encrypted connection'; + if (!connection.title && !connection.database) return 'Untitled connection'; + return connection.title || connection.database; + } + + private checkAndSendConversion() { + const now = new Date(); + const firstVisitTime = localStorage.getItem('first_visit_time'); + + if (!firstVisitTime) { + // First visit - record the current date + localStorage.setItem('first_visit_time', now.toISOString()); + return; + } + + const firstVisit = new Date(firstVisitTime); + const daysDifference = Math.floor((now.getTime() - firstVisit.getTime()) / (1000 * 60 * 60 * 24)); + + if (daysDifference >= 7) { + const repeatConversionSent = localStorage.getItem('repeat_conversion_sent'); + + if (!repeatConversionSent) { + localStorage.setItem('repeat_conversion_sent', 'true'); + + // Send conversion event + if (typeof window !== 'undefined' && (window as any).gtag) { + (window as any).gtag('event', 'conversion', { + send_to: 'AW-419937947/jqGyCJWo4qobEJv9nsgB', + value: 1.0, + currency: 'USD', + event_callback: () => { + console.log('Conversion event sent successfully'); + }, + }); + } + } + } + } + + fetchConnections() { + // Check for first visit and send conversion if needed + this.checkAndSendConversion(); + + return this._http.get('/connections').pipe( + map((res) => { + const connections = res.connections.map((connectionItem) => { + const connection = this.defineConnectionType(connectionItem.connection); + const displayTitle = this.defineConnectionTitle(connectionItem.connection); + return { ...connectionItem, connection, displayTitle }; + }); + this.ownConnections = connections.filter((connectionItem) => !connectionItem.connection.isTestConnection); + this.testConnections = connections.filter((connectionItem) => connectionItem.connection.isTestConnection); + return connections; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + const errorDetails = err.error?.originalMessage || ''; + this._notifications.showAlert(AlertType.Error, { abstract: errorMessage, details: errorDetails }, [ + { + type: AlertActionType.Button, + caption: 'Dismiss', + action: (_id: number) => this._notifications.dismissAlert(), + }, + ]); + return EMPTY; + }), + ); + } + + fetchConnection(id: string) { + return this._http.get(`/connection/one/${id}`).pipe( + map((res) => { + const connection = this.defineConnectionType(res.connection); + if (res.connectionProperties) { + this.defaultDisplayTable = res.connectionProperties.default_showing_table; + this._themeService.updateColors({ + palettes: { + primaryPalette: res.connectionProperties.primary_color, + accentedPalette: res.connectionProperties.secondary_color, + }, + }); + } else { + this.defaultDisplayTable = null; + this._themeService.updateColors({ palettes: { primaryPalette: '#2563EB', accentedPalette: '#3FC5B8' } }); + } + return { ...res, connection }; + }), + catchError((err) => { + console.log(err); + if (err.error?.type === 'no_master_key' && this.router.url !== '/connections-list') { + this._masterPassword.showMasterPasswordDialog(); + } + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(errorMessage); + return EMPTY; + }), + ); + } + + testConnection(connectionID: string, connection: Connection) { + let dbCredentials; + dbCredentials = { + ...connection, + port: parseInt(connection.port, 10), + sshPort: parseInt(connection.sshPort, 10), + }; + + if (connection.connectionType === 'agent') { + dbCredentials.type = `agent_${dbCredentials.type}`; + } + + return this._http + .post(`/connection/test`, dbCredentials, { + params: { + ...(connectionID ? { connectionId: connectionID } : {}), + }, + }) + .pipe( + map((res) => res), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + const errorDetails = err.error?.originalMessage || ''; + this._notifications.showAlert(AlertType.Error, { abstract: errorMessage, details: errorDetails }, []); + return EMPTY; + }), + ); + } + + createConnection(connection: Connection, masterKey: string) { + let dbCredentials; + dbCredentials = { + ...connection, + port: parseInt(connection.port, 10), + sshPort: parseInt(connection.sshPort, 10), + }; + + if (connection.connectionType === 'agent') { + dbCredentials.type = `agent_${dbCredentials.type}`; + } + + return this._http + .post('/connection', dbCredentials, { + headers: masterKey + ? { + masterpwd: masterKey, + } + : {}, + }) + .pipe( + map((res: any) => { + this.connectionsSubject.next(null); + this._masterPassword.checkMasterPassword(connection.masterEncryption, res.id, masterKey); + this._notifications.showSuccessSnackbar('Connection was added successfully.'); + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + const errorDetails = err.error?.originalMessage || ''; + this._notifications.showAlert(AlertType.Error, { abstract: errorMessage, details: errorDetails }, []); + return throwError(() => errorMessage); + }), + ); + } + + updateConnection(connection: Connection, masterKey: string) { + let dbCredentials; + dbCredentials = { + ...connection, + port: parseInt(connection.port, 10), + sshPort: parseInt(connection.sshPort, 10), + }; + + if (connection.connectionType === 'agent') { + dbCredentials.type = `agent_${dbCredentials.type}`; + } + + return this._http + .put(`/connection/${connection.id}`, dbCredentials, { + headers: masterKey + ? { + masterpwd: masterKey, + } + : {}, + }) + .pipe( + map((res) => { + this._masterPassword.checkMasterPassword(connection.masterEncryption, connection.id, masterKey); + this._notifications.showSuccessSnackbar('Connection has been updated successfully.'); + this.connectionsSubject.next(null); + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + const errorDetails = err.error?.originalMessage || ''; + this._notifications.showAlert(AlertType.Error, { abstract: errorMessage, details: errorDetails }, [ + { + type: AlertActionType.Button, + caption: 'Dismiss', + action: (_id: number) => this._notifications.dismissAlert(), + }, + ]); + // this._notifications.showErrorSnackbar(`${err.error.message}. Connection has not been updated.`); + console.log('updateConnection catchError'); + return throwError(() => new Error(errorMessage)); + }), + ); + } + + deleteConnection(id: string, metadata) { + return this._http.put(`/connection/delete/${id}`, metadata).pipe( + map(() => { + this.connectionsSubject.next(null); + this._notifications.showSuccessSnackbar('Connection has been deleted successfully.'); + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(errorMessage); + return EMPTY; + }), + ); + } + + fetchAuditLog({ connectionID, tableName, userEmail, requstedPage, chunkSize }: LogParams) { + if (tableName === 'showAll') tableName = null; + if (userEmail === 'showAll') userEmail = null; + return this._http + .get(`/logs/${connectionID}`, { + params: { + page: requstedPage.toString(), + perPage: chunkSize.toString(), + ...(tableName ? { tableName } : {}), + ...(userEmail ? { email: userEmail } : {}), + }, + }) + .pipe( + map((res) => res), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(errorMessage); + return EMPTY; + }), + ); + } + + getConnectionSettings(connectionID: string) { + return this._http.get(`/connection/properties/${connectionID}`).pipe( + map((res: any) => { + if (res) { + this._themeService.updateColors({ + palettes: { primaryPalette: res.primary_color, accentedPalette: res.secondary_color }, + }); + } + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } + + createConnectionSettings(connectionID: string, settings: ConnectionSettings) { + return this._http.post(`/connection/properties/${connectionID}`, settings).pipe( + map((res) => { + this._notifications.showSuccessSnackbar('Connection settings has been created successfully.'); + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } + + updateConnectionSettings(connectionID: string, settings: ConnectionSettings) { + return this._http.put(`/connection/properties/${connectionID}`, settings).pipe( + map((res) => { + this._notifications.showSuccessSnackbar('Connection settings has been updated successfully.'); + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } + + deleteConnectionSettings(connectionID: string) { + return this._http.delete(`/connection/properties/${connectionID}`).pipe( + map(() => { + this._notifications.showSuccessSnackbar('Connection settings has been removed successfully.'); + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } + + getTablesFolders(connectionID: string) { + return this._http.get(`/table-categories/${connectionID}`).pipe( + map((res) => { + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } + + updateTablesFolders(connectionID: string, tablesFolders: any) { + return this._http.put(`/table-categories/${connectionID}`, tablesFolders).pipe( + map((res) => { + // this._notifications.showSuccessSnackbar('Connection settings has been updated successfully.'); + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } } diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss index 53746aae6..b2b0016d0 100644 --- a/frontend/src/custom-theme.scss +++ b/frontend/src/custom-theme.scss @@ -28,9 +28,9 @@ html { @media (prefers-color-scheme: dark) { html { - --mat-expansion-container-background-color: #202020 !important; - --mat-table-background-color: #202020 !important; - --mat-paginator-container-background-color: #202020 !important; + --mat-expansion-container-background-color: var(--ra-surface) !important; + --mat-table-background-color: var(--ra-surface) !important; + --mat-paginator-container-background-color: var(--ra-surface) !important; } .mat-datepicker-content { @@ -61,12 +61,23 @@ html { } body .mat-mdc-flat-button.mat-accent, body .mat-mdc-unelevated-button.mat-accent { - --mat-mdc-button-persistent-ripple-color: var(--color-accentedPalette-500-contrast) !important; - --mat-button-protected-label-text-color: var(--color-accentedPalette-500-contrast) !important; - --mat-button-filled-label-text-color: var(--color-accentedPalette-500-contrast) !important; + --mdc-filled-button-container-color: var(--color-primaryPalette-500) !important; + --mat-button-filled-container-color: var(--color-primaryPalette-500) !important; + --mat-mdc-button-persistent-ripple-color: var(--color-primaryPalette-500-contrast) !important; + --mat-button-protected-label-text-color: var(--color-primaryPalette-500-contrast) !important; + --mat-button-filled-label-text-color: var(--color-primaryPalette-500-contrast) !important; --mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; } + body .mat-mdc-outlined-button.mat-accent { + --mdc-outlined-button-label-text-color: var(--color-primaryPalette-500) !important; + --mdc-outlined-button-outline-color: var(--color-primaryPalette-500) !important; + } + + body .mat-mdc-button.mat-accent { + --mdc-text-button-label-text-color: var(--color-primaryPalette-500) !important; + } + body .mat-mdc-flat-button.mat-warn, body .mat-mdc-unelevated-button.mat-warn { --mat-mdc-button-persistent-ripple-color: var(--color-warnPalette-500-contrast) !important; --mat-button-protected-label-text-color: var(--color-warnPalette-500-contrast) !important; diff --git a/frontend/src/index.html b/frontend/src/index.html index d3d9c99af..10abd0474 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -19,7 +19,7 @@ - + diff --git a/frontend/src/index.saas.html b/frontend/src/index.saas.html index 8c81bb466..9bf5a1e12 100644 --- a/frontend/src/index.saas.html +++ b/frontend/src/index.saas.html @@ -153,7 +153,7 @@ - +