Drop glyphicons and replace it by already existing icons in icons.css (…

…#1420)

app/client/components/ColumnFilters.css

@@ -66,15 +66,6 @@
   margin-right: 4px;
 }
 
-.g-glyphicon-tristate {
-  position: absolute;
-  top: 4px;
-  left: 3px;
-  width: 5px;
-  height: 5px;
-  background: #606060;
-}
-
 .badge-inv {
   background-color: #ddd;
   color: #666;

app/client/components/GristDoc.ts

@@ -11,7 +11,6 @@ import {CodeEditorPanel} from 'app/client/components/CodeEditorPanel';
 import * as commands from 'app/client/components/commands';
 import {CursorMonitor, ViewCursorPos} from "app/client/components/CursorMonitor";
 import {DocComm} from 'app/client/components/DocComm';
-import * as DocConfigTab from 'app/client/components/DocConfigTab';
 import {Drafts} from "app/client/components/Drafts";
 import {EditorMonitor} from "app/client/components/EditorMonitor";
 import {buildDefaultFormLayout} from 'app/client/components/Forms/FormView';
@@ -537,8 +536,6 @@ export class GristDoc extends DisposableWithEvents {
 
     this._handleTriggerQueueOverflowMessage();
 
-    this.autoDispose(DocConfigTab.create({gristDoc: this}));
-
     this.rightPanelTool = Computed.create(this, (use) => this._getToolContent(use(this._rightPanelTool)));
 
     this.comparison = options.comparison || null;

app/client/components/RecordLayoutEditor.js

@@ -125,7 +125,7 @@ RecordLayoutEditor.prototype.buildFinishButtons = function() {
 
 RecordLayoutEditor.prototype.buildLeafDom = function() {
   return dom('div.layout_grabbable.g_record_layout_editing',
-    dom('div.g_record_delete_field.glyphicon.glyphicon-eye-close',
+    cssIconEyeClose(
       dom.on('mousedown', (ev) => ev.stopPropagation()),
       dom.on('click', (ev, elem) => {
         ev.preventDefault();
@@ -151,4 +151,18 @@ const cssCollapseIcon = styled(icon, `
   margin: -3px -2px -2px 2px;
 `);
 
+const cssIconEyeClose = styled('div.g_record_delete_field', `
+  &::before {
+    display: block;
+    background-color: var(--grist-color-dark-text);
+    content: ' ';
+    mask-image: var(--icon-EyeHide);
+    width: 14px;
+    height: 14px;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+  }
+`
+);
+
 module.exports = RecordLayoutEditor;

app/client/declarations.d.ts

@@ -2,7 +2,6 @@ declare module "app/client/components/AceEditor";
 declare module "app/client/components/Clipboard";
 declare module "app/client/components/CodeEditorPanel";
 declare module "app/client/components/DetailView";
-declare module "app/client/components/DocConfigTab";
 declare module "app/client/components/GridView";
 declare module "app/client/lib/Mousetrap";
 declare module "app/client/lib/browserGlobals";

app/client/lib/koForm.css

@@ -185,6 +185,24 @@ div:hover > .kf_tooltip {
   color: #777777;
 }
 
+.kf_draggable__icon::before {
+  display: block;
+  background-color: var(--grist-theme-control-secondary-fg, var(--grist-color-slate));
+  content: ' ';
+  width: 14px;
+  height: 14px;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
+
+.kf_draggable__icon.icon-dragdrop::before {
+  mask-image: var(--icon-DragDrop);
+}
+
+.kf_draggable__icon.icon-remove::before {
+  mask-image: var(--icon-Remove);
+}
+
 .kf_draggable_content {
   display: inline-block;
   margin-left: 2px;

app/client/lib/koForm.js

@@ -329,20 +329,6 @@ exports.selectSpinner = function(valueObservable, optionObservable) {
   return genSpinner(valueObservable, getNewValue, shouldDisable);
 };
 
-/**
- * Creates an alignment selector linked to `valueObservable`.
- */
-exports.alignmentSelector = function(valueObservable) {
-  return this.buttonSelect(valueObservable,
-    this.optionButton("left", dom('span.glyphicon.glyphicon-align-left'),
-      dom.testId('koForm_alignLeft')),
-    this.optionButton("center", dom('span.glyphicon.glyphicon-align-center'),
-      dom.testId('koForm_alignCenter')),
-    this.optionButton("right", dom('span.glyphicon.glyphicon-align-right'),
-      dom.testId('koForm_alignRight'))
-  );
-};
-
 /**
  * Label with a collapser triangle in front, which may be clicked to toggle `isCollapsedObs`
  * observable.
@@ -479,12 +465,12 @@ exports.draggableList = function(contentArray, itemCreateFunc, options) {
           kd.cssClass(options.itemClass),
           (options.drag_indicator ?
            (typeof options.drag_indicator === 'boolean' ?
-            dom('span.kf_drag_indicator.glyphicon.glyphicon-option-vertical') :
+            dom('span.kf_drag_indicator.kf_draggable__icon.icon-dragdrop') :
             options.drag_indicator()
            ) : null),
           kd.domData('model', item),
           kd.maybe(removeFunc !== undefined && options.removeButton, function() {
-            return dom('span.drag_delete.glyphicon.glyphicon-remove',
+            return dom('span.drag_delete.kf_draggable__icon.icon-remove',
               dom.on('click', function() {
                 removeFunc(item)
                 .catch(function(err) {