Modified MMButton extraSmall size to match the design

Simplified Filter banner component
Added banner in the linked features
corrected position according to figma design

Author: gabriel-bolbotina

app/qml/components/MMButton.qml

@@ -162,37 +162,42 @@ Button {
 
   state: "default"
 
-  implicitHeight: root.type === MMButton.Types.Tertiary ? buttonContent.height : buttonContent.height + topPadding + bottomPadding
+  implicitHeight: {
+    if ( root.type === MMButton.Types.Tertiary && root.size !== MMButton.Sizes.ExtraSmall ) 
+      return buttonContent.height 
+    else 
+      return buttonContent.height + topPadding + bottomPadding
+  }
   implicitWidth: {
-    if ( root.size === MMButton.Sizes.ExtraSmall ) return row.paintedChildrenWidth + 2 * __style.margin12
+    if ( root.size === MMButton.Sizes.ExtraSmall ) return row.paintedChildrenWidth + 2 * __style.margin8
     return row.paintedChildrenWidth + 2 * ( root.size === MMButton.Sizes.Small ? __style.margin16 : __style.margin20 )
   }
 
   topPadding: {
-    if ( root.type === MMButton.Types.Tertiary ) {
+    if ( root.size === MMButton.Sizes.ExtraSmall ) {
+      return __style.margin2;
+    }
+    else if ( root.type === MMButton.Types.Tertiary ) {
       return 0;
     }
     else if ( root.size === MMButton.Sizes.Small ) {
       return 7 * __dp;
     }
-    else if ( root.size === MMButton.Sizes.ExtraSmall ) {
-      return 2 * __dp;
-    }
     else {
       return 11 * __dp;
     }
   }
 
   bottomPadding: {
-    if ( root.type === MMButton.Types.Tertiary ) {
+    if ( root.size === MMButton.Sizes.ExtraSmall ) {
+      return __style.margin2;
+    }
+    else if ( root.type === MMButton.Types.Tertiary ) {
       return 0;
     }
     else if ( root.size === MMButton.Sizes.Small ) {
       return 7 * __dp;
     }
-    else if ( root.size === MMButton.Sizes.ExtraSmall ) {
-      return 2 * __dp;
-    }
     else {
       return 11 * __dp;
     }
@@ -210,7 +215,7 @@ Button {
 
       property real paintedChildrenWidth: buttonIconLeft.paintedWidth + buttonContent.implicitWidth + buttonIconRight.paintedWidth + spacing
       property real maxWidth: {
-        if ( root.size === MMButton.Sizes.ExtraSmall ) return parent.width - 2 * __style.margin12
+        if ( root.size === MMButton.Sizes.ExtraSmall ) return parent.width - 2 * __style.margin8
         return parent.width - 2 * ( root.size === MMButton.Sizes.Small ? __style.margin16 : __style.margin20 )
       }
 
@@ -278,7 +283,7 @@ Button {
   background: Rectangle {
     id: buttonBackground
 
-    radius: root.size === MMButton.Sizes.ExtraSmall ? __style.radius12 : __style.radius30
+    radius: root.size === MMButton.Sizes.ExtraSmall ? __style.radius40 : __style.radius30
 
     border.width: 2 * __dp
   }

app/qml/filters/components/MMFilterBanner.qml

@@ -15,38 +15,21 @@ Rectangle {
   id: root
 
   property string text
-  property bool showIcon: false
   property string actionText: ""
-  property bool showClose: false
 
   signal actionClicked()
-  signal closeClicked()
 
   color: __style.informativeColor
   radius: __style.radius8
-  implicitHeight: bannerText.implicitHeight + 2 * __style.margin12
-
-  MMComponents.MMIcon {
-    id: infoIcon
-
-    visible: root.showIcon
-
-    anchors.left: parent.left
-    anchors.leftMargin: __style.margin12
-    anchors.verticalCenter: parent.verticalCenter
-
-    source: __style.infoIcon
-    color: __style.deepOceanColor
-    size: __style.icon24
-  }
+  implicitHeight: bannerText.implicitHeight + 2 * __style.margin8
 
   MMComponents.MMText {
     id: bannerText
 
-    anchors.left: infoIcon.visible ? infoIcon.right : parent.left
-    anchors.leftMargin: infoIcon.visible ? __style.spacing8 : __style.margin12
-    anchors.right: actionButton.visible ? actionButton.left : ( closeButton.visible ? closeButton.left : parent.right )
-    anchors.rightMargin: ( actionButton.visible || closeButton.visible ) ? __style.spacing8 : __style.margin12
+    anchors.left: parent.left
+    anchors.leftMargin: __style.margin12
+    anchors.right: actionButton.visible ? actionButton.left : parent.right
+    anchors.rightMargin: actionButton.visible ? __style.spacing8 : __style.margin12
     anchors.verticalCenter: parent.verticalCenter
 
     text: root.text
@@ -68,26 +51,9 @@ Rectangle {
     bgndColor: __style.deepOceanColor
 
     anchors.right: parent.right
-    anchors.rightMargin: __style.margin12
+    anchors.rightMargin: __style.margin8
     anchors.verticalCenter: parent.verticalCenter
 
     onClicked: root.actionClicked()
   }
-
-  MMComponents.MMRoundButton {
-    id: closeButton
-
-    visible: root.showClose
-
-    iconSource: __style.closeIcon
-    iconColor: __style.deepOceanColor
-    bgndColor: __style.transparentColor
-    bgndHoverColor: __style.transparentColor
-
-    anchors.right: parent.right
-    anchors.rightMargin: __style.margin4
-    anchors.verticalCenter: parent.verticalCenter
-
-    onClicked: root.closeClicked()
-  }
 }

app/qml/form/components/MMFeaturesListPageDrawer.qml

@@ -12,6 +12,7 @@ import QtQuick.Controls
 
 import "../../inputs" as MMInputs
 import "../../components" as MMComponents
+import "../../filters/components" as MMFilters
 
 //
 // Special type of drawer/page -> looks like page, but it is actually Drawer
@@ -75,11 +76,26 @@ Drawer {
 
         MMComponents.MMListSpacer { height: __style.spacing20 }
 
+        MMFilters.MMFilterBanner {
+          id: filterBanner
+
+          visible: globalFilterController.hasActiveFilters
+
+          width: parent.width
+          text: qsTr( "Some features may be hidden by active filters" )
+        }
+
+        MMComponents.MMListSpacer {
+          visible: filterBanner.visible
+          height: __style.spacing10
+        }
+
         MMComponents.MMListView {
           id: listView
 
           width: parent.width
           height: parent.height - 2 * __style.spacing20 - searchBar.height
+                  - ( filterBanner.visible ? filterBanner.height + __style.spacing10 : 0 )
 
           clip: true
 

app/qml/layers/MMFeaturesListPage.qml

@@ -34,14 +34,26 @@ MMComponents.MMPage {
     width: parent.width
     height: parent.height
 
-    MMFilterComponents.MMFilterBanner {
-      id: filterNotification
+    MMSearchInput {
+      id: searchBar
 
       anchors.top: parent.top
       anchors.topMargin: __style.spacing20
 
       width: parent.width
 
+      delayedSearch: true
+      onSearchTextChanged: featuresModel.searchExpression = searchBar.text
+    }
+
+    MMFilterComponents.MMFilterBanner {
+      id: filterBanner
+
+      anchors.top: searchBar.bottom
+      anchors.topMargin: __style.spacing20
+
+      width: parent.width
+
       visible: root.selectedLayer && globalFilterController.filteredLayerIds.indexOf(root.selectedLayer.id) >= 0
 
       text: qsTr("Active filters applied")
@@ -54,27 +66,15 @@ MMComponents.MMPage {
       }
     }
 
-    MMSearchInput {
-      id: searchBar
-
-      anchors.top: filterNotification.visible ? filterNotification.bottom : parent.top
-      anchors.topMargin: __style.spacing20
-
-      width: parent.width
-
-      delayedSearch: true
-      onSearchTextChanged: featuresModel.searchExpression = searchBar.text
-    }
-
     MMComponents.MMListView {
       id: listView
 
       width: parent.width
 
       anchors {
-        top: searchBar.bottom
+        top: filterBanner.visible ? filterBanner.bottom : searchBar.bottom
         bottom: parent.bottom
-        topMargin: __style.spacing20
+        topMargin: filterBanner.visible ? __style.spacing10 : __style.spacing20
       }
 
       model: MM.LayerFeaturesModel {