[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UX] Improve SubscribeNewsletter input group layout and icon alignment

luci pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
0d88bdee by Olivier Kango at 2026-03-16T15:51:33+00:00
[FIX][UX] Improve SubscribeNewsletter input group layout and icon alignment
---
* [FIX][UX] DRY subscribe newsletter button label rendering

* [FIX] Load plugin CSS via inline link tag to avoid headers-already-sent error

* [FIX] Enter your email address

* [UX] Shorten email input placeholder text

* [FIX][UX] Improve SubscribeNewsletter input group layout and icon alignment

* [FIX][UX] Prevent SubscribeNewsletter wikisyntax parsing from breaking module layout

* [FIX][UX] Improve SubscribeNewsletter input group layout and icon alignment

See merge request tikiwiki/tiki!9754

- - - - -


3 changed files:

- lib/wiki-plugins/wikiplugin_subscribenewsletter.php
- templates/wiki-plugins/wikiplugin_subscribenewsletter.tpl
- + themes/base_files/feature_css/wikiplugin-subscribenewsletter.css


Changes:

=====================================
lib/wiki-plugins/wikiplugin_subscribenewsletter.php
=====================================
@@ -86,6 +86,7 @@ function wikiplugin_subscribenewsletter($data, $params)
     global $prefs, $user;
     $userlib = TikiLib::lib('user');
     $tikilib = TikiLib::lib('tiki');
+    $parserlib = TikiLib::lib('parser');
     $smarty = TikiLib::lib('smarty');
     global $nllib;
     include_once('lib/newsletters/nllib.php');
@@ -146,6 +147,7 @@ function wikiplugin_subscribenewsletter($data, $params)
     $wpSubscribe = '';
     $wpError = '';
     $subscribeEmail = '';
+    $subscribeThanks = '';
     $useCaptcha = $params['usecaptcha'];
     if ($params['usecaptcha'] !== 0) {  // To keep previous behaviour with previous versions where the parameter doesn't exist
         $useCaptcha = 1;
@@ -171,7 +173,7 @@ function wikiplugin_subscribenewsletter($data, $params)
                 }
                 if ($result) {
                     $wpSubscribe = 'y';
-                    $smarty->assign('subscribeThanks', empty($thanks) ? $data : $thanks);
+                    $subscribeThanks = empty($thanks) ? $data : $thanks;
                     if ($info['validateAddr'] == 'y' && ! $user) {
                         // For anonymous users with email validation required
                         $smarty->assign('confirmationSent', true);
@@ -187,19 +189,27 @@ function wikiplugin_subscribenewsletter($data, $params)
             }
         }
     }
+    if ($params['wikisyntax'] == 1 && ! empty($subscribeThanks)) {
+        $subscribeThanks = $parserlib->parse_data($subscribeThanks, ['is_html' => true]);
+    }
+
     $smarty->assign_by_ref('wpSubscribe', $wpSubscribe);
     $smarty->assign_by_ref('wpError', $wpError);
+    $subscribeButtonLabel = empty($button) ? $data : $button;
+    if (empty($subscribeButtonLabel)) {
+        $subscribeButtonLabel = tra('Subscribe to the newsletter:') . ' ' . $info['name'];
+    }
+
+    $smarty->assign('subscribeThanks', $subscribeThanks);
+    $smarty->assign('subscribeThanksIsHtml', $params['wikisyntax'] == 1);
     $smarty->assign('subscribeEmail', $subscribeEmail);
-    $smarty->assign('subcribeMessage', empty($button) ? $data : $button);
+    $smarty->assign('subscribeButtonLabel', $subscribeButtonLabel);
     $smarty->assign('inmodule', ! empty($inmodule) ? "moduleSubscribeNL" : "");
     $smarty->assign_by_ref('subscribeInfo', $info);
     $smarty->assign('useCaptcha', $useCaptcha);
     $smarty->assign('alreadySubscribed', $alreadySubscribed);
     $smarty->assign('alreadySubscribedMessage', $alreadySubscribedMessage);
     $res = $smarty->fetch('wiki-plugins/wikiplugin_subscribenewsletter.tpl');
-    if ($params["wikisyntax"] == 1) {
-        return $res;
-    } else {        // if wikisyntax != 1 : no parsing of any wiki syntax
-        return '~np~' . $res . '~/np~';
-    }
+
+    return '~np~' . $res . '~/np~';
 }


=====================================
templates/wiki-plugins/wikiplugin_subscribenewsletter.tpl
=====================================
@@ -2,7 +2,11 @@
     {if empty($subscribeThanks)}
         {tr}Subscription confirmed!{/tr}
     {else}
-        {$subscribeThanks|escape}
+        {if !empty($subscribeThanksIsHtml)}
+            {$subscribeThanks nofilter}
+        {else}
+            {$subscribeThanks|escape}
+        {/if}
     {/if}
     
 {elseif $alreadySubscribed}
@@ -11,6 +15,7 @@
     {/remarksbox}
 
 {else}
+    <link rel="stylesheet" href="themes/base_files/feature_css/wikiplugin-subscribenewsletter.css">
     <form name="wpSubscribeNL" method="post">
         <input type="hidden" name="wpNlId" value="{$subscribeInfo.nlId|escape}">
 
@@ -20,14 +25,15 @@
             {/remarksbox}
         {/if}
 
-        <div class="d-flex flex-row flex-wrap align-items-center row">
+        <div class="form-inline row wp-subscribe-inline">
             <div class="input-group">
-                <input type="email" class="form-control fa" id="wpEmail" name="wpEmail" size="80" value="{$subscribeEmail|escape}" placeholder="{tr}Enter your email address{/tr}" required>
-                {if empty($subcribeMessage)}
-                    <input type="submit" class="btn btn-primary" name="wpSubscribe" value="{tr}Subscribe to the newsletter:{/tr} {$subscribeInfo.name}">
-                {else}
-                    <input type="submit" class="btn btn-primary" name="wpSubscribe" value="{$subcribeMessage|escape}">
-                {/if}
+                <div class="wp-subscribe-email-wrap">
+                    <span class="wp-subscribe-email-icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
+                    <input type="email" class="form-control" id="wpEmail" name="wpEmail" size="50" value="{$subscribeEmail|escape}" placeholder="{tr}Enter your email address{/tr}" required>
+                </div>
+                <div class="input-group-append">
+                    <input type="submit" class="btn btn-primary" name="wpSubscribe" value="{$subscribeButtonLabel|escape}">
+                </div>
             </div>
         </div>
 


=====================================
themes/base_files/feature_css/wikiplugin-subscribenewsletter.css
=====================================
@@ -0,0 +1,43 @@
+.wp-subscribe-inline .input-group {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    align-items: stretch;
+}
+
+.wp-subscribe-inline .wp-subscribe-email-wrap {
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.wp-subscribe-inline .wp-subscribe-email-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 1rem;
+    display: flex;
+    align-items: center;
+    color: var(--secondary, #6c757d);
+    pointer-events: none;
+    z-index: 3;
+}
+
+.wp-subscribe-inline .wp-subscribe-email-wrap #wpEmail {
+    height: 100%;
+    width: 100%;
+    padding-left: 2.75rem;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.wp-subscribe-inline .input-group-append,
+.wp-subscribe-inline .input-group-append .btn {
+    display: flex;
+    align-items: stretch;
+}
+
+.wp-subscribe-inline .input-group-append .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+}



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/0d88bdeeed65132549d56bf4b03e627ec918793f

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/0d88bdeeed65132549d56bf4b03e627ec918793f
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs