Improve outline

* Add shadow to section item menu button * Improve spacing of draggable placeholders REDMINE-20217
codevise · Sep 27, 2023 · 45eaf7d · 45eaf7d
1 parent fea2c6f
commit 45eaf7d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/entry_types/scrolled/package/src/editor/views/ChapterItemView.module.css b/entry_types/scrolled/package/src/editor/views/ChapterItemView.module.css
@@ -66,6 +66,15 @@
   margin-top: 10px;
 }
 
+.sections > :global(.sortable-placeholder) {
+  margin-top: 25px;
+  margin-bottom: 22px;
+}
+
+.root:first-child .sections > li:first-child + :global(.sortable-placeholder) {
+  margin-top: 16px;
+}
+
 .creating .creatingIndicator     { display: block; }
 .destroying .destroyingIndicator { display: block; }
 .failed .failedIndicator         { display: block; }

diff --git a/entry_types/scrolled/package/src/editor/views/EntryOutlineView.module.css b/entry_types/scrolled/package/src/editor/views/EntryOutlineView.module.css
@@ -2,9 +2,10 @@
 
 .chapters {}
 
-.chapters :global(.sortable-placeholder) {
-  margin-bottom: 10px;
+.chapters > :global(.sortable-placeholder) {
+  margin-bottom: 12px;
   padding: 0 10px 10px 10px;
+  border-radius: rounded(lg);
 }
 
 .addChapter {

diff --git a/entry_types/scrolled/package/src/editor/views/SectionItemView.module.css b/entry_types/scrolled/package/src/editor/views/SectionItemView.module.css
@@ -37,12 +37,12 @@
 
 .dragHandle {
   composes: dragHandle from './outline.module.css';
-  color: #fff;
+  color: var(--ui-on-primary-color);
   text-shadow: 0 0 2px #000;
 }
 
 .invert .dragHandle {
-  color: #000;
+  color: var(--ui-primary-color);
   text-shadow: 0 0 2px #fff;
 }
 
@@ -60,6 +60,7 @@
 .dropDownButton button {
   border: 0 !important;
   color: var(--ui-on-primary-color) !important;
+  text-shadow: 0 0 2px #000;
   box-shadow: none !important;
   opacity: 0.3;
   transition: opacity 0.1s ease;
@@ -68,6 +69,7 @@
 
 .invert .dropDownButton button {
   color: var(--ui-primary-color) !important;
+  text-shadow: 0 0 2px #fff;
 }
 
 .inner:hover .dropDownButton button,