From 0c8130d7c0b801cd6cd7d16eb39c7f98ec92c75b Mon Sep 17 00:00:00 2001 From: Aditya Anand M C Date: Mon, 11 Nov 2019 15:56:03 -0800 Subject: [PATCH] chore: revamp boutty detail actions - move funder change address notification to above action buttons - move extra options to dropdown - update buttons to new style - refactor code + remove dead code --- app/assets/v2/css/base.css | 6 - app/assets/v2/css/bounty.css | 18 +- app/assets/v2/css/forms/button.css | 26 ++- app/assets/v2/css/gitcoin.css | 6 +- app/assets/v2/js/pages/bounty_details.js | 242 ++++++++------------ app/dashboard/templates/bounty/details.html | 55 ++--- app/dashboard/templates/bounty/fund.html | 4 +- 7 files changed, 149 insertions(+), 208 deletions(-) diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css index 73331a8b5cb..71cc6892ac4 100644 --- a/app/assets/v2/css/base.css +++ b/app/assets/v2/css/base.css @@ -552,12 +552,6 @@ input[type=text].loading { text-align: left; } -.admin-only { - background-color: #5495E1 !important; - color:white !important; - border: 1px solid white !important; -} - /* The alert message box */ .alert { diff --git a/app/assets/v2/css/bounty.css b/app/assets/v2/css/bounty.css index 0f1b84796c6..1863706ab01 100644 --- a/app/assets/v2/css/bounty.css +++ b/app/assets/v2/css/bounty.css @@ -156,6 +156,7 @@ body { } #description { + border-top: 1px solid #D4D4D4; margin-bottom: 2em; } @@ -285,10 +286,7 @@ body { } .bounty-actions { - margin-top: 2.5em; display: inherit; - padding-bottom: 5px; - border-bottom: 1px solid #D4D4D4; } .bounty-actions .tag.usd { @@ -364,10 +362,6 @@ a.btn { margin-bottom: 10px; } -#moderator-admin-actions:not(:empty).sticky { - text-align: center; -} - .sticky { position: fixed; top: 0; @@ -490,7 +484,7 @@ a.btn { } #funder_notif_info .bounty-notification { - border: orange 1px solid; + border: orange 2px solid; border-radius: 3px; padding: 0.5rem; } @@ -501,7 +495,7 @@ a.btn { } #funder_notif_info img { - width: 1.5rem; + width: 1.25rem; position: relative; top: -2px; } @@ -565,15 +559,9 @@ a.btn { #moderator-admin-actions:not(:empty) { background: #F2F6F9; padding: 16px 0 10px; - text-align: left; left: 0; } -#moderator-admin-actions:not(:empty) a { - border: none !important; - margin: 0 3px 5px; -} - @media (max-width: 767px) { #title { diff --git a/app/assets/v2/css/forms/button.css b/app/assets/v2/css/forms/button.css index 6334e0d3a7f..e5ea1f5b394 100644 --- a/app/assets/v2/css/forms/button.css +++ b/app/assets/v2/css/forms/button.css @@ -1,13 +1,10 @@ .button { border: none; - border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); + border-radius: 3px; color: #fff; cursor: pointer; font-size: 14px; - font-weight: 400; - padding: 10px 20px; - -webkit-appearance: none; + padding: 6px 20px; } .button:hover { @@ -17,22 +14,27 @@ .button--primary.button.disabled, .button--primary.button.disabled:hover { - background-color: #DFDFDF; + background-color: #D8D8D8; + color: #666666; box-shadow: none; - color: #9F9F9F; } .button--primary { - background-color: #0D0764; - font-weight: 500; + background-color: #3E00FF; } .button--primary:hover { - background-color: #280076; + background-color: #3f00ff; } -.button--primary:active { - background-color: #1B0050; +.button--secondary { + color: #3E00FF; + border: 1px solid #3E00FF; +} + +.button--secondary:hover { + color: #3f00ff; + border-color: #3f00ff; } .button--primary-o { diff --git a/app/assets/v2/css/gitcoin.css b/app/assets/v2/css/gitcoin.css index bed28068172..46d1397b143 100644 --- a/app/assets/v2/css/gitcoin.css +++ b/app/assets/v2/css/gitcoin.css @@ -571,12 +571,12 @@ div.button-pink { } .dropdown-menu .dropdown-item { - padding: 12px 25px; + padding: 12px 25px !important; } .dropdown-menu .dropdown-item:hover { - background-color: #0D0764; - color: #FFFFFF; + background-color: #3E00FF; + color: #FFFFFF !important; } #why-gitcoin .dropdown-item { diff --git a/app/assets/v2/js/pages/bounty_details.js b/app/assets/v2/js/pages/bounty_details.js index 01a11d0f633..7076de3b803 100644 --- a/app/assets/v2/js/pages/bounty_details.js +++ b/app/assets/v2/js/pages/bounty_details.js @@ -875,17 +875,19 @@ var show_extend_deadline_modal = function() { }); }; -const appendGithubSyncButton = function(result) { +const showGithubSync = function(result) { if (isBountyOwner(result) || currentProfile.isStaff) { - const title = gettext('Sync Issue'); - - $('#github_actions').append(''); + $('#bounty-options-link').append( + ` + + Sync Issue + ` + ); - $('#github_actions [sync-github-issue]').on('click', function(e) { + $('#sync-github-issue').on('click', function(event) { + event.preventDefault(); const bountyId = result.pk; - e.preventDefault(); - $.get( '/sync/get_issue_details?url=' + encodeURIComponent(result['github_url']) + '&token=' + currentProfile.githubToken ).then(function(result) { @@ -943,9 +945,9 @@ var build_detail_page = function(result) { '' + result['bounty_owner_address'] + ''); $('#funder_notif_info').append('\ \ - \ + \ Ready to Pay? Set Your Metamask to this address!\ - \ + \ ' ); } @@ -993,7 +995,7 @@ var build_detail_page = function(result) { }); }); - appendGithubSyncButton(result); + showGithubSync(result); }; const is_current_user_interested = function(result) { @@ -1092,7 +1094,7 @@ var do_actions = function(result) { } // actions - const actions = []; + let actions = []; if (show_submit_work) { const enabled = submit_work_enabled; @@ -1103,6 +1105,7 @@ var do_actions = function(result) { parent: 'bounty_actions', title: gettext('Submit work for the funder to review'), work_started: is_interested, + primary: true, id: 'submit' }; @@ -1163,27 +1166,14 @@ var do_actions = function(result) { actions.push(release_to_public_entry); } - if (show_kill_bounty) { - const enabled = isBountyOwner(result); - const _entry = { - enabled: enabled, - href: result['action_urls']['cancel'], - text: gettext('Cancel Bounty'), - parent: 'bounty_actions', - title: gettext('Cancel bounty and reclaim funds for this issue'), - buttonclass: 'button--warning' - }; - - actions.push(_entry); - } - if (show_payout) { const enabled = isBountyOwner(result); const _entry = { enabled: enabled, href: result['action_urls']['payout'], - text: gettext('Payout Bounty'), + text: ` Payout Bounty`, title: gettext('Payout the bounty to one or more submitters.'), + primary: true, parent: 'bounty_actions' }; @@ -1205,45 +1195,39 @@ var do_actions = function(result) { } if (show_invoice) { - const _entry = { - enabled: true, - href: result['action_urls']['invoice'], - text: gettext('Show Invoice'), - parent: 'bounty_actions', - title: gettext('View an Invoice for this Issue') - }; - - actions.push(_entry); + $('#bounty-options-link').append( + ` + + Show Invoice + ` + ); } if (show_change_bounty) { + $('#bounty-options-link').append( + ` + + Update Details + ` + ); + + if (show_extend_deadline) { + $('#bounty-options-link').append( + ` + + Extend Deadline + ` + ); + } + const connector_char = result['url'].indexOf('?') == -1 ? '?' : '&'; + const remarket_url = result['url'] + connector_char + 'trigger_remarket=1'; - const _entry = [ - { - enabled: true, - href: '/bounty/change/' + result['pk'], - text: gettext('Edit Issue'), - parent: 'bounty_actions', - title: gettext('Update your Bounty Settings to get the right Crowd'), - edit_dropdown: true, - edit_issue_href: '/bounty/change/' + result['pk'], - show_extend_expiration: show_extend_deadline, - extend_expiration_href: '/extend-deadlines', - show_remarket: true, - remarket_enabled: result['can_remarket'], - remarket_url: result['url'] + connector_char + 'trigger_remarket=1' - }// , - // { - // enabled: true, - // href: '/issue/refund_request?pk=' + result['pk'], - // text: gettext('Request Fee Refund'), - // parent: 'right_actions', - // title: gettext('Raise a request if you believe you need your fee refunded') - // } - ]; - - actions.push(..._entry); + if (result['can_remarket']) { + $('#bounty-options-link').append( + `Remarket Issue` + ); + } } if (show_github_link) { @@ -1256,31 +1240,33 @@ var do_actions = function(result) { const _entry = { enabled: true, href: github_url, - text: (result['repo_type'] === 'private' ? ' ' + - gettext('Private Repo') : gettext('View On Github')) + - (result['is_issue_closed'] ? gettext(' (Issue is closed)') : ''), + text: (result['repo_type'] === 'private' ? ' ' + + gettext('Private Repo') : '' + gettext('View On Github')), parent: 'github_actions', title: gettext('View issue details and comments on Github'), comments: result['github_comments'], - color: 'white' + color: 'comments' }; actions.push(_entry); } - if (show_job_description) { - var job_url = result['attached_job_description']; - - var _entry = { - enabled: true, - href: job_url, - text: gettext('View Attached Job Description'), - parent: 'bounty_actions', - title: gettext('This bounty funder is hiring for a full time, part time, or contract role and has attached that to this bounty.'), - color: 'white' - }; + if (show_kill_bounty) { + $('#bounty-options-link').append( + ` + + Cancel Bounty + ` + ); + } - actions.push(_entry); + if (show_job_description) { + $('#bounty-options-link').append( + ` + + View Job Description + ` + ); } @@ -1293,9 +1279,7 @@ var do_actions = function(result) { href: url, text: gettext('Suspend Auto Approval'), parent: 'moderator-admin-actions', - title: gettext('Suspend *Auto Approval* of Bounty Hunters Who Have Applied for This Bounty'), - color: 'white', - buttonclass: 'admin-only' + title: gettext('Suspend *Auto Approval* of Bounty Hunters Who Have Applied for This Bounty') }; actions.push(_entry); @@ -1310,9 +1294,7 @@ var do_actions = function(result) { href: url, text: gettext('Hide Bounty'), parent: 'moderator-admin-actions', - title: gettext('Hides Bounty from Active Bounties'), - color: 'white', - buttonclass: 'admin-only' + title: gettext('Hides Bounty from Active Bounties') }; actions.push(_entry); @@ -1320,102 +1302,76 @@ var do_actions = function(result) { if (show_admin_methods || show_moderator_methods) { const connector_char = result['url'].indexOf('?') == -1 ? '?' : '&'; - const url = result['url'] + connector_char + 'admin_toggle_as_remarket_ready=1'; - const _entry = { + let _entry = { enabled: true, - href: url, + href: result['url'] + connector_char + 'admin_toggle_as_remarket_ready=1', text: gettext('Toggle Remarket Ready'), parent: 'moderator-admin-actions', - title: gettext('Sets Remarket Ready if not already remarket ready. Unsets it if already remarket ready.'), - color: 'white', - buttonclass: 'admin-only' + title: gettext('Sets Remarket Ready if not already remarket ready. Unsets it if already remarket ready.') }; actions.push(_entry); - } - if ((show_admin_methods || show_moderator_methods) && needs_review) { - const connector_char = result['url'].indexOf('?') == -1 ? '?' : '&'; - const url = result['url'] + connector_char + 'mark_reviewed=1'; - - const _entry = { + _entry = { enabled: true, - href: url, - text: gettext('Mark as Reviewed'), + href: '', + text: gettext('Snooze Gitcoinbot'), parent: 'moderator-admin-actions', - title: gettext('Marks the bounty activity as reviewed.'), - color: 'white', - buttonclass: 'admin-only' + title: gettext('Snooze Gitcoinbot reminders') }; - actions.push(_entry); - } - if (show_admin_methods) { - const url = ''; + if (needs_review) { + const connector_char = result['url'].indexOf('?') == -1 ? '?' : '&'; + const url = result['url'] + connector_char + 'mark_reviewed=1'; - const _entry = { - enabled: true, - href: url, - text: gettext('Contact Funder'), - parent: 'moderator-admin-actions', - title: gettext('Contact Funder via Email'), - color: 'white', - buttonclass: 'admin-only contact_bounty_hunter' - }; + const _entry = { + enabled: true, + href: url, + text: gettext('Mark as Reviewed'), + parent: 'moderator-admin-actions', + title: gettext('Marks the bounty activity as reviewed.') + }; - actions.push(_entry); + actions.push(_entry); + } } - if (show_admin_methods || show_moderator_methods) { - const url = ''; - - const _entry = { + if (show_admin_methods) { + let _entry = { enabled: true, - href: url, - text: gettext('Snooze Gitcoinbot'), + href: '', + text: gettext('Override Status'), parent: 'moderator-admin-actions', - title: gettext('Snooze Gitcoinbot reminders'), - color: 'white', - buttonclass: 'admin-only snooze_gitcoin_bot' + title: gettext('Override Status with a status of your choosing'), + buttonclass: 'admin_override_satatus' }; actions.push(_entry); - } - if (show_admin_methods) { - const url = ''; - - const _entry = { + _entry = { enabled: true, - href: url, - text: gettext('Override Status'), + href: '/_administrationdashboard/bounty/' + result['pk'] + '/change/', + text: gettext('View in Admin'), parent: 'moderator-admin-actions', - title: gettext('Override Status with a status of your choosing'), - color: 'white', - buttonclass: 'admin-only admin_override_satatus' + title: gettext('View in Admin') }; - actions.push(_entry); - } - - if (show_admin_methods) { - const url = '/_administrationdashboard/bounty/' + result['pk'] + '/change/'; - const _entry = { + _entry = { enabled: true, - href: url, - text: gettext('View in Admin'), + href: '', + text: gettext('Contact Funder'), parent: 'moderator-admin-actions', - title: gettext('View in Admin'), - color: 'white', - buttonclass: 'admin-only' + title: gettext('Contact Funder via Email'), + buttonclass: 'contact_bounty_hunter' }; actions.push(_entry); } + $('#bounty-options-link').text().trim() == '' ? $('#bounty-options').hide() : $('#bounty-options').show(); render_actions(actions); }; diff --git a/app/dashboard/templates/bounty/details.html b/app/dashboard/templates/bounty/details.html index 3dedac7d6ec..d258f2d2dcd 100644 --- a/app/dashboard/templates/bounty/details.html +++ b/app/dashboard/templates/bounty/details.html @@ -25,6 +25,8 @@ {% include 'shared/nav.html' %}
+
+
{% if event_tag %} @@ -47,7 +49,6 @@
{% trans "Be the OSS Funding you wish to see in the world." %}

{% url 'new_funding' as new_fundingurl %}{% blocktrans %}Looking to fund some work? You can submit a new Funded Issue here.{% endblocktrans %}

-
@@ -74,7 +75,6 @@

-
@@ -135,20 +135,35 @@

+ +
+
+
+
-
+
- +
+ + +
+
+ + + Share +
-
-
{% trans "Description" %}
+
+
{% trans "Description" %}
@@ -209,8 +224,8 @@
{% trans "Funder" %}
[[:text]] ( [[:pending_acceptance]] ) - [[else color == 'white']] - + [[else color == 'comments']] + [[if comments]] [[:text]] @@ -226,23 +241,9 @@
{% trans "Funder" %}
[[/if]] [[else]] - [[if edit_dropdown]] -
- - -
- {% trans "Edit Issue Details" %} - [[if show_extend_expiration]] {% trans "Extend Expiration" %} [[/if]] - [[if show_remarket]] {% trans "Re-market Issue" %} [[/if]] -
-
- [[else]] - - [[:text]] - - [[/if]] + + [[:text]] + [[/if]] diff --git a/app/dashboard/templates/bounty/fund.html b/app/dashboard/templates/bounty/fund.html index 8a8780ca513..22c852d9518 100644 --- a/app/dashboard/templates/bounty/fund.html +++ b/app/dashboard/templates/bounty/fund.html @@ -85,7 +85,7 @@
Important Notes on Private Repo

{% trans "Last Synced " %}

-
@@ -104,7 +104,7 @@
Important Notes on Private Repo