Change modifier selector to pills (#3598)

* Use pills for modifier selector
* Fix caption default modifier

* Increase clickable area for criterion remove

If the area becomes too large, we can use half margin half padding.
Reduces the amount of pixel hunting required to click.

* Use pill-styled buttons

ui/v2.5/src/components/List/CriterionEditor.tsx

@@ -1,6 +1,6 @@
 import cloneDeep from "lodash-es/cloneDeep";
 import React, { useCallback, useMemo } from "react";
-import { Form } from "react-bootstrap";
+import { Button, Form } from "react-bootstrap";
 import { CriterionModifier } from "src/core/generated-graphql";
 import {
   DurationCriterion,
@@ -40,6 +40,7 @@ import { OptionsListFilter } from "./Filters/OptionsListFilter";
 import { PathFilter } from "./Filters/PathFilter";
 import { PhashCriterion } from "src/models/list-filter/criteria/phash";
 import { PhashFilter } from "./Filters/PhashFilter";
+import cx from "classnames";
 
 interface IGenericCriterionEditor {
   criterion: Criterion<CriterionValue>;
@@ -55,9 +56,9 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
   const { options, modifierOptions } = criterion.criterionOption;
 
   const onChangedModifierSelect = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
+    (m: CriterionModifier) => {
       const newCriterion = cloneDeep(criterion);
-      newCriterion.modifier = event.target.value as CriterionModifier;
+      newCriterion.modifier = m;
       setCriterion(newCriterion);
     },
     [criterion, setCriterion]
@@ -69,18 +70,21 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
     }
 
     return (
-      <Form.Control
-        as="select"
-        onChange={onChangedModifierSelect}
-        value={criterion.modifier}
-        className="btn-secondary modifier-selector"
-      >
+      <Form.Group className="modifier-options">
         {modifierOptions.map((c) => (
-          <option key={c.value} value={c.value}>
+          <Button
+            className={cx("modifier-option", {
+              selected: criterion.modifier === c.value,
+            })}
+            key={c.value}
+            onClick={() =>
+              onChangedModifierSelect(c.value as CriterionModifier)
+            }
+          >
             {c.label ? intl.formatMessage({ id: c.label }) : ""}
-          </option>
+          </Button>
         ))}
-      </Form.Control>
+      </Form.Group>
     );
   }, [modifierOptions, onChangedModifierSelect, criterion.modifier, intl]);
 

ui/v2.5/src/components/List/styles.scss

@@ -183,11 +183,33 @@ input[type="range"].zoom-slider {
   }
 }
 
-.modifier-selector {
-  margin-bottom: 1rem;
+.modifier-options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
 
-  // to accommodate for caret
-  padding-right: 2rem;
+.modifier-options .modifier-option {
+  background-color: $secondary;
+  border: none;
+  border-radius: 10rem;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 100%;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+  margin-right: 0.25rem;
+  padding: 0.25em 0.6em;
+  text-align: center;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  vertical-align: baseline;
+  white-space: nowrap;
+
+  &.selected {
+    background-color: $primary;
+  }
 }
 
 .filter-tags .clear-all-button {

ui/v2.5/src/index.scss

@@ -375,9 +375,8 @@ div.dropdown-menu {
     color: $dark-text;
     font-size: 12px;
     line-height: 1rem;
-    margin-left: 0.5rem;
     opacity: 0.5;
-    padding: 0;
+    padding: 0 0 0 0.5rem;
     position: relative;
 
     &:active,

ui/v2.5/src/models/list-filter/criteria/captions.ts

@@ -17,6 +17,7 @@ class CaptionsCriterionOptionType extends CriterionOption {
         CriterionModifier.IsNull,
         CriterionModifier.NotNull,
       ],
+      defaultModifier: CriterionModifier.Includes,
       options: languageStrings,
     });
   }