Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.
This commit is contained in:
Torsten Schulz (local)
@@ -16,7 +16,7 @@
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button v-for="button in buttons" :key="button.text" @click="buttonClick(button.action)" class="dialog-button">
|
||||
<button v-for="button in buttons" :key="button.text" @click="buttonClick(button.action)" class="dialog-button" :disabled="button.disabled">
|
||||
{{ isTitleTranslated ? $t(button.text) : button.text }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -142,6 +142,9 @@ export default {
|
||||
return this.minimized;
|
||||
},
|
||||
startDragging(event) {
|
||||
if (window.innerWidth <= 760) {
|
||||
return;
|
||||
}
|
||||
this.isDragging = true;
|
||||
const dialog = this.$refs.dialog;
|
||||
this.dragOffsetX = event.clientX - dialog.offsetLeft;
|
||||
@@ -186,7 +189,8 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(24, 18, 11, 0.44);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.dialog-overlay.non-modal {
|
||||
@@ -195,14 +199,17 @@ export default {
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: white;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(249, 242, 232, 0.98) 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-medium);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog.minimized {
|
||||
@@ -214,64 +221,112 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 5px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: var(--color-primary-orange);
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(93, 64, 55, 0.1);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(248, 162, 43, 0.16) 0%, rgba(255, 255, 255, 0.56) 100%);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
padding: 2px 5px 0 0;
|
||||
padding: 2px 6px 0 0;
|
||||
}
|
||||
|
||||
.dialog-icon img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
flex-grow: 1;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.dialog-close,
|
||||
.dialog-minimize {
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
margin-left: 10px;
|
||||
font-size: 1.1rem;
|
||||
margin-left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
color: var(--color-text-secondary);
|
||||
transition: background-color var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.dialog-close:hover,
|
||||
.dialog-minimize:hover {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
padding: 18px 20px;
|
||||
overflow-y: auto;
|
||||
display: var(--dialog-display);
|
||||
color: var(--color-text-primary);
|
||||
&[style*="--dialog-display: flex"] {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
dialog-footer {
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
gap: 10px;
|
||||
padding: 14px 20px 18px;
|
||||
border-top: 1px solid rgba(93, 64, 55, 0.08);
|
||||
background: rgba(255, 255, 255, 0.46);
|
||||
}
|
||||
|
||||
.dialog-button {
|
||||
margin-left: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
background: var(--color-primary-orange);
|
||||
color: #000000;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.02s;
|
||||
margin-left: 0;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.dialog-button:hover {
|
||||
background: #FFF4F0;
|
||||
color: #5D4037;
|
||||
border: 1px solid #5D4037;
|
||||
color: #2b1f14;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.dialog {
|
||||
width: calc(100vw - 16px) !important;
|
||||
max-width: calc(100vw - 16px);
|
||||
height: auto !important;
|
||||
max-height: calc(100dvh - 16px);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
cursor: default;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dialog-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user