diff options
author | Marco Nassabain <marco.nassabain@hotmail.com> | 2021-03-17 00:54:08 +0100 |
---|---|---|
committer | Sean Molenaar <SMillerDev@users.noreply.github.com> | 2021-04-08 23:17:31 +0200 |
commit | a8c928b316a85f17d3cdefad8d563c7f8dbb6d7a (patch) | |
tree | 1a9ba34fdaa7bf1982809cddce30b76d2fa6a0e6 | |
parent | 77d7cfb797a3e373583a035519a76e9949d525a4 (diff) |
♻️ 💄 Refactor dropdown + fix opacity + realign
Signed-off-by: Marco Nassabain <marco.nassabain@hotmail.com>
-rw-r--r-- | css/app.css | 6 | ||||
-rw-r--r-- | css/content.css | 5 | ||||
-rw-r--r-- | 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')) ?>&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')) ?>&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"> |