@vcmap/ui 6.3.11 → 6.3.13

package/src/application/attributionsHelper.js

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
 import { ObliqueMap } from '@vcmap/core';
 
 /**
@@ -16,6 +16,14 @@ import { ObliqueMap } from '@vcmap/core';
  * @property {AttributionOptions|Array<AttributionOptions>} attributions - attributions of a map, layer or oblique collection
  */
 
+/**
+ * @typedef {Object} Attributions
+ * @property {import("vue").UnwrapRef<Array<AttributionEntry>>} entries - reactive array of attribution entries
+ * @property {function(import("@vcmap/core").VcsMap, string|import('../pluginHelper.js').vcsAppSymbol): function():void} registerMap - function to register a map and its layer collection for an owner, returns a function to unregister it
+ * @property {function(string|import('../pluginHelper.js').vcsAppSymbol):void} removeOwner - unregister all maps registered by an owner
+ * @property {function():void} destroy - function to clear all listeners and clean up attributions
+ */
+
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
@@ -64,17 +72,17 @@ export function mergeAttributions(entries) {
  * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
  * Returns a destroy function to clear listeners.
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").UnwrapRef<Array<AttributionEntry>>, destroy: function():void}}
+ * @returns {Attributions}
  */
 export function getAttributions(app) {
   /**
    * @type {import("vue").UnwrapRef<Array<AttributionEntry>>}
    */
   const entries = reactive([]);
-  /**
-   * @type {function():void}
-   */
-  let obliqueListener = () => {};
+  /** @type {Map<import("@vcmap/core").VcsMap, { collection: import("@vcmap/core").LayerCollection, registrations: Map<function():void, string|import('../pluginHelper.js').vcsAppSymbol>, removeListeners: Array<function():void> }>} */
+  const registeredMaps = new Map();
+  /** @type {Map<import("@vcmap/core").ObliqueMap, function():void>} */
+  const obliqueListeners = new Map();
 
   /**
    * Adds an entry for an object using a combination of the object's className and name as key.
@@ -99,73 +107,123 @@ export function getAttributions(app) {
     }
   }
 
-  /**
-   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
-   */
-  function removeAttributions(object) {
-    const idx = entries.findIndex(
-      (e) => e.key === `${object.className}_${object.name}`,
-    );
-    if (idx >= 0) {
-      entries.splice(idx, 1);
+  function updateAttributions() {
+    entries.splice(0);
+    /** @type {Map<import("@vcmap/core").VcsMap, import("@vcmap/core").LayerCollection>} */
+    const visibleMaps = new Map();
+    if (app.maps.activeMap) {
+      visibleMaps.set(app.maps.activeMap, app.maps.activeMap.layerCollection);
     }
+    if (app.overviewMap.active) {
+      const overviewMap = app.overviewMap.map;
+      visibleMaps.set(overviewMap, overviewMap.layerCollection);
+    }
+    registeredMaps.forEach(({ collection }, map) => {
+      if (map.active) {
+        visibleMaps.set(map, collection);
+      }
+    });
+    obliqueListeners.forEach((removeListener, map) => {
+      if (!visibleMaps.has(map)) {
+        removeListener();
+        obliqueListeners.delete(map);
+      }
+    });
+    visibleMaps.forEach((collection, map) => {
+      if (map.active) {
+        addAttributions(map);
+      }
+      [...collection].forEach((layer) => {
+        if (layer.active && layer.isSupported(map)) {
+          addAttributions(layer);
+        }
+      });
+      if (map instanceof ObliqueMap) {
+        if (map.collection) {
+          addAttributions(map.collection);
+        }
+        if (!obliqueListeners.has(map)) {
+          obliqueListeners.set(
+            map,
+            map.collectionChanged.addEventListener(updateAttributions),
+          );
+        }
+      }
+    });
   }
 
+  const listeners = [
+    app.maps.mapActivated.addEventListener(updateAttributions),
+    app.layers.stateChanged.addEventListener(updateAttributions),
+    app.layers.added.addEventListener(updateAttributions),
+    app.layers.removed.addEventListener(updateAttributions),
+    app.maps.removed.addEventListener(updateAttributions),
+    watch(app.overviewMap.currentState, updateAttributions),
+  ];
+
+  updateAttributions();
+
   /**
-   * adds or removes a AttributionEntry for layers or maps
-   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer} object
+   * @param {import("@vcmap/core").VcsMap} map
+   * @param {string|import('../pluginHelper.js').vcsAppSymbol} owner
+   * @returns {function():void}
    */
-  function syncAttributions(object) {
-    if (object?.properties?.attributions === undefined) {
-      return;
-    }
-    if (object.active) {
-      addAttributions(object);
-    } else {
-      removeAttributions(object);
+  function registerMap(map, owner) {
+    if (!registeredMaps.has(map)) {
+      registeredMaps.set(map, {
+        collection: map.layerCollection,
+        registrations: new Map(),
+        removeListeners: [
+          map.stateChanged.addEventListener(updateAttributions),
+          map.layerCollection.added.addEventListener(updateAttributions),
+          map.layerCollection.removed.addEventListener(updateAttributions),
+        ],
+      });
     }
+    const unregister = () => {
+      const current = registeredMaps.get(map);
+      if (!current?.registrations.delete(unregister)) {
+        return;
+      }
+      if (current.registrations.size === 0) {
+        current.removeListeners.forEach((removeListener) => {
+          removeListener();
+        });
+        registeredMaps.delete(map);
+      }
+      updateAttributions();
+    };
+    registeredMaps.get(map).registrations.set(unregister, owner);
+    updateAttributions();
+    return unregister;
   }
 
   /**
-   *
-   * @param {import("@vcmap/core").VcsMap} map
+   * @param {string|import('../pluginHelper.js').vcsAppSymbol} owner
    */
-  function initAttributions(map) {
-    if (!map) {
-      return;
-    }
-    obliqueListener();
-    entries.splice(0);
-    syncAttributions(map);
-    [...map.layerCollection].forEach((layer) => {
-      if (layer.isSupported(map)) {
-        syncAttributions(layer);
-      }
+  function removeOwner(owner) {
+    registeredMaps.forEach(({ registrations }) => {
+      registrations.forEach((registrationOwner, unregister) => {
+        if (registrationOwner === owner) {
+          unregister();
+        }
+      });
     });
-    if (map instanceof ObliqueMap) {
-      addAttributions(map.collection);
-      obliqueListener = map.collectionChanged.addEventListener(
-        (obliqueCollection) => {
-          [...app.obliqueCollections].forEach(removeAttributions);
-          addAttributions(obliqueCollection);
-        },
-      );
-    }
   }
 
-  const listeners = [
-    app.maps.mapActivated.addEventListener(initAttributions),
-    app.layers.stateChanged.addEventListener(syncAttributions),
-    app.layers.removed.addEventListener(removeAttributions),
-    app.maps.removed.addEventListener(removeAttributions),
-  ];
-
-  initAttributions(app.maps.activeMap);
-
   const destroy = () => {
     listeners.forEach((cb) => cb());
-    obliqueListener();
+    obliqueListeners.forEach((removeListener) => {
+      removeListener();
+    });
+    obliqueListeners.clear();
+    registeredMaps.forEach(({ removeListeners }) => {
+      removeListeners.forEach((removeListener) => {
+        removeListener();
+      });
+    });
+    registeredMaps.clear();
   };
 
-  return { entries, destroy };
+  return { entries, registerMap, removeOwner, destroy };
 }

package/src/components/lists/VcsGroupedList.vue

@@ -35,6 +35,7 @@
    * @vue-prop {boolean} [singleSelect=false]
    * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [modelValue=[]] - the initial items to be selected.
    * @vue-prop {boolean} [searchable=false] - if this list can have its items searched.
+   * @vue-prop {boolean} [stickySearchbar=false] - Keeps the searchbar at the top of the scroll container.
    * @vue-prop {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    */
@@ -73,6 +74,10 @@
       type: Boolean,
       default: false,
     },
+    stickySearchbar: {
+      type: Boolean,
+      default: false,
+    },
     searchbarPlaceholder: {
       type: String,
       default: undefined,
@@ -142,7 +147,10 @@
 </script>
 
 <template>
-  <div class="vcs-grouped-list">
+  <div
+    class="vcs-grouped-list"
+    :class="{ 'sticky-searchbar': stickySearchbar && searchable }"
+  >
     <VcsTreeviewSearchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
@@ -178,6 +186,26 @@
 </template>
 
 <style scoped lang="scss">
+  .vcs-grouped-list {
+    display: block;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    scrollbar-gutter: stable;
+  }
+
+  .vcs-grouped-list.sticky-searchbar {
+    --searchbar-height: calc(var(--v-vcs-font-size) * 2 + 18px);
+    margin-top: var(--searchbar-height);
+
+    > .vcs-treeview-searchbar {
+      width: 100%;
+      position: absolute !important;
+      margin-top: calc(var(--searchbar-height) * -1);
+      z-index: 2;
+    }
+  }
+
   .panels .vcs-expansion-panel:not(:last-child) {
     border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
   }

package/src/components/lists/VcsList.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="d-contents vcs-list">
+  <div
+    class="vcs-list"
+    :class="{
+      'sticky-searchbar': stickySearchbar && searchable,
+    }"
+  >
     <vcs-treeview-searchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
@@ -113,6 +118,7 @@
    * @vue-prop {boolean} [singleSelect=false]
    * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [modelValue=[]] - the initial items to be selected.
    * @vue-prop {boolean} [searchable=false] - if this list can have its items searched.
+   * @vue-prop {boolean} [stickySearchbar=false] - Keeps the searchbar at the top of the scroll container.
    * @vue-prop {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    * @vue-prop {boolean} [showTitle=true] - show the title component
@@ -162,6 +168,10 @@
       type: Boolean,
       default: false,
     },
+    stickySearchbar: {
+      type: Boolean,
+      default: false,
+    },
     customFilter: {
       type: Function,
       default: undefined,
@@ -282,6 +292,30 @@
 </script>
 
 <style lang="scss" scoped>
+  .vcs-list {
+    display: block;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    scrollbar-gutter: stable;
+  }
+
+  .vcs-list > .v-list {
+    overflow: visible;
+  }
+
+  .vcs-list.sticky-searchbar {
+    --searchbar-height: calc(var(--v-vcs-font-size) * 2 + 18px);
+    margin-top: var(--searchbar-height);
+
+    > .vcs-treeview-searchbar {
+      width: 100%;
+      position: absolute !important;
+      margin-top: calc(var(--searchbar-height) * -1);
+      z-index: 2;
+    }
+  }
+
   :deep(.v-list) {
     .v-list-item__lighten_even:nth-child(even) {
       background-color: rgb(var(--v-theme-base-lighten-4));
@@ -339,7 +373,4 @@
       }
     }
   }
-  .d-contents {
-    display: contents;
-  }
 </style>

package/src/components/lists/VcsList.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
     items: unknown[];
     selectable: boolean;
     actions: unknown[];
+    stickySearchbar: boolean;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
@@ -24,6 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         readonly items?: unknown[] | undefined;
         readonly selectable?: boolean | undefined;
         readonly actions?: unknown[] | undefined;
+        readonly stickySearchbar?: boolean | undefined;
         readonly singleSelect?: boolean | undefined;
         readonly searchable?: boolean | undefined;
         readonly showTitle?: boolean | undefined;

package/src/components/lists/VcsTreeview.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="vcs-treeview">
+  <div
+    class="vcs-treeview"
+    :class="{ 'sticky-searchbar': stickySearchbar && showSearchbar }"
+  >
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
@@ -12,37 +15,39 @@
         <slot name="search-append" v-bind="searchAppend" />
       </template>
     </VcsTreeviewSearchbar>
-    <div
-      v-for="(item, index) in items"
-      :key="item.name"
-      class="vcs-treeitem"
-      :class="{ 'mobile-spacing': xs }"
-    >
-      <VcsTreeNode
-        class="root-node"
-        :class="{
-          'vcs-draggable-item': isDraggable,
-        }"
-        :item="item"
-        :path="[index]"
-        :search="localSearchValue"
-        v-model:opened="localOpenedItems"
-        :custom-filter="customFilter"
-        :open-on-click="openOnClick"
-        :item-children="itemChildren"
-        :draggable="isDraggable"
-        @mousedown.shift="$event.preventDefault()"
-        @dragstart="dragStart"
-        @dragover="dragOver"
-        @dragend="dragEnd"
-        @drop="drop"
-        @item-toggled="itemToggled"
-        @click="itemClicked"
+    <div class="treeview-items">
+      <div
+        v-for="(item, index) in items"
+        :key="item.name"
+        class="vcs-treeitem"
+        :class="{ 'mobile-spacing': xs }"
       >
-        <template v-for="slot of forwardSlots" #[slot]="scope">
-          <slot :name="slot" v-bind="scope ?? {}" />
-        </template>
-      </VcsTreeNode>
+        <VcsTreeNode
+          class="root-node"
+          :class="{
+            'vcs-draggable-item': isDraggable,
+          }"
+          :item="item"
+          :path="[index]"
+          :search="localSearchValue"
+          v-model:opened="localOpenedItems"
+          :custom-filter="customFilter"
+          :open-on-click="openOnClick"
+          :item-children="itemChildren"
+          :draggable="isDraggable"
+          @mousedown.shift="$event.preventDefault()"
+          @dragstart="dragStart"
+          @dragover="dragOver"
+          @dragend="dragEnd"
+          @drop="drop"
+          @item-toggled="itemToggled"
+          @click="itemClicked"
+        >
+          <template v-for="slot of forwardSlots" #[slot]="scope">
+            <slot :name="slot" v-bind="scope ?? {}" />
+          </template>
+        </VcsTreeNode>
+      </div>
     </div>
   </div>
 </template>
@@ -73,6 +78,7 @@
    * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click.
    * @vue-prop {string} [search=''] - The value used to filter the items.
    * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview.
+   * @vue-prop {boolean} [stickySearchbar=false] - Keeps the searchbar at the top of the scroll container.
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated.
    * @vue-prop {function(arg0: import("./VcsTreeNode.vue").VcsTreeNodeItem, arg1: string|undefined):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {import("./dragHelper.js").DropTargetZonesFunction} [dropTargetZones] - a function to define allowed drop target zones per item.
@@ -116,6 +122,10 @@
         type: Boolean,
         default: false,
       },
+      stickySearchbar: {
+        type: Boolean,
+        default: false,
+      },
       searchbarPlaceholder: {
         type: String,
         default: undefined,
@@ -203,6 +213,28 @@
 </script>
 
 <style lang="scss" scoped>
+  .vcs-treeview {
+    display: block;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    scrollbar-gutter: stable;
+  }
+
+  .treeview-items {
+    display: block;
+  }
+  .vcs-treeview.sticky-searchbar {
+    --searchbar-height: calc(var(--v-vcs-font-size) * 2 + 18px);
+    margin-top: var(--searchbar-height);
+
+    > .vcs-treeview-searchbar {
+      width: 100%;
+      position: absolute !important;
+      margin-top: calc(var(--searchbar-height) * -1);
+      z-index: 2;
+    }
+  }
   // Hide node component when not rendered (e.g. filtered by search)
   .vcs-treeitem:not(:has(.vcs-tree-node)) {
     display: none;

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -31,6 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    stickySearchbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchbarPlaceholder: {
         type: StringConstructor;
         default: undefined;
@@ -92,6 +96,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    stickySearchbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchbarPlaceholder: {
         type: StringConstructor;
         default: undefined;
@@ -122,6 +130,7 @@ declare const _default: import("vue").DefineComponent<{
     customFilter: Function;
     openAll: boolean;
     showSearchbar: boolean;
+    stickySearchbar: boolean;
     searchbarPlaceholder: string;
     dropTargetZones: Function;
 }, {}>;

package/src/components/plugins/VcsWorkspaceWrapper.vue

@@ -14,6 +14,7 @@
         <div class="d-flex gc-2 w-100 justify-end">
           <slot name="secondaryButton" />
           <VcsFormButton
+            v-if="showNew"
             variant="filled"
             :disabled="disableNew"
             :tooltip="tooltipNew"
@@ -39,6 +40,7 @@
    * Providing a footer with add and new buttons.
    * @vue-prop {boolean} [showFooter=true] - Flag to hide the footer.
    * @vue-prop {boolean} [showAdd=true] - Flag to show an add button in the footer. You need to handle @addClicked in a child component.
+   * @vue-prop {boolean} [showNew=true] - Flag to show a new button in the footer.
    * @vue-prop {boolean} [disableAdd=false] - Flag to render add button disabled.
    * @vue-prop {boolean} [tooltipAdd='components.addToMyWorkspace'] - Option to change the add button tooltip.
    * @vue-prop {boolean} [disableNew=false] - Flag to render new button disabled.
@@ -66,6 +68,10 @@
         type: Boolean,
         default: true,
       },
+      showNew: {
+        type: Boolean,
+        default: true,
+      },
       disableAdd: {
         type: Boolean,
         default: false,

package/src/components/plugins/VcsWorkspaceWrapper.vue.d.ts

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disableAdd: {
         type: BooleanConstructor;
         default: boolean;
@@ -42,6 +46,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disableAdd: {
         type: BooleanConstructor;
         default: boolean;
@@ -73,6 +81,7 @@ declare const _default: import("vue").DefineComponent<{
     actions: unknown[];
     showFooter: boolean;
     showAdd: boolean;
+    showNew: boolean;
     disableAdd: boolean;
     tooltipAdd: string;
     newButtonTitle: string;

package/src/contentTree/LayerTree.vue

@@ -3,9 +3,10 @@
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"
-      :show-searchbar="true"
-      v-model:opened="open"
+      show-searchbar
+      sticky-searchbar
       open-on-click
+      v-model:opened="open"
       :searchbar-placeholder="'content.search.placeholder'"
       item-children="visibleChildren"
     >
@@ -103,3 +104,13 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .layer-tree {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+</style>

package/src/featureInfo/ClusterFeatureComponent.vue

@@ -83,6 +83,7 @@
         v-model="selected"
         selectable
         single-select
+        sticky-searchbar
         searchable
         open-all
       />

package/src/featureInfo/abstractFeatureInfoView.js

@@ -287,19 +287,20 @@ function getWindowState(app, state, attributes) {
 }
 
 /**
- * Recursively searches for parent feature attributes, if __PARENT_FEATURE property is set. Parent feature is searched in the batchTable of the content of the given feature.
+ * Recursively searches for parent feature attributes, if __PARENT_FEATURE property is set. Parent feature is searched in the content of the given feature.
  * @param {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
  * @param {Array<object>} records - array of parent feature attributes
  * @returns {Array<object>} record of parent feature ids and their attributes
  */
 function getParentFeatureAttributes(feature, records = []) {
   const parentId = feature.getProperty('__PARENT_FEATURE');
-  if (parentId !== 'null' && feature.content?.batchTable) {
-    for (let i = 0; i < feature.content.batchTable.featuresLength; i++) {
-      const batchTableFeature = feature.content.batchTable.getFeature(i);
-      if (batchTableFeature.getProperty('id') === parentId) {
-        records.push(batchTableFeature.getAttributes());
-        return getParentFeatureAttributes(batchTableFeature, records);
+  if (parentId !== undefined && parentId !== 'null' && feature.content) {
+    const { content } = feature;
+    for (let i = 0; i < content.featuresLength; i++) {
+      const contentFeature = content.getFeature(i);
+      if (contentFeature.getProperty('id') === parentId) {
+        records.push(contentFeature.getAttributes());
+        return getParentFeatureAttributes(contentFeature, records);
       }
     }
   }
@@ -442,6 +443,10 @@ class AbstractFeatureInfoView extends VcsObject {
    */
   getAttributes(feature) {
     let attributes = this._getAttributesFromFeature(feature);
+    attributes = applyEmptyAttributesFilter(
+      attributes,
+      this.removeNoDataAttributes,
+    );
     if (this.attributeKeys.length > 0) {
       attributes = applyAttributeFilter(attributes, this.attributeKeys);
     }
@@ -452,8 +457,7 @@ class AbstractFeatureInfoView extends VcsObject {
       applyKeyMapping(attributes, this.keyMapping);
     }
     attributes = applyOlcsAttributeFilter(attributes, this.attributeKeys);
-    attributes = applyDoubleUnderscoreFilter(attributes, this.attributeKeys);
-    return applyEmptyAttributesFilter(attributes, this.removeNoDataAttributes);
+    return applyDoubleUnderscoreFilter(attributes, this.attributeKeys);
   }
 
   /**

package/src/manager/window/WindowComponent.vue

@@ -28,7 +28,7 @@
     </div>
     <v-divider v-if="!windowState.hideHeader" />
     <div
-      class="overflow-x-hidden overflow-y-auto mb-1 d-flex flex-grow-1 flex-column"
+      class="window-content overflow-x-hidden overflow-y-auto mb-1 d-flex flex-grow-1 flex-column"
       :class="{
         rounded: !isDocked,
       }"
@@ -169,6 +169,10 @@
 </script>
 
 <style scoped>
+  .window-content > :deep(:has(> .sticky-searchbar:only-child)) {
+    display: contents;
+  }
+
   .marginToTop {
     margin-top: 2px;
   }