Merge pull request #1586 from Shadow243/make-edit-draft-button-visible

fix(frontend): redesign edit draft button to make it more visible

Author: kroky

modules/core/functions.php

@@ -706,7 +706,7 @@ function schedule_dropdown($output, $send_now = false) {
     $txt = '';
     if ($send_now) {
         $txt .= '<div class="dropdown d-inline-block">
-                <button type="button" class="btn btn-light btn-sm dropdown-toggle" id="dropdownMenuNexterDate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'.$output->trans('Reschedule').'</button>';
+                <a class="hlink text-decoration-none dropdown-toggle" id="dropdownMenuNexterDate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'.$output->trans('Reschedule').'</a>';
     }
     $txt .= '<ul class="dropdown-menu nexter_dropdown schedule_dropdown" aria-labelledby="dropdownMenuNexterDate">';
     foreach ($values as $format) {

modules/imap/functions.php

@@ -1488,11 +1488,11 @@ function snooze_dropdown($output, $unsnooze = false) {
     $values = nexter_formats();
 
     $txt = '<div class="dropdown d-inline-block">
-                <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" id="dropdownMenuSnooze" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-bs-auto-close="outside">'.$output->trans('Snooze').'</button>
+                <a class="hlink text-decoration-none dropdown-toggle" id="dropdownMenuSnooze" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-bs-auto-close="outside">'.$output->trans('Snooze').'</a>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuSnooze">';
     foreach ($values as $format) {
         $labels = get_scheduled_date($format, true);
-        $txt .= '<li><a href="#" class="nexter_date_helper_snooze dropdown-item d-flex justify-content-between gap-5" data-value="'.$format.'"><span>'.$output->trans($labels[0]).'</span> <span class="text-end">'.$labels[1].'</span></a></li>';
+        $txt .= '<li><a href="#" class="nexter_date_helper_snooze dropdown-item gap-5" data-value="'.$format.'"><span>'.$output->trans($labels[0]).'</span> <span class="text-end">'.$labels[1].'</span></a></li>';
     }
     $txt .= '<li><hr class="dropdown-divider"></li>';
     $txt .= '<li><label for="nexter_input_date_snooze" class="nexter_date_picker_snooze dropdown-item cursor-pointer">'.$output->trans('Pick a date').'</label>';
@@ -1510,8 +1510,8 @@ function snooze_dropdown($output, $unsnooze = false) {
 function tags_dropdown($context, $headers) {
     $folders = $context->get('tags', array());
     $txt = '<div class="dropdown d-inline-block">
-                <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" id="dropdownMenuSnooze" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'.$context->trans('Tags').'</button>
-                <ul class="dropdown-menu" aria-labelledby="dropdownMenuSnooze">';
+                <a class="hlink text-decoration-none dropdown-toggle" id="dropdownMenuTag" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'.$context->trans('Tags').'</a>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuTag">';
 
     $tags =  !empty($headers['X-Cypht-Tags']) ? explode(',', $headers['X-Cypht-Tags']) : array();
     foreach ($folders as $folder) {

modules/imap/output_modules.php

@@ -306,8 +306,10 @@ protected function output() {
                     }
                 }
             }
-            
-            // Long headers (hidden by default)
+            $is_draft = isset($headers['Flags']) && mb_stristr($headers['Flags'], 'draft');
+            if($is_draft) {
+                $txt .= '<tr class="header_space"><th colspan="2"><a class="btn btn-primary" href="?page=compose'.$reply_args.'&imap_draft=1"><i class="bi bi-pencil"></i> '.$this->trans('Edit Draft').'</a></th></tr>';
+            }
             foreach ($headers as $name => $value) {
                 if (!in_array(mb_strtolower($name), $small_headers)) {
                     if (is_array($value)) {
@@ -392,9 +394,11 @@ protected function output() {
                 $txt .= schedule_dropdown($this, true);
             }
 
-            $is_draft = isset($headers['Flags']) && mb_stristr($headers['Flags'], 'draft');
-            if ($this->get('sieve_filters_enabled') && !$is_draft) {
+            $settings = $this->get('user_settings', array());
+            if(array_key_exists('enable_snooze_setting', $settings) && $settings['enable_snooze_setting']) {
                 $txt .= snooze_dropdown($this, isset($headers['X-Snoozed']));
+            }
+            if ($this->get('sieve_filters_enabled') && !$is_draft) {
                 $server_id = $this->get('msg_server_id');
                 $imap_server = $this->get('imap_accounts')[$server_id];
                 if ($this->get('sieve_filters_client')) {
@@ -416,10 +420,7 @@ protected function output() {
             }
             $txt .= '<a class="hlink text-decoration-none" id="show_message_source" href="#">' . $this->trans('Show Source') . '</a>';
 
-            if ($is_draft) {
-                $txt .= '<a class="edit_draft_link hlink text-decoration-none" id="edit_draft" href="?page=compose'.$reply_args.'&imap_draft=1">'.$this->trans('Edit Draft').'</a>';
-            }
-            $txt .= '</div><span id="extra-header-buttons"></span>';
+            $txt .= '</ul><span id="extra-header-buttons"></span>';
             $txt .= '<input type="hidden" class="move_to_type" value="" />';
             $txt .= '<input type="hidden" class="move_to_string1" value="'.$this->trans('Move to ...').'" />';
             $txt .= '<input type="hidden" class="move_to_string2" value="'.$this->trans('Copy to ...').'" />';

modules/imap/site.css

@@ -157,14 +157,18 @@
   background-color: inherit;
   color: inherit;
 }
-.header_links #dropdownMenuForward {
+.header_links #dropdownMenuForward, .header_links #dropdownMenuSnooze, .header_links #dropdownMenuTag, .header_links #dropdownMenuNexterDate {
   padding: 0;
   border: unset;
   font-variant: inherit;
   text-transform: inherit;
   font-size: inherit;
   vertical-align: baseline;
 }
+.header_links .dropdown .btn:hover, .header_links .dropdown .btn:active, .header_links .dropdown .btn:focus {
+    color: inherit;
+    background-color: inherit;
+}
 
 .header_links #dropdownMenuForward:hover {
   background-color: inherit;