From 4e68ee1b00926e67bc06dc798a62dfb07b0907d1 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 28 Jan 2022 01:50:00 +0300
Subject: [PATCH] align 'Applies-to' and actions

* remove the label
* use same height for inputs
* show up/down icons as triangles correctly
* remove extra margin on the right
---
 edit.html                |  2 +-
 edit/edit.css            | 42 +++++++++++++++++++---------------------
 edit/sections-editor.js  |  1 -
 global.css               | 12 +++++++-----
 js/dlg/config-dialog.css |  4 ++--
 5 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/edit.html b/edit.html
index 8907cd5b..4187c37f 100644
--- a/edit.html
+++ b/edit.html
@@ -102,7 +102,7 @@
         </p>
         <label i18n-text="sectionCode" class="code-label"></label>
         <div class="applies-to">
-          <label i18n-text="appliesLabel">
+          <label i18n-text="appliesLabel" data-cmd="note" i18n-title="appliesHelp">
             <a class="svg-inline-wrapper applies-to-help" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
diff --git a/edit/edit.css b/edit/edit.css
index 28011872..463e938a 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -191,9 +191,6 @@ label {
 #colorpicker-settings.svg-inline-wrapper {
   margin: -2px 0 0 .1rem;
 }
-.svg-inline-wrapper.applies-to-help {
-  margin: 0 0 0 .25rem;
-}
 .aligned .svg-inline-wrapper {
   margin: -2px 0 0 .3rem;
 }
@@ -475,19 +472,20 @@ input:invalid {
 .section.removed .CodeMirror {
   display: none;
 }
+.move-section-down:after,
 .move-section-up:after {
   content: "";
   display: block;
-  border-style: solid;
-  border-width: 0 .3em .5em .3em;
-  border-color: transparent transparent currentColor transparent;
+  border: var(--side) solid transparent;
+  --side: .4em;
+}
+.move-section-up:after {
+  border-bottom: calc(var(--side) * 1.3) solid currentColor;
+  margin: -50% 0 0 0;
 }
 .move-section-down:after {
-  content: "";
-  display: block;
-  border-style: solid;
-  border-width: .5em .3em 0 .3em;
-  border-color: currentColor transparent transparent transparent;
+  border-top: calc(var(--side) * 1.3) solid currentColor;
+  margin: 0 0 -60% 0;
 }
 /* code */
 .code {
@@ -578,13 +576,12 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   background-color: #f002;
   border-color: #f008;
 }
-.applies-to label {
-  display: flex;
+[i18n-text="appliesLabel"] {
+  font-size: 0;
   padding: 0;
-  height: 22px;
-  align-items: center;
-  margin: 0 .2em 0 0;
-  white-space: nowrap;
+  margin-left: -24px;
+  position: absolute;
+  line-height: var(--input-height);
 }
 .applies-to ul {
   flex: auto;
@@ -597,16 +594,17 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   flex-wrap: wrap;
   list-style-type: none;
   align-items: center;
+  margin-bottom: .5em;
 }
 .applies-to li.applies-to-everything {
   align-items: unset;
-  line-height: 22px;
+  line-height: var(--input-height);
 }
 .applies-to li > input {
   min-height: 1.4rem;
 }
-.applies-to li:not(.applies-to-everything) > * {
-  margin: 0 .2rem .5rem 0;
+.applies-to .select-resizer {
+  margin-right: .5em;
 }
 .applies-to li .add-applies-to:first-child {
   margin-left: 1rem;
@@ -625,8 +623,8 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 .add-applies-to,
 .remove-applies-to {
   font-size: 0;
-  height: 22px;
-  width: 22px;
+  height: var(--input-height);
+  width: var(--input-height);
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index c77be6df..b97506be 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -613,7 +613,6 @@ function SectionsEditor() {
   /** @param {EditorSection} section */
   function registerEvents(section) {
     const {el, cm} = section;
-    $('.applies-to-help', el).onclick = () => helpPopup.show(t('appliesLabel'), t('appliesHelp'));
     $('.remove-section', el).onclick = () => removeSection(section);
     $('.add-section', el).onclick = () => insertSectionAfter(undefined, section);
     $('.clone-section', el).onclick = () => insertSectionAfter(section.getModel(), section);
diff --git a/global.css b/global.css
index e6c9229a..745d8f2c 100644
--- a/global.css
+++ b/global.css
@@ -6,6 +6,7 @@ html#stylus #header *:not(#\1transition-suppressor) {
 }
 :root {
   --family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
+  --input-height: 22px;
 }
 body {
   font: normal 12px var(--family);
@@ -71,9 +72,9 @@ input:not([type]),
 input[type=search] {
   background: #fff;
   color: #000;
-  height: 22px;
-  min-height: 22px!important;
-  line-height: 22px;
+  height: var(--input-height);
+  min-height: var(--input-height)!important;
+  line-height: var(--input-height);
   padding: 0 3px;
   border: 1px solid hsl(0, 0%, 66%);
 }
@@ -164,7 +165,8 @@ label {
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
-  height: 22px;
+  box-sizing: content-box;
+  height: var(--input-height);
   font: inherit;
   color: #000;
   background-color: transparent;
@@ -371,7 +373,7 @@ body.resizing-v > * {
 
   .firefox select {
     padding: 0 20px 0 2px;
-    line-height: 22px!important;
+    line-height: var(--input-height)!important;
   }
 
   svg {
diff --git a/js/dlg/config-dialog.css b/js/dlg/config-dialog.css
index 7464e30c..a2932437 100644
--- a/js/dlg/config-dialog.css
+++ b/js/dlg/config-dialog.css
@@ -67,7 +67,7 @@
 .config-body .onoffswitch {
   width: var(--onoffswitch-width);
   margin: 0;
-  height: 22px;
+  height: var(--input-height);
   box-sizing: border-box;
   vertical-align: middle;
 }
@@ -112,7 +112,7 @@
  }
 
 .config-number span, .config-range span {
-  line-height: 22px;
+  line-height: var(--input-height);
 }
 
 .config-body label:not(.nondefault) .config-reset-icon {