QA: Implement Avatar builder Frontend (Fixes gitcoinco#813) (gitcoinco#967)

* add avatar builder view and create basic components

* improve layout responsiveness, add color picker, add completed bullet

* further improve responsive layout

* Add section navigation

* Begin adding assets

* Finish filling in options for body and background

* Add face preview

* add preview for all face sections

* Create all preview layers and order properly

* add short hairstyles and hair color picker

* add long hairstyles in black

* Add remaining hair colors

* Add one color of clothing

* Get accessory preview (mostly) working

* Fix avatar layer positioning

Ported all existing options to new organization except accessories

* Add Facial Hair

* split avatar builder js into its own file

* split avatar builder css into separate file

* move layers logic to js

* display notification when avatar complete

* add skin and hair color pickers

* add fantasy hair colors

* fix style errors

* fix plaid clothing asset

* Add some clothing color options and refactor color picker

* Add 4242F4 clothing option

* Add 43B9F9 clothing option

* add final clothing color F48914

* add button styling

* add placeholder submit action

* fix facial hair positioning

* fix bug where facial hair preview color would not update

* UX and styling tweaks

* add selected style for color picker

* remove selected style for old option in all but accessories section

* make selected state work correctly for accessories

* add checkmark to selected style

* add option hover style

* implement removal of optional layers

* add removeable styles

* standardize some styles

* move avatar builder to onboarding flow and restore functionality

* move avatar builder to onboarding flow

also restored functionality and fixed non-layout styles

* add avatar model

* add renamed avatar builder template

* add avatar migrations and view to set avatar

* move css static file references to css

* optimize images

* create process for rendering and serving a single avatar config

* Switch to background-image instead of img src for correct positioning

optimized svgs lose their size attributes

* tweak beard positioning and add config POST to save btn

* use data attributes as a more cross-browser way to set paths

* switch to rem units for relevant css rules

* merge migration'

* save avatar

* Fix migrations and rename avatar template for onboard usage

* Add BE for template and asset based avatar generation and S3 asset saving

* Add avatars prefix to upload path

* Add custom avatar rendering to profile page

* Add avatar lookup and render before performing standard avatar rendering logic

* Fix

* Changes image path on change of color

* Fixes the buttons in the FTUX flow and avatar page

* Show visual indication for saving and saved

* onboard: minor changes after feedback

- updated content on github.html
- move icons on GitHub page
- green check mark to come after GitHub unlocked ( and metamask )
- reduction spacing between buttons & increase size
- font lighter
- link contributing guide
- remove contributor tips
- remove border-radius on wizard edged
- remove capitalize aka camelcase
- increased min-height of avatar-builder
- added margin-top to avatar section to align it with builder
- updated height of avatar-preview
- updated default background color in avatar

* Dont show button when logged in or metamask locked

* Adjust save avatar response to json and modify update avatar handling

* Update avatar save to record useraction

* Makes the swatches and the avatar area into proper grid

* Update media storage handling to use local FS for local

* Redirect to login in onboard and link on index page

* Save avatar and load it on reload

* Add two new colors to skin

* Reorder color palette for skin

* Whoops

* Fix frontend issues in avatar page

- Rename text in success alert
- Remove the text "Your avatar is complete" which appear when the avatar is saved
- Hide alert when you move to next page
- Move Save button above previous and next
- When all the items in a category (like accessories ) are unchecked -> the left sidebar should reflect status as unchecked (should become a square instead of tick)
- Reduce spacing between heading "Pick your xxx" and the avatar builder

* Adjust avatar on github step

* onboard: fixes

- hide video is user is logged in to metamask
- remove line breaks between first two para
- updated text in Metamask
- rename suggest skills -> suggest skills that apply
- reduce the bullet size of tips section
- link the Get Started here on the footer to the funder form

* Reduce spacing between heading 'Pick your xxx' and the avatar builder

* Re-enable analytics for non-prod envs...

* removed csrf from avatar.html

* when skills autopopulates -> change to plus icon to tick on highlighted skills

* Move existing avatar logic to the avatar app

* added UI for avatar in settings/account

* Add png field to store GH avatars on Avatar and temp file handling

* Fixes avatar reload for non compulsory items

* Adds check for ids in localstorage

* Add onboard url to welcomebot

* Remove 3F2A18 and add EEE3C1 skintones

* Change quickstart link copy

* Do this later button changestep

* Adjust pallete to palette

* hide do later button on save, show on error

* Typos and disable login redirect to accommodate the ftux github login step

* Fixes some more things suggested by Alisa

- Removes shadow from buttons
- Make buttons look same throughout FTUX
- 3 buttons as shown in the screenshot by alisa for avatar
- Do this later works
- Do this later button disabled on saving

* Updates for account settings for avatar editing

* Adjust use_github_avatar on svg av save

* Fix taking to the next step after saving

* Minor avatar handling adjustments

* yapf

* Consolidate migrations

Author: Smona

.gitignore

@@ -12,6 +12,7 @@ app/assets/other/wp.pdf
 app/assets/tmp/*
 app/assets/other/avatars/
 app/gcoin/
+app/media/
 .idea/
 venv/
 .coverage
@@ -37,4 +38,4 @@ webpack-stats.json
 
 *.prof
 
-.pytest_cache/
+.pytest_cache/

Makefile

@@ -26,7 +26,7 @@ fix-stylelint: ## Run stylelint --fix against the project directory. Requires no
 	@npm run stylelint:fix
 
 fix-yapf: ## Run yapf against any included or newly introduced Python code.
-	@docker-compose exec web yapf -i -r -e "app/**/migrations/*.py" -p app/dataviz/ app/app/ app/enssubdomain/
+	@docker-compose exec web yapf -i -r -e "app/**/migrations/*.py" -p app/dataviz/ app/app/ app/enssubdomain/ app/avatar/
 
 fix: fix-eslint fix-stylelint fix-isort fix-yapf ## Attempt to run all fixes against the project directory.
 

app/app/settings.py

@@ -70,6 +70,7 @@
     'django_extensions',
     'easy_thumbnails',
     'app',
+    'avatar',
     'retail',
     'rest_framework',
     'bootstrap3',
@@ -232,9 +233,6 @@
 
 GEOIP_PATH = env('GEOIP_PATH', default='/usr/share/GeoIP/')
 
-DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
-THUMBNAIL_DEFAULT_STORAGE = DEFAULT_FILE_STORAGE
-
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/1.11/howto/static-files/
 STATICFILES_STORAGE = env('STATICFILES_STORAGE', default='app.static_storage.SilentFileStorage')
@@ -467,6 +465,14 @@
 S3_REPORT_BUCKET = env('S3_REPORT_BUCKET', default='')  # TODO
 S3_REPORT_PREFIX = env('S3_REPORT_PREFIX', default='')  # TODO
 
+# Handle local file storage
+if ENV == 'local' and not AWS_STORAGE_BUCKET_NAME:
+    MEDIA_URL = '/media/'
+    MEDIA_ROOT = root('media')
+else:
+    DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
+    THUMBNAIL_DEFAULT_STORAGE = DEFAULT_FILE_STORAGE
+
 INSTALLED_APPS += env.list('DEBUG_APPS', default=[])
 
 # Faucet App config

app/app/urls.py

@@ -17,12 +17,14 @@
 '''
 from django.conf import settings
 from django.conf.urls import include, url
+from django.conf.urls.static import static
 from django.contrib import admin
 from django.contrib.auth import views as auth_views
 from django.contrib.sitemaps.views import sitemap
 from django.urls import path, re_path
 from django.views.i18n import JavaScriptCatalog
 
+import avatar.views
 import credits.views
 import dashboard.embed
 import dashboard.helpers
@@ -80,6 +82,9 @@
     path('issue/increase', dashboard.views.increase_bounty, name='increase_bounty'),
     path('issue/cancel', dashboard.views.cancel_bounty, name='kill_bounty'),
 
+    # Avatars
+    path('avatar/', include('avatar.urls', namespace='avatar')),
+
     # Interests
     path('actions/bounty/<int:bounty_id>/interest/new/', dashboard.views.new_interest, name='express-interest'),
     path('actions/bounty/<int:bounty_id>/interest/remove/', dashboard.views.remove_interest, name='remove-interest'),
@@ -145,8 +150,8 @@
 
     # images
     re_path(r'^funding/embed/?', dashboard.embed.embed, name='embed'),
-    re_path(r'^funding/avatar/?', dashboard.embed.avatar, name='avatar'),
-    re_path(r'^static/avatar/(.*)/(.*)?', dashboard.embed.avatar, name='org_avatar'),
+    re_path(r'^funding/avatar/?', avatar.views.handle_avatar, name='avatar'),
+    re_path(r'^static/avatar/(.*)/(.*)?', avatar.views.handle_avatar, name='org_avatar'),
     re_path(r'^static/viz/graph/(.*)?$', dataviz.d3_views.viz_graph, name='viz_graph'),
     re_path(r'^static/viz/sscatterplot/(.*)?$', dataviz.d3_views.viz_scatterplot_stripped, name='viz_sscatterplot'),
 
@@ -352,6 +357,9 @@
 if settings.ENABLE_SILK:
     urlpatterns += [url(r'^silk/', include('silk.urls', namespace='silk'))]
 
+if settings.ENV == 'local' and not settings.AWS_STORAGE_BUCKET_NAME:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+
 handler403 = 'retail.views.handler403'
 handler404 = 'retail.views.handler404'
 handler500 = 'retail.views.handler500'

app/assets/v2/css/avatar_builder.css

@@ -0,0 +1,226 @@
+#avatar-builder {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+#avatar-builder__sections {
+  text-align: left;
+  list-style-type: square;
+  list-style-position: inside;
+  padding-left: 0;
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+#avatar-builder__sections li {
+  width: 10rem;
+  padding: 5px;
+  color: #15003e;
+  text-decoration: none;
+}
+
+#avatar-builder__sections li.open {
+  text-decoration: underline;
+}
+
+#avatar-builder__sections li.complete {
+  list-style-image: url('/static/v2/images/check-dark.svg');
+}
+
+#avatar-builder__editor {
+  flex-grow: 0;
+}
+
+#section-title {
+  flex-basis: 100%;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.section-title__content {
+  display: none;
+}
+
+.section-title__content.open {
+  display: unset;
+}
+
+#avatar-preview {
+  width: 250px;
+  height: 256px;
+  background-color: #D8D8D8;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.preview-section {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.options-section {
+  height: min-content;
+  overflow: scroll;
+  display: none !important;
+  justify-content: center;
+}
+
+.options-section.open {
+  display: flex !important;
+}
+
+button.avatar-option {
+  border: none;
+  width: 80px;
+  height: 80px;
+  background-color: #D8E7FF;
+  margin: 0 0 8px 8px;
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.avatar-option div, #avatar-preview div {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.avatar-option::after {
+  position: absolute;
+  bottom: -8px;
+  right: -8px;
+  color: white;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+}
+
+.avatar-option:hover {
+  border: 2px solid #00BB61;
+}
+
+.avatar-option:hover::before {
+  position: absolute;
+  content: '';
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #00BB61;
+  opacity: .2;
+  z-index: 10;
+}
+
+.avatar-option:hover::after {
+  content: '+';
+  background-color: #00BB61;
+  z-index: 11;
+}
+
+.avatar-option.selected:hover::before {
+  display: none;
+}
+
+.avatar-option.selected::after {
+  content: url('/static/v2/images/check.svg');
+  background-color: #150069;
+}
+
+.optional .avatar-option.selected:hover {
+  border-color: #FFA400 !important;
+}
+
+.optional .avatar-option.selected:hover::before {
+  display: unset;
+  background-color: #FFA400;
+}
+
+.optional .avatar-option.selected:hover::after {
+  background-color: #FFA400;
+  content: '-';
+}
+
+.color-option {
+  width: 100%;
+  height: 100%;
+}
+
+#avatar-builder__actions {
+  text-align: right;
+  margin-top: 2rem;
+  width: 100%;
+}
+
+#color-picker {
+  text-align: center;
+  display: flex;
+  line-height: 1;
+}
+
+.options-Background__option {
+  height: 28px;
+  border: 1px solid #C4C4C4;
+  cursor: pointer;
+  flex-grow: 1;
+}
+
+.selected, .avatar-option:active, .options-Background__option:active {
+  border: 2px solid #150069 !important;
+}
+
+@media (min-width: 500px) {
+
+  #avatar-builder {
+    flex-wrap: nowrap !important;
+  }
+
+  #avatar-builder__sections {
+    display: block;
+    flex-basis: 170px;
+  }
+}
+
+@media (min-width: 845px) {
+
+  #avatar-area {
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
+    max-width: 525px;
+  }
+
+  #section-title {
+    text-align: left;
+  }
+
+  .options-section {
+    overflow: auto;
+    max-height: 264px;
+    justify-content: flex-start;
+  }
+
+  #color-picker {
+    text-align: left;
+  }
+}

app/assets/v2/css/dashboard.css

@@ -48,7 +48,7 @@ body {
 }
 
 #onboard-dashboard .tips .fa-circle {
-  font-size: 0.35rem;
+  font-size: 5.7px;
   margin-right: 0.4rem;
   top: -2px;
   position: relative;

app/assets/v2/css/forms/button.css

@@ -21,6 +21,7 @@
   background-color: rgba(79, 79, 79, 0.26);
   box-shadow: none;
   color: rgba(0, 0, 0, 0.26);
+  border-color: rgba(0,0,0, 0.3);
 }
 
 .button--primary {
@@ -39,7 +40,7 @@
   background-color: #fff;
   border: 1px solid #0D0764;
   color: #0D0764;
-  padding: 8px 18px;
+  padding: 9px 18px;
 }
 
 .button--primary-o:hover {