diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss index df445391a..522494cee 100644 --- a/src/components/status_action_buttons/action_button.scss +++ b/src/components/status_action_buttons/action_button.scss @@ -6,19 +6,24 @@ display: flex; align-items: baseline; align-items: center; - height: 1.5em; + border: 2px solid transparent; + + .chevron-popover { + .popover-trigger-button { + display: flex; + } + } .action-counter { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - margin-left: 1em; } .action-button-inner, .extra-button { - margin: -0.5em; padding: 0.5em; + z-index: 1; } .separator { @@ -26,27 +31,12 @@ align-self: stretch; width: 1px; background-color: var(--icon); - margin-left: 0.75em; - margin-right: 0.125em; - } - - &.-pin { - margin: calc(-2px - 0.25em); - padding: 0.25em; - border: 2px dashed var(--icon); - border-radius: var(--roundness); - grid-template-columns: minmax(max-content, 1fr) auto; - - .chevron-icon, - .extra-button, - .separator { - display: none; - } + margin: 0.5em 0; } .action-button-inner { display: grid; - grid-gap: 1em; + grid-gap: 0.125em; grid-template-columns: max-content; grid-auto-flow: column; grid-auto-columns: max-content; @@ -72,6 +62,32 @@ } } } + + &.-pin { + border: 2px dashed var(--icon); + border-radius: var(--roundness); + grid-template-columns: minmax(max-content, 1fr) auto; + + .action-button-inner { + opacity: 0.8; + padding-right: 0; + pointer-events: none; + } + + .chevron-icon, + .extra-button, + .separator { + display: none; + } + } + + &.-with-extra { + .action-button-inner, + .extra-button { + padding-left: 0.2em; + padding-right: 0.25em; + } + } } .action-button { @@ -106,7 +122,7 @@ &.-extra { .action-counter { justify-self: end; - margin-right: 1em; + margin-left: 1em; } .chevron-icon { diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue index cab055e64..f4738a7e6 100644 --- a/src/components/status_action_buttons/action_button.vue +++ b/src/components/status_action_buttons/action_button.vue @@ -54,7 +54,6 @@ @@ -71,6 +70,7 @@ /> diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss index 3bbcdeefb..72766673b 100644 --- a/src/components/status_action_buttons/status_action_buttons.scss +++ b/src/components/status_action_buttons/status_action_buttons.scss @@ -3,16 +3,19 @@ .StatusActionButtons { .quick-action-buttons { display: grid; - grid-template-columns: repeat(auto-fill, minmax(10%, 3em)); + margin-left: -0.5em; + grid-template-columns: repeat(auto-fill, minmax(3.5em, 10%)); grid-auto-flow: row dense; grid-auto-rows: 1fr; - grid-gap: 1.25em 0; + grid-gap: 0.5em 0.1em; margin-top: var(--status-margin); } .pin-action-button { - margin: -0.5em; + display: flex; + z-index: 1; padding: 0.5em; + margin: 0; } } // popover diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue index c1d0d9571..c45c2e592 100644 --- a/src/components/status_action_buttons/status_action_buttons.vue +++ b/src/components/status_action_buttons/status_action_buttons.vue @@ -1,11 +1,14 @@