dbwatcher 1.0.0 → 1.1.1

data/app/assets/stylesheets/dbwatcher/application.css

@@ -0,0 +1,423 @@
+/**
+ * DBWatcher Application Styles
+ * Compiled CSS for all components
+ * Generated at 2025-07-04 17:05:33 +0700
+ */
+
+/**
+ * DBWatcher Application Styles
+ * Main stylesheet that imports all components
+ */
+/**
+ * DBWatcher CSS Variables
+ * Core color scheme and layout dimensions
+ */
+:root {
+  /* Brand colors */
+  --navy-dark: #00285D;
+  --blue-light: #96C1E7;
+  --blue-medium: #6CADDF;
+  --gold-dark: #D4A11E;
+  --gold-light: #FFC758;
+  /* Layout dimensions for diagram container */
+  --header-height: 64px;
+  --tab-bar-height: 32px;
+  --toolbar-height: 56px;
+  --footer-height: 0px;
+  /* Gray scale */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f3f3;
+  --gray-200: #e8e8e8;
+  --gray-300: #d1d5db;
+  --gray-400: #c8c8c8;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  /* Border colors */
+  --border-light: #f0f0f0;
+  --border-medium: #e8e8e8;
+  --border-dark: #d1d5db;
+  /* Status colors */
+  --status-insert: #10b981;
+  --status-update: #6CADDF;
+  --status-delete: #ef4444;
+  --status-select: #6b7280;
+  /* Highlight colors */
+  --highlight-change: rgba(255, 199, 88, 0.3);
+  --highlight-new: rgba(16, 185, 129, 0.2);
+  --highlight-deleted: rgba(239, 68, 68, 0.2);
+}
+
+/**
+ * Base Styles
+ * Scrollbars, splitters, and utility styles
+ */
+/* Splitter */
+.splitter {
+  width: 4px;
+  background: var(--border-medium);
+  cursor: col-resize;
+}
+
+.splitter:hover {
+  background: var(--blue-medium);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-100);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--gray-400);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--blue-medium);
+}
+
+/**
+ * Compact Table Styles
+ * Core table styling for DBWatcher data tables
+ */
+.compact-table {
+  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+  font-size: 12px;
+  line-height: 1.2;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.compact-table th {
+  padding: 4px 8px;
+  font-weight: 500;
+  text-transform: none;
+  font-size: 11px;
+  background: var(--gray-100);
+  border-bottom: 2px solid var(--border-medium);
+  border-right: 1px solid var(--border-medium);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  text-align: left;
+  height: 32px;
+}
+
+/* Enhanced sticky header styling */
+.compact-table th.sticky-left-0 {
+  position: sticky;
+  left: 0;
+  z-index: 20;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
+}
+
+.compact-table th.sticky-left-1 {
+  position: sticky;
+  left: 60px;
+  /* Width of Index column */
+  z-index: 19;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
+}
+
+.compact-table th.sticky-left-2 {
+  position: sticky;
+  left: 108px;
+  /* Width of Index + Op columns (60px + 48px) */
+  z-index: 18;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
+}
+
+.compact-table td {
+  padding: 2px 8px;
+  border-right: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+/* Enhanced sticky cell styling */
+.compact-table td.sticky-left-0 {
+  position: sticky;
+  left: 0;
+  background: white;
+  z-index: 5;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
+}
+
+.compact-table td.sticky-left-1 {
+  position: sticky;
+  left: 60px;
+  /* Width of Index column */
+  background: white;
+  z-index: 4;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
+}
+
+.compact-table td.sticky-left-2 {
+  position: sticky;
+  left: 108px;
+  /* Width of Index + Op columns (60px + 48px) */
+  background: white;
+  z-index: 3;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
+}
+
+/* Special cell formatting */
+.compact-table td.highlight-change {
+  background-color: var(--highlight-change);
+}
+
+.compact-table td.highlight-new {
+  color: #047857;
+}
+
+.compact-table td.highlight-deleted {
+  color: #b91c1c;
+}
+
+/* Row styles */
+.compact-table tr:hover td:not(.sticky-left-0):not(.sticky-left-1):not(.sticky-left-2) {
+  background-color: rgba(243, 244, 246, 0.7);
+}
+
+.compact-table tr:hover td.sticky-left-0,
+.compact-table tr:hover td.sticky-left-1,
+.compact-table tr:hover td.sticky-left-2 {
+  background-color: var(--gray-50);
+}
+
+.compact-table tr.selected td:not(.sticky-left-0):not(.sticky-left-1):not(.sticky-left-2) {
+  background-color: rgba(230, 243, 255, 0.7);
+}
+
+.compact-table tr.selected td.sticky-left-0,
+.compact-table tr.selected td.sticky-left-1,
+.compact-table tr.selected td.sticky-left-2 {
+  background-color: #e6f3ff;
+}
+
+/* Smart column width distribution */
+.compact-table th,
+.compact-table td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Fixed widths for sticky columns only */
+.compact-table th:first-child,
+.compact-table td:first-child {
+  width: 60px;
+  min-width: 60px;
+  max-width: 60px;
+}
+
+.compact-table th:nth-child(2),
+.compact-table td:nth-child(2) {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  text-align: center;
+}
+
+.compact-table th:nth-child(3),
+.compact-table td:nth-child(3) {
+  width: 160px;
+  min-width: 160px;
+  max-width: 160px;
+  font-family: monospace;
+  font-size: 11px;
+}
+
+/* Font styling for specific column types */
+.compact-table .text-right {
+  font-family: monospace;
+}
+
+/* Highlight colors */
+.highlight-change {
+  background: var(--highlight-change);
+}
+
+.highlight-new {
+  background: var(--highlight-new);
+}
+
+.highlight-deleted {
+  background: var(--highlight-deleted);
+}
+
+/**
+ * Navigation Styles
+ * Sidebar, tabs, and navigation controls
+ */
+/* Sidebar styles */
+.sidebar-item {
+  font-size: 13px;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.sidebar-item:hover {
+  background: rgba(108, 173, 223, 0.1);
+  color: var(--blue-medium);
+}
+
+.sidebar-item.active {
+  background: var(--navy-dark);
+  color: white;
+}
+
+/* Tab styles */
+.tab-bar {
+  background: var(--gray-100);
+  border-bottom: 1px solid var(--border-medium);
+  display: flex;
+  align-items: center;
+  height: 32px;
+  font-size: 12px;
+}
+
+.tab-item {
+  padding: 0 16px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid var(--border-medium);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tab-item:hover {
+  background: var(--border-medium);
+}
+
+.tab-item.active {
+  background: white;
+  color: var(--navy-dark);
+  font-weight: 500;
+}
+
+/**
+ * Form Controls
+ * Input fields, selects, buttons
+ */
+/* Compact form controls */
+.compact-input {
+  padding: 3px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border-dark);
+  border-radius: 3px;
+}
+
+.compact-select {
+  padding: 3px 24px 3px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border-dark);
+  border-radius: 3px;
+  background-size: 16px;
+}
+
+.compact-button {
+  padding: 4px 12px;
+  font-size: 12px;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+/**
+ * Status Badges
+ * Operation and status indicators
+ */
+/* Status badges */
+.badge-insert {
+  background: var(--status-insert);
+  color: white;
+}
+
+.badge-update {
+  background: var(--status-update);
+  color: white;
+}
+
+.badge-delete {
+  background: var(--status-delete);
+  color: white;
+}
+
+.badge-select {
+  background: var(--status-select);
+  color: white;
+}
+
+.badge {
+  padding: 1px 6px;
+  font-size: 10px;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+}
+
+/**
+ * Diagram Component Styles
+ */
+.diagram-code-view {
+  position: relative;
+  height: 100%;
+}
+
+.diagram-code-view pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  tab-size: 2;
+}
+
+.diagram-code-view pre.large-content {
+  max-height: calc(100vh - 220px);
+  overflow-y: auto;
+  border-width: 1px;
+  border-color: theme("colors.gray.300");
+}
+
+[x-ref="diagramContainer"] .mermaid {
+  overflow: auto;
+  max-height: calc(100vh - 180px);
+}
+
+pre[x-ref="codeContainer"]::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+pre[x-ref="codeContainer"]::-webkit-scrollbar-track {
+  background: theme("colors.gray.100");
+  border-radius: 4px;
+}
+
+pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb {
+  background: theme("colors.gray.400");
+  border-radius: 4px;
+}
+
+pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
+  background: theme("colors.gray.500");
+}

data/app/assets/stylesheets/dbwatcher/application.scss

@@ -0,0 +1,15 @@
+/**
+ * DBWatcher Application Styles
+ * Main stylesheet that imports all components
+ */
+
+// Core styles
+@import "core/variables";
+@import "core/base";
+
+// Component styles
+@import "components/compact_table";
+@import "components/navigation";
+@import "components/forms";
+@import "components/badges";
+@import "components/diagrams";

data/app/assets/stylesheets/dbwatcher/components/_badges.scss

@@ -0,0 +1,38 @@
+/**
+ * Status Badges
+ * Operation and status indicators
+ */
+
+/* Status badges */
+.badge-insert { 
+  background: var(--status-insert); 
+  color: white; 
+}
+
+.badge-update { 
+  background: var(--status-update); 
+  color: white; 
+}
+
+.badge-delete { 
+  background: var(--status-delete); 
+  color: white; 
+}
+
+.badge-select { 
+  background: var(--status-select); 
+  color: white; 
+}
+
+.badge {
+  padding: 1px 6px;
+  font-size: 10px;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+}

data/app/assets/stylesheets/dbwatcher/components/_compact_table.scss

@@ -0,0 +1,162 @@
+/**
+ * Compact Table Styles
+ * Core table styling for DBWatcher data tables
+ */
+
+.compact-table {
+  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+  font-size: 12px;
+  line-height: 1.2;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.compact-table th {
+  padding: 4px 8px;
+  font-weight: 500;
+  text-transform: none;
+  font-size: 11px;
+  background: var(--gray-100);
+  border-bottom: 2px solid var(--border-medium);
+  border-right: 1px solid var(--border-medium);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  text-align: left;
+  height: 32px;
+}
+
+/* Enhanced sticky header styling */
+.compact-table th.sticky-left-0 {
+  position: sticky;
+  left: 0;
+  z-index: 20;
+  box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
+}
+
+.compact-table th.sticky-left-1 {
+  position: sticky;
+  left: 60px; /* Width of Index column */
+  z-index: 19;
+  box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
+}
+
+.compact-table th.sticky-left-2 {
+  position: sticky;
+  left: 108px; /* Width of Index + Op columns (60px + 48px) */
+  z-index: 18;
+  box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
+}
+
+.compact-table td {
+  padding: 2px 8px;
+  border-right: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+/* Enhanced sticky cell styling */
+.compact-table td.sticky-left-0 {
+  position: sticky;
+  left: 0;
+  background: white;
+  z-index: 5;
+  box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
+}
+
+.compact-table td.sticky-left-1 {
+  position: sticky;
+  left: 60px; /* Width of Index column */
+  background: white;
+  z-index: 4;
+  box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
+}
+
+.compact-table td.sticky-left-2 {
+  position: sticky;
+  left: 108px; /* Width of Index + Op columns (60px + 48px) */
+  background: white;
+  z-index: 3;
+  box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
+}
+
+/* Special cell formatting */
+.compact-table td.highlight-change {
+  background-color: var(--highlight-change);
+}
+
+.compact-table td.highlight-new {
+  color: #047857;
+}
+
+.compact-table td.highlight-deleted {
+  color: #b91c1c;
+}
+
+/* Row styles */
+.compact-table tr:hover td:not(.sticky-left-0):not(.sticky-left-1):not(.sticky-left-2) {
+  background-color: rgba(243, 244, 246, 0.7);
+}
+
+.compact-table tr:hover td.sticky-left-0,
+.compact-table tr:hover td.sticky-left-1,
+.compact-table tr:hover td.sticky-left-2 {
+  background-color: var(--gray-50);
+}
+
+.compact-table tr.selected td:not(.sticky-left-0):not(.sticky-left-1):not(.sticky-left-2) {
+  background-color: rgba(230, 243, 255, 0.7);
+}
+
+.compact-table tr.selected td.sticky-left-0,
+.compact-table tr.selected td.sticky-left-1,
+.compact-table tr.selected td.sticky-left-2 {
+  background-color: #e6f3ff;
+}
+
+/* Smart column width distribution */
+.compact-table th,
+.compact-table td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Fixed widths for sticky columns only */
+.compact-table th:first-child,
+.compact-table td:first-child {
+  width: 60px;
+  min-width: 60px;
+  max-width: 60px;
+}
+
+.compact-table th:nth-child(2),
+.compact-table td:nth-child(2) {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  text-align: center;
+}
+
+.compact-table th:nth-child(3),
+.compact-table td:nth-child(3) {
+  width: 160px;
+  min-width: 160px;
+  max-width: 160px;
+  font-family: monospace;
+  font-size: 11px;
+}
+
+/* Font styling for specific column types */
+.compact-table .text-right {
+  font-family: monospace;
+}
+
+/* Highlight colors */
+.highlight-change { background: var(--highlight-change); }
+.highlight-new { background: var(--highlight-new); }
+.highlight-deleted { background: var(--highlight-deleted); }

data/app/assets/stylesheets/dbwatcher/components/_diagrams.scss

@@ -0,0 +1,51 @@
+/**
+ * Diagram Component Styles
+ */
+
+// Code view styles
+.diagram-code-view {
+  position: relative;
+  height: 100%;
+
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    tab-size: 2;
+
+    &.large-content {
+      max-height: calc(100vh - 220px);
+      overflow-y: auto;
+      border-width: 1px;
+      border-color: theme('colors.gray.300');
+    }
+  }
+}
+
+// Mermaid diagram container
+[x-ref="diagramContainer"] {
+  .mermaid {
+    overflow: auto;
+    max-height: calc(100vh - 180px);
+  }
+}
+
+// Code container scrollbar styling
+pre[x-ref="codeContainer"] {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: theme('colors.gray.100');
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: theme('colors.gray.400');
+    border-radius: 4px;
+
+    &:hover {
+      background: theme('colors.gray.500');
+    }
+  }
+}

data/app/assets/stylesheets/dbwatcher/components/_forms.scss

@@ -0,0 +1,27 @@
+/**
+ * Form Controls
+ * Input fields, selects, buttons
+ */
+
+/* Compact form controls */
+.compact-input {
+  padding: 3px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border-dark);
+  border-radius: 3px;
+}
+
+.compact-select {
+  padding: 3px 24px 3px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border-dark);
+  border-radius: 3px;
+  background-size: 16px;
+}
+
+.compact-button {
+  padding: 4px 12px;
+  font-size: 12px;
+  border-radius: 3px;
+  font-weight: 500;
+}