refactor: Modularize UI components and utilities
- Extract UI components into separate JS files - Centralize configuration values in config.js - Introduce a dedicated logger module - Improve file tree drag-and-drop and undo functionality - Refactor modal handling to a single manager - Add URL routing support for SPA navigation - Implement view mode for read-only access
This commit is contained in:
Mahmoud-Emad
@@ -2,10 +2,21 @@
|
||||
.preview-pane {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.preview-pane h1, .preview-pane h2, .preview-pane h3,
|
||||
.preview-pane h4, .preview-pane h5, .preview-pane h6 {
|
||||
#preview {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.preview-pane h1,
|
||||
.preview-pane h2,
|
||||
.preview-pane h3,
|
||||
.preview-pane h4,
|
||||
.preview-pane h5,
|
||||
.preview-pane h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
@@ -137,6 +148,7 @@ body.dark-mode .context-menu {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
@@ -152,6 +164,7 @@ body.dark-mode .context-menu {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
@@ -205,4 +218,62 @@ body.dark-mode .modal-footer {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--link-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
/* Directory Preview Styles */
|
||||
.directory-preview {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.directory-preview h2 {
|
||||
margin-bottom: 20px;
|
||||
/* color: var(--text-primary); */
|
||||
}
|
||||
|
||||
.directory-files {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.file-card {
|
||||
background-color: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.file-card:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--link-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.file-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-card-header i {
|
||||
color: var(--link-color);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.file-card-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.file-card-description {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -6,6 +6,8 @@
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
/* Prevent header from shrinking */
|
||||
}
|
||||
|
||||
.editor-header input {
|
||||
@@ -19,18 +21,42 @@
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
/* Take remaining space */
|
||||
overflow: hidden;
|
||||
/* Prevent container overflow, CodeMirror handles its own scrolling */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
/* Important: allows flex child to shrink below content size */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex: 1;
|
||||
/* Take all available space */
|
||||
min-height: 0;
|
||||
/* Allow shrinking */
|
||||
overflow: hidden;
|
||||
/* CodeMirror will handle scrolling */
|
||||
}
|
||||
|
||||
/* CodeMirror customization */
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
height: 100% !important;
|
||||
/* Force full height */
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow-y: auto !important;
|
||||
/* Ensure vertical scrolling is enabled */
|
||||
overflow-x: auto !important;
|
||||
/* Ensure horizontal scrolling is enabled */
|
||||
}
|
||||
|
||||
body.dark-mode .CodeMirror {
|
||||
background-color: #1c2128;
|
||||
color: #e6edf3;
|
||||
@@ -71,5 +97,4 @@ body.dark-mode .CodeMirror-gutters {
|
||||
color: var(--info-color);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -20,8 +20,9 @@
|
||||
color: var(--text-primary);
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.tree-node:hover {
|
||||
@@ -29,14 +30,16 @@
|
||||
}
|
||||
|
||||
.tree-node.active {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
color: var(--link-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tree-node.active:hover {
|
||||
background-color: var(--link-color);
|
||||
filter: brightness(1.1);
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.tree-node.active .tree-node-icon {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Toggle arrow */
|
||||
@@ -46,16 +49,25 @@
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tree-node-toggle.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.tree-node-toggle:hover {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Icon styling */
|
||||
.tree-node-icon {
|
||||
width: 16px;
|
||||
@@ -67,10 +79,6 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tree-node.active .tree-node-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Content wrapper */
|
||||
.tree-node-content {
|
||||
display: flex;
|
||||
@@ -112,13 +120,54 @@
|
||||
}
|
||||
|
||||
/* Drag and drop */
|
||||
/* Default cursor is pointer, not grab (only show grab after long-press) */
|
||||
.tree-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Show grab cursor only when drag is ready (after long-press) */
|
||||
.tree-node.drag-ready {
|
||||
cursor: grab !important;
|
||||
}
|
||||
|
||||
.tree-node.drag-ready:active {
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
.tree-node.dragging {
|
||||
opacity: 0.5;
|
||||
opacity: 0.4;
|
||||
background-color: var(--bg-tertiary);
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
.tree-node.drag-over {
|
||||
background-color: rgba(13, 110, 253, 0.2);
|
||||
border: 1px dashed var(--link-color);
|
||||
background-color: rgba(13, 110, 253, 0.15) !important;
|
||||
border: 2px dashed var(--link-color) !important;
|
||||
box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
|
||||
}
|
||||
|
||||
/* Root-level drop target highlighting */
|
||||
.file-tree.drag-over-root {
|
||||
background-color: rgba(13, 110, 253, 0.08);
|
||||
border: 2px dashed var(--link-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 0 12px rgba(13, 110, 253, 0.2);
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Only show drag cursor on directories when dragging */
|
||||
body.dragging-active .tree-node[data-isdir="true"] {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
body.dragging-active .tree-node[data-isdir="false"] {
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
/* Show move cursor when hovering over root-level empty space */
|
||||
body.dragging-active .file-tree.drag-over-root {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* Collection selector - Bootstrap styled */
|
||||
@@ -156,13 +205,34 @@ body.dark-mode .tree-node:hover {
|
||||
}
|
||||
|
||||
body.dark-mode .tree-node.active {
|
||||
background-color: var(--link-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
body.dark-mode .tree-node.active .tree-node-icon {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
body.dark-mode .tree-node.active .tree-node-icon .tree-node-toggle {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
body.dark-mode .tree-children {
|
||||
border-left-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Empty directory message */
|
||||
.tree-empty-message {
|
||||
padding: 8px 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body.dark-mode .tree-empty-message {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Scrollbar in sidebar */
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background-color: var(--border-color);
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
/* Base layout styles */
|
||||
html, body {
|
||||
height: 100%;
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* Prevent page-level scrolling */
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Column Resizer */
|
||||
.column-resizer {
|
||||
width: 1px;
|
||||
@@ -17,14 +25,21 @@ html, body {
|
||||
transition: background-color 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
padding: 0 3px; /* Add invisible padding for easier grab */
|
||||
margin: 0 -3px; /* Compensate for padding */
|
||||
padding: 0 3px;
|
||||
/* Add invisible padding for easier grab */
|
||||
margin: 0 -3px;
|
||||
/* Compensate for padding */
|
||||
height: 100%;
|
||||
/* Take full height of parent */
|
||||
align-self: stretch;
|
||||
/* Ensure it stretches to full height */
|
||||
}
|
||||
|
||||
.column-resizer:hover {
|
||||
background-color: var(--link-color);
|
||||
width: 1px;
|
||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.3); /* Visual feedback instead of width change */
|
||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.3);
|
||||
/* Visual feedback instead of width change */
|
||||
}
|
||||
|
||||
.column-resizer.dragging {
|
||||
@@ -36,12 +51,59 @@ html, body {
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Adjust container for flex layout */
|
||||
.container-fluid {
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background-color 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
/* Prevent navbar from shrinking */
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.navbar .container-fluid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: calc(100% - 56px);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
/* Override the hidden overflow for navbar */
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-primary) !important;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-brand i {
|
||||
font-size: 1.2rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Adjust container for flex layout */
|
||||
.container-fluid {
|
||||
flex: 1;
|
||||
/* Take remaining space after navbar */
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* Prevent container scrolling */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row {
|
||||
@@ -50,6 +112,8 @@ html, body {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent row scrolling */
|
||||
}
|
||||
|
||||
#sidebarPane {
|
||||
@@ -57,6 +121,9 @@ html, body {
|
||||
min-width: 150px;
|
||||
max-width: 40%;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent pane scrolling */
|
||||
}
|
||||
|
||||
#editorPane {
|
||||
@@ -64,25 +131,23 @@ html, body {
|
||||
min-width: 250px;
|
||||
max-width: 70%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#previewPane {
|
||||
flex: 1 1 40%;
|
||||
min-width: 250px;
|
||||
max-width: 70%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent pane scrolling */
|
||||
}
|
||||
|
||||
/* Sidebar - improved */
|
||||
.sidebar {
|
||||
background-color: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
/* Prevent sidebar container scrolling */
|
||||
}
|
||||
|
||||
.sidebar h6 {
|
||||
@@ -92,25 +157,27 @@ html, body {
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
/* Prevent header from shrinking */
|
||||
}
|
||||
|
||||
/* Collection selector - fixed height */
|
||||
.collection-selector {
|
||||
flex-shrink: 0;
|
||||
/* Prevent selector from shrinking */
|
||||
padding: 12px 10px;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
#fileTree {
|
||||
flex: 1;
|
||||
/* Take remaining space */
|
||||
overflow-y: auto;
|
||||
/* Enable vertical scrolling */
|
||||
overflow-x: hidden;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-primary) !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
min-height: 0;
|
||||
/* Important: allows flex child to shrink below content size */
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
@@ -135,28 +202,78 @@ html, body {
|
||||
|
||||
/* Preview Pane Styling */
|
||||
#previewPane {
|
||||
flex: 1 1 40%;
|
||||
min-width: 250px;
|
||||
max-width: 70%;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--bg-primary);
|
||||
border-left: 1px solid var(--border-color);
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
/* Enable vertical scrolling for preview pane */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#preview {
|
||||
padding: 20px;
|
||||
min-height: 100%;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
color: var(--text-primary);
|
||||
min-height: 100%;
|
||||
/* Ensure content fills at least the full height */
|
||||
}
|
||||
|
||||
#preview > p:first-child {
|
||||
#preview>p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#preview > h1:first-child,
|
||||
#preview > h2:first-child {
|
||||
#preview>h1:first-child,
|
||||
#preview>h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* View Mode Styles */
|
||||
body.view-mode #editorPane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.view-mode #resizer1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.view-mode #resizer2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.view-mode #previewPane {
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
body.view-mode #sidebarPane {
|
||||
display: flex;
|
||||
flex: 0 0 20%;
|
||||
height: 100%;
|
||||
/* Keep sidebar at 20% width in view mode */
|
||||
}
|
||||
|
||||
body.edit-mode #editorPane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body.edit-mode #resizer1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.edit-mode #resizer2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.edit-mode #previewPane {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
body.edit-mode #sidebarPane {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user