From e8b423b48d10869e09203053a6d86f37246f1724 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 16 Oct 2019 21:35:06 +0200
Subject: [PATCH] Added input groups with append value

no issue
- members price and email settings share the same pattern now: the uneditable parts of the input value is inside the input
---
 ghost/admin/app/styles/layouts/labs.css       | 19 -------
 ghost/admin/app/styles/patterns/forms.css     | 51 +++++++++++++++++++
 .../components/gh-members-lab-setting.hbs     | 19 ++++---
 3 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/labs.css b/ghost/admin/app/styles/layouts/labs.css
index dae57107db..10ce518bc8 100644
--- a/ghost/admin/app/styles/layouts/labs.css
+++ b/ghost/admin/app/styles/layouts/labs.css
@@ -1,7 +1,3 @@
-.gh-labs-price-label input {
-    padding-right: 96px;
-}
-
 .gh-labs-price-label input::-webkit-outer-spin-button, .gh-labs-price-label input::-webkit-inner-spin-button {
     /* display: none; <- Crashes Chrome on hover */
     -webkit-appearance: none;
@@ -13,21 +9,6 @@
     /* Firefox */
 }
 
-.gh-labs-price-label::after {
-    position: absolute;
-    top: 8px;
-    right: 12px;
-    color: var(--midlightgrey);
-}
-
-.gh-labs-monthly-price::after {
-    content: "USD/month";
-}
-
-.gh-labs-yearly-price::after {
-    content: "USD/year";
-}
-
 .gh-labs-toggle-wrapper {
     padding-top: 6px;
     padding-bottom: 6px;
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 667467c48b..95f452a538 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -489,6 +489,57 @@ textarea {
     margin-left: 10px;
 }
 
+/* Input appends
+/* ---------------------------------------------------------- */
+.gh-input-group {
+    display: flex;
+    align-items: center;
+}
+
+.gh-input-group .gh-input {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-right: 0;
+}
+
+.gh-input-group .gh-input:focus + .gh-input-append {
+    border-color: color-mod(var(--blue));
+    box-shadow: inset 0 0 0 1px var(--blue);
+}
+
+.gh-input-append {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 38px;
+    padding: 6px 12px;
+    border: var(--input-border);
+    background: var(--input-bg-color);
+    color: var(--darkgrey);
+    font-size: 1.5rem;
+    font-weight: 400;
+    user-select: text;
+    border-radius: var(--border-radius);
+    word-wrap: none;
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    flex: 1;
+    color: var(--midlightgrey);
+}
+
+.gh-input-append:before {
+    position: absolute;
+    content: "";
+    top: 1px;
+    left: -2px;
+    bottom: 1px;
+    width: 4px;
+    background: var(--input-bg-color);
+}
+
+
 /* FFF: Fucking Firefox Fixes
 /* ---------------------------------------------------------- */
 
diff --git a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
index c54e28abdf..4f15a25556 100644
--- a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
+++ b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
@@ -68,24 +68,27 @@
                 <div class="w-50 mr3">
                     {{#gh-form-group}}
                     <label class="fw6 f8">Monthly price</label>
-                    <div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
+
+                    <div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
                         {{gh-text-input
-                                value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
-                                type="number"
-                                input=(action "setSubscriptionSettings" "month")
-                            }}
+                            value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
+                            type="number"
+                            input=(action "setSubscriptionSettings" "month")
+                        }}
+                        <span class="gh-input-append">USD/month</span>
                     </div>
                     {{/gh-form-group}}
                 </div>
                 <div class="w-50 ml2">
                     {{#gh-form-group class="description-container"}}
                     <label class="fw6 f8">Yearly price</label>
-                    <div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
+                    <div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
                         {{gh-text-input
                                 value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
                                 type="number"
                                 input=(action "setSubscriptionSettings" "year")
                             }}
+                        <span class="gh-input-append">USD/month</span>
                     </div>
                     {{/gh-form-group}}
                 </div>
@@ -172,13 +175,13 @@
         <div class="flex flex-column w-40 flex mt8">
             {{#gh-form-group}}
             <label class="fw6 f8">From Address</label>
-            <div class="flex items-center justify-center mt1">
+            <div class="flex items-center justify-center mt1 gh-input-group">
                 {{gh-text-input
                     value=(readonly subscriptionSettings.fromAddress)
                     input=(action "setSubscriptionSettings" "fromAddress")
                     class="w20"
                 }}
-                <span class="ml3"> @{{config.blogDomain}}</span>
+                <span class="gh-input-append"> @{{config.blogDomain}}</span>
             </div>
             <div class="f8 fw4 midgrey mt1">Your members will receive system emails from this address</div>
             {{/gh-form-group}}