From a8c928b316a85f17d3cdefad8d563c7f8dbb6d7a Mon Sep 17 00:00:00 2001
From: Marco Nassabain <marco.nassabain@hotmail.com>
Date: Wed, 17 Mar 2021 00:54:08 +0100
Subject: =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=F0=9F=92=84=20Refactor=20dropdown?=
 =?UTF-8?q?=20+=20fix=20opacity=20+=20realign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Marco Nassabain <marco.nassabain@hotmail.com>
---
 css/app.css                |   6 ++-
 css/content.css            |   5 ++
 templates/part.content.php | 130 ++++++++++++++++++++++-----------------------
 3 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/css/app.css b/css/app.css
index 36be56e12..4aa71866c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -70,10 +70,12 @@
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 999;
   min-width: 20em;
+  left: 100px;
 }
 
-#app-content .compact .dropdown-content {
-  margin-left: -20em;
+.compact .dropdown-content {
+    left: auto;
+    right: 15px;
 }
 
 
diff --git a/css/content.css b/css/content.css
index fdd80bf6e..d8fca2e9a 100644
--- a/css/content.css
+++ b/css/content.css
@@ -222,6 +222,7 @@
     line-height: 52px;
     box-sizing: border-box;
     padding: 15px 50px 0 15px;
+    position: relative;
 }
 
 #app-content .compact .utils {
@@ -232,6 +233,10 @@
     top: 50px;
     background-color: var(--color-main-background);
     min-height: 43px;
+}
+
+/* Only apply opacity to the util bar, not the dropdown */
+#app-content .compact .utils ul {
     opacity: 0.9;
 }
 
diff --git a/templates/part.content.php b/templates/part.content.php
index 120eddb8e..9bfc86e6d 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -26,8 +26,8 @@
             ng-class="{read: !item.unread, open: item.show, active: Content.isItemActive(item.id)}"
             data-id="{{ ::item.id }}">
             <div class="utils"
-                 ng-click="Content.toggleItem(item)"
-                 ng-class="{'compact-dropdown': Content.showDropdown[item.id]}">
+                ng-click="Content.toggleItem(item)"
+                ng-class="{'compact-dropdown': Content.showDropdown[item.id]}">
                 <ul>
                     <li class="util-spacer"></li>
                     <li class="util only-in-compact">
@@ -90,7 +90,6 @@
                         </button>
                     </li>
 
-                    <!-- DROPDOWN SHARE -->
                     <li
                         class="util dropdown"
                         news-stop-propagation>
@@ -99,68 +98,6 @@
                             ng-click="Content.openDropdown(item.id)">
                         </button>
                     </li>
-                    <ng-container click-outside="Content.hide()">
-                        <div
-                            ng-controller="ShareController as Share"
-                            ng-if="Content.showDropdown[item.id]"
-                            style="margin-top: 2.8em;"
-                            class="dropdown-content">
-                            <!-- Share with users -->
-                            <p class="label-group"><?php p($l->t('Share with users')) ?></p>
-                            <form ng-submit=""
-                                name="contactForm"
-                                autocomplete="off">
-                                <fieldset class="contact-input">
-                                    <input
-                                        ng-model="nameQuery"
-                                        ng-model-options="{debounce: 400}"
-                                        ng-change="Share.searchUsers(nameQuery)"
-                                        type="text"
-                                        placeholder="<?php p($l->t('Username')) ?>"
-                                        title="<?php p($l->t('Username')) ?>"
-                                        name="contactName"
-                                        required
-                                        style="width: 200px">
-                                        <div ng-if="App.loading.isLoading('user')"
-                                            ng-class="{'icon-loading-small': App.loading.isLoading('user') }">
-                                        </div>
-                                </fieldset>
-                            </form>
-
-                            <div style="margin-left: 2em; font-size: 0.85em;"
-                                ng-if="!(Share.userList.length > 0) && nameQuery && !App.loading.isLoading('user')">
-                                <?php p($l->t('No users found')) ?>
-                            </div>
-                            <a
-                                ng-repeat="user in Share.userList"
-                                class="icon-category-installed pr-3"
-                                ng-click="Share.shareItem(item.id, user.value.shareWith)">
-                                {{ user.label }}
-                                <span class="right" style="margin-top: 0.9em; margin-right: 1em"
-                                    ng-class="{'icon-loading-small': Share.isLoading(user.value.shareWith), 'icon-checkmark': Share.isStatus(item.id, user.value.shareWith, true), 'icon-close': Share.isStatus(item.id, user.value.shareWith, false)}">
-                                </span>
-                            </a>
-
-                                <p class="label-group"> <?php p($l->t('Share on social media')) ?> </p>
-                                <div class="row">
-                                    <div ng-if="Share.isSocialAppEnabled('facebook')" class="col-4">
-                                        <a target="_blank"
-                                            class="icon-dropdown icon-facebook pr-5"
-                                            ng-href="{{ Share.getFacebookUrl(item.url) }}"></a>
-                                    </div>
-                                    <div ng-if="Share.isSocialAppEnabled('twitter')" class="col-4">
-                                        <a target="_blank"
-                                            class="icon-dropdown icon-twitter pr-5"
-                                            ng-href="{{ Share.getTwitterUrl(item.url) }}"></a>
-                                    </div>
-                                    <div ng-if="Share.isSocialAppEnabled('email')" class="col-4">
-                                        <a class="icon-dropdown icon-mail pr-5"
-                                            ng-href="mailto:?subject=<?php p($l->t('I wanted you to see this article')) ?>&amp;body=<?php p($l->t('Check out this article')) ?>{{ ::item.url }}"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </ng-container>
-                        <!-- END DROPDOWN -->
 
                     <li class="util more" news-stop-propagation ng-hide="noPlugins">
                         <button class="icon-more" news-toggle-show="#actions-{{item.id}}"></button>
@@ -169,6 +106,69 @@
                         </div>
                     </li>
                 </ul>
+                <!-- Share dropdown -->
+                <ng-container click-outside="Content.hide()" news-stop-propagation>
+                    <div
+                        ng-controller="ShareController as Share"
+                        ng-if="Content.showDropdown[item.id]"
+                        class="dropdown-content"
+                        news-stop-propagation>
+                        <!-- Share with users -->
+                        <p class="label-group"><?php p($l->t('Share with users')) ?></p>
+                        <form ng-submit=""
+                            name="contactForm"
+                            autocomplete="off">
+                            <fieldset class="contact-input">
+                                <input
+                                    ng-model="nameQuery"
+                                    ng-model-options="{debounce: 400}"
+                                    ng-change="Share.searchUsers(nameQuery)"
+                                    type="text"
+                                    placeholder="<?php p($l->t('Username')) ?>"
+                                    title="<?php p($l->t('Username')) ?>"
+                                    name="contactName"
+                                    required
+                                    style="width: 200px">
+                                    <div ng-if="App.loading.isLoading('user')"
+                                        ng-class="{'icon-loading-small': App.loading.isLoading('user') }">
+                                    </div>
+                            </fieldset>
+                        </form>
+
+                        <div style="margin-left: 2em; font-size: 0.85em;"
+                            ng-if="!(Share.userList.length > 0) && nameQuery && !App.loading.isLoading('user')">
+                            <?php p($l->t('No users found')) ?>
+                        </div>
+                        <a
+                            ng-repeat="user in Share.userList"
+                            class="icon-category-installed pr-3"
+                            ng-click="Share.shareItem(item.id, user.value.shareWith)">
+                            {{ user.label }}
+                            <span class="right" style="margin-top: 0.9em; margin-right: 1em"
+                                ng-class="{'icon-loading-small': Share.isLoading(user.value.shareWith), 'icon-checkmark': Share.isStatus(item.id, user.value.shareWith, true), 'icon-close': Share.isStatus(item.id, user.value.shareWith, false)}">
+                            </span>
+                        </a>
+
+                        <p class="label-group"> <?php p($l->t('Share on social media')) ?> </p>
+                        <div class="row">
+                            <div ng-if="Share.isSocialAppEnabled('facebook')" class="col-4">
+                                <a target="_blank"
+                                    class="icon-dropdown icon-facebook pr-5"
+                                    ng-href="{{ Share.getFacebookUrl(item.url) }}"></a>
+                            </div>
+                            <div ng-if="Share.isSocialAppEnabled('twitter')" class="col-4">
+                                <a target="_blank"
+                                    class="icon-dropdown icon-twitter pr-5"
+                                    ng-href="{{ Share.getTwitterUrl(item.url) }}"></a>
+                            </div>
+                            <div ng-if="Share.isSocialAppEnabled('email')" class="col-4">
+                                <a class="icon-dropdown icon-mail pr-5"
+                                    ng-href="mailto:?subject=<?php p($l->t('I wanted you to see this article')) ?>&amp;body=<?php p($l->t('Check out this article')) ?>{{ ::item.url }}"></a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
+                <!-- End share dropdown -->
             </div>
 
             <div class="article" ng-if="!Content.isCompactView() || item.show">
-- 
cgit v1.2.3