From a832d6f1fe0e79419aab4095fb9e54410c82dc9b Mon Sep 17 00:00:00 2001
From: Gagan <gaganyadav80@protonmail.com>
Date: Fri, 2 Apr 2021 20:03:27 +0530
Subject: [PATCH] Replace header dropdown with buttons

---
 lib/widgets/toolbar.dart | 93 +++++++++++++++++-----------------------
 1 file changed, 39 insertions(+), 54 deletions(-)

diff --git a/lib/widgets/toolbar.dart b/lib/widgets/toolbar.dart
index d3440cfa..cb53dc03 100644
--- a/lib/widgets/toolbar.dart
+++ b/lib/widgets/toolbar.dart
@@ -370,8 +370,9 @@ Widget defaultToggleStyleButtonBuilder(
 
 class SelectHeaderStyleButton extends StatefulWidget {
   final QuillController controller;
+  final double headerfontSize;
 
-  const SelectHeaderStyleButton({required this.controller, Key? key})
+  const SelectHeaderStyleButton({required this.controller, this.headerfontSize = 18.0, Key? key})
       : super(key: key);
 
   @override
@@ -424,62 +425,46 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
 
   @override
   Widget build(BuildContext context) {
-    return _selectHeadingStyleButtonBuilder(context, _value, _selectAttribute);
+    return _selectHeadingStyleButtonBuilder(context, _value, _selectAttribute, widget.headerfontSize);
   }
 }
 
 Widget _selectHeadingStyleButtonBuilder(BuildContext context, Attribute? value,
-    ValueChanged<Attribute?> onSelected) {
-  final style = const TextStyle(fontSize: 13);
-
+    ValueChanged<Attribute?> onSelected, double headerfontSize) {
   final Map<Attribute, String> _valueToText = {
-    Attribute.header: 'Normal text',
-    Attribute.h1: 'Heading 1',
-    Attribute.h2: 'Heading 2',
-    Attribute.h3: 'Heading 3',
+    Attribute.header: 'N',
+    Attribute.h1: 'H1',
+    Attribute.h2: 'H2',
+    Attribute.h3: 'H3',
   };
 
-  return QuillDropdownButton<Attribute?>(
-    highlightElevation: 0,
-    hoverElevation: 0,
-    height: iconSize * 1.77,
-    fillColor: Theme.of(context).canvasColor,
-    initialValue: value,
-    items: [
-      PopupMenuItem(
-        value: Attribute.header,
-        height: iconSize * 1.77,
-        child: Text(_valueToText[Attribute.header]!, style: style),
-      ),
-      PopupMenuItem(
-        value: Attribute.h1,
-        height: iconSize * 1.77,
-        child: Text(_valueToText[Attribute.h1]!, style: style),
-      ),
-      PopupMenuItem(
-        value: Attribute.h2,
-        height: iconSize * 1.77,
-        child: Text(_valueToText[Attribute.h2]!, style: style),
-      ),
-      PopupMenuItem(
-        value: Attribute.h3,
-        height: iconSize * 1.77,
-        child: Text(_valueToText[Attribute.h3]!, style: style),
+  List<Attribute> _valueAttribute = [Attribute.header, Attribute.h1, Attribute.h2, Attribute.h3];
+  List<String> _valueString = ['N','H1','H2','H3'];
+
+  final theme = Theme.of(context);
+  final style = theme.textTheme.caption?.copyWith(fontWeight: FontWeight.bold, fontSize: (15.0/iconSize)*headerfontSize);
+  final width = theme.buttonTheme.constraints.minHeight + 4.0;
+  final constraints = theme.buttonTheme.constraints.copyWith(
+        minWidth: width, maxHeight: theme.buttonTheme.constraints.minHeight);
+  final radius = const BorderRadius.all(Radius.circular(3.0));
+
+  return Row(
+    mainAxisSize: MainAxisSize.min,
+    children: List.generate(4, (index) {
+      return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 6.0),
+      child: RawMaterialButton(
+        shape: RoundedRectangleBorder(borderRadius: radius),
+        elevation: 0.0,
+        fillColor: _valueToText[value] == _valueString[index] ? Theme.of(context).accentColor.withOpacity(0.4) : Colors.white,
+        constraints: constraints,
+        onPressed: () {
+          onSelected(_valueAttribute[index]);
+        },
+        child: Text(_valueString[index], style: style),
       ),
-    ],
-    onSelected: onSelected,
-    child: Text(
-      !kIsWeb
-          ? _valueToText[value!]!
-          : _valueToText[value!.key == 'header'
-              ? Attribute.header
-              : (value.key == 'h1')
-                  ? Attribute.h1
-                  : (value.key == 'h2')
-                      ? Attribute.h2
-                      : Attribute.h3]!,
-      style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
-    ),
+    );
+    }),
   );
 }
 
@@ -1027,11 +1012,11 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
       Visibility(
           visible: showHeaderStyle,
           child: VerticalDivider(
-              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+              indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
           visible: showHeaderStyle,
-          child: SelectHeaderStyleButton(controller: controller)),
-      VerticalDivider(indent: 16, endIndent: 16, color: Colors.grey.shade400),
+          child: SelectHeaderStyleButton(controller: controller, headerfontSize: toolbarIconSize)),
+      VerticalDivider(indent: 12, endIndent: 12, color: Colors.grey.shade400),
       Visibility(
         visible: showListNumbers,
         child: ToggleStyleButton(
@@ -1070,7 +1055,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
               !showListCheck &&
               !showCodeBlock,
           child: VerticalDivider(
-              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+              indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
         visible: showQuote,
         child: ToggleStyleButton(
@@ -1098,7 +1083,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
       Visibility(
           visible: showQuote,
           child: VerticalDivider(
-              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+              indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
           visible: showLink, child: LinkStyleButton(controller: controller)),
       Visibility(