background post

app/app/urls.py

@@ -135,6 +135,7 @@
     url(r'^api/v0.1/profile/(?P<handle>.*)', dashboard.views.profile_details, name='profile_details'),
     url(r'^api/v0.1/user_card/(?P<handle>.*)', dashboard.views.user_card, name='user_card'),
     url(r'^api/v0.1/banners', dashboard.views.load_banners, name='load_banners'),
+    url(r'^api/v0.1/status_wallpapers', townsquare.views.load_wallpapers, name='load_wallpapers'),
     url(
         r'^api/v0.1/get_suggested_contributors',
         dashboard.views.get_suggested_contributors,

app/assets/v2/css/activity_stream.css

@@ -52,6 +52,59 @@
   text-align: left;
 }
 
+#bg-selector {
+  height: 4em;
+  width: 100%;
+  padding: 0.5em;
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.bg-thumbnail {
+  display: inline-block;
+  height: 2.35em;
+  width: 2em;
+  margin-left:0.2em;
+  margin-right: 0.2em;
+}
+
+.bg-icon {
+  width:100%;
+  cursor: pointer;
+}
+
+.status_background {
+  width:100%;
+}
+
+.status_background_container {
+  margin-top: 1em;
+  position: relative;
+}
+
+.image-text-container {
+  padding:1.5em;
+  text-align: center;
+  width: 100%;
+  text-overflow: wrap;
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 18pt;
+  font-weight: bold;
+}
+
+
+.selector-bar {
+  background-color: #3E00FF;
+  height: 0.15em;
+  width: 100%;
+  margin-top: 0.2em;
+  border-radius: 0.075em;
+}
+
 .action {
   padding: 3px;
   border-radius: 5px;
@@ -70,6 +123,11 @@ a .sup {
   color: black;
 }
 
+.tip_activity,
+.action:hover {
+  cursor: pointer;
+}
+
 .action.open {
   background-color: #eeeeee;
 }
@@ -157,7 +215,7 @@ a .sup {
 }
 
 
-.tip_activity{
+.tip_activity {
   color: black;
 }
 

app/assets/v2/js/status.js

@@ -4,18 +4,65 @@ const youtube_re = /(?:https?:\/\/|\/\/)?(?:www\.|m\.)?(?:youtu\.be\/|youtube\.c
 const giphy_re = /(?:https?:\/\/)?(?:media0\.)?(?:giphy\.com\/media\/)/;
 
 $(document).ready(function() {
+
   var embedded_resource = '';
   const GIPHY_API_KEY = document.contxt.giphy_key;
 
   let button = document.querySelector('#btn_post');
 
+  // populates background selector on load
+  let bgs = [
+    'cannon-green-blue',
+    'h2-v2',
+    'burst-yellow',
+    'burst-pink',
+    'burst-blue',
+    'eletric_design',
+    'dvdptr-blue-green',
+    'cannon-yellow-pink',
+    'network-yellow',
+    'h4',
+    'network-blue',
+    'network-pink',
+    'h2',
+    'cannon-blue-yellow',
+    'dvdptr-blue-yellow'
+  ];
+
+  let selector = $('#bg-selector');
+
+  for (var i = 0; i < bgs.length; i++) {
+    selector.append('<div data-bg-name="' + bgs[i] + '" class="bg-thumbnail"><img class="bg-icon" draggable="false" src="/static/status_backgrounds/' + bgs[i] + '-icon.png"/><div class="selector-bar hide"></div></div>');
+  }
+
+  function closeBackgroundDropdown(e) {
+    e.preventDefault();
+    $('#bg-selector').attr('data-selected', null);
+    $('#bg-selector').addClass('hide');
+    embedded_resource = '';
+    $('#bg-selector').children('div').children('div').addClass('hide');
+  }
+
   function selectGif(e) {
     embedded_resource = $(e.target).data('src');
     $('#preview-img').attr('src', embedded_resource);
     $('#preview').show();
     $('#thumbnail').hide();
   }
 
+  function deselectGif(e) {
+    embedded_resource = '';
+    $('#preview-img').attr('src', '');
+    $('#preview').hide();
+    $('#thumbnail').hide();
+    $('#btn_gif').removeClass('selected');
+    $('.gif-inject-target').removeClass('show');
+  }
+
+  function deselectVideo(e) {
+    $('#video-button').removeClass('selected');
+    $('#video_container').remove();
+  }
 
   function injectGiphy(query) {
     const endpoint = 'https://api.giphy.com/v1/gifs/search?limit=13&api_key=' + GIPHY_API_KEY + '&offset=0&rating=G&lang=en&q=' + query;
@@ -155,7 +202,9 @@ $(document).ready(function() {
     } else {
       $('#thumbnail-desc').text('');
       if (no_lb) {
-        embedded_resource = '';
+        if (embedded_resource != $('#bg-selector').attr('data-selected')) {
+          embedded_resource = '';
+        }
         $('#thumbnail').hide();
       }
     }
@@ -218,10 +267,57 @@ $(document).ready(function() {
     $('#textarea').focus();
   }
 
+  $('#btn_gif').click(function(e) {
+    e.preventDefault();
+    closeBackgroundDropdown(e);
+    deselectVideo(e);
+
+    $('#poll-button').removeClass('selected');
+    $('#poll_container').remove();
+  });
+
+  var selectedElement = null;
+  // handle background selection
+
+  $('.bg-thumbnail').click(function(e) {
+    e.preventDefault();
+
+    $('#bg-selector').find('.selector-bar').addClass('d-none');
+    $(this).children('div').removeClass('d-none');
+
+    selectedElement = $(this);
+    $('#bg-selector').attr('data-selected', $(this).attr('data-bg-name'));
+    embedded_resource = $(this).attr('data-bg-name');
+  });
+
+  // handle add background button push
+  $('body').on('click', '#background-button', function(e) {
+    e.preventDefault();
+    $('#bg-selector').toggleClass('d-none');
+    if ($('#bg-selector').hasClass('d-none')) {
+      closeBackgroundDropdown(e);
+    }
+
+    $('#poll-button').removeClass('selected');
+    $('#poll_container').remove();
+    deselectVideo(e);
+    deselectGif(e);
+  });
 
-  // handle poll button
+
+  document.is_shift = false;
+  // handle shift button
+  $('body').on('keyup', '#textarea', function(e) {
+    if (e.keyCode == 16) {
+      document.is_shift = false;
+    }
+  });
+  // handle shift button
   $('body').on('click', '#poll-button', function(e) {
     e.preventDefault();
+    deselectGif(e);
+    closeBackgroundDropdown(e);
+    deselectVideo(e);
     $(this).toggleClass('selected');
     var is_selected = $(this).hasClass('selected');
 
@@ -246,6 +342,11 @@ $(document).ready(function() {
   // handle video button
   $('body').on('click', '#video-button', function(e) {
     e.preventDefault();
+    closeBackgroundDropdown(e);
+    deselectGif(e);
+    $('#poll-button').removeClass('selected');
+    $('#poll_container').remove();
+
     $(this).toggleClass('selected');
     var is_selected = $(this).hasClass('selected');
 
@@ -254,10 +355,10 @@ $(document).ready(function() {
       const item = $(this).data('gfx') ? $(this).data('gfx') : items[Math.floor(Math.random() * items.length)];
 
       let html = `
-      <div data-gfx=` + item + ` id=video_container class="bg-lightblue p-2">
+        <div data-gfx=` + item + ` id=video_container class="bg-lightblue p-2">
         <img src='/static/v2/images/` + item + `'>
-      </div>
-      `;
+        </div>
+        `;
 
       $(html).insertAfter('#status');
     } else {
@@ -313,6 +414,7 @@ $(document).ready(function() {
     if ($('#btn_post').is(':disabled')) {
       return;
     }
+
     const data = new FormData();
     const message = $('#textarea');
     const the_message = message.val().trim();
@@ -340,6 +442,7 @@ $(document).ready(function() {
       const description = $('#thumbnail-desc').text();
       const image = $('#thumbnail-img').attr('src');
       const youtube = embedded_resource.match(youtube_re);
+      const background = $('#bg-selector').attr('data-selected');
 
       if (embedded_resource.match(giphy_re)) {
         data.append('resource', 'gif');
@@ -352,6 +455,10 @@ $(document).ready(function() {
         data.append('title', title);
         data.append('description', description);
         data.append('image', image);
+      } else if (background != null) {
+        data.append('resource', 'background');
+        data.append('resourceProvider', 'gitcoin');
+        data.append('resourceId', background);
       } else {
         data.append('resource', 'content');
         data.append('resourceProvider', link);
@@ -361,7 +468,9 @@ $(document).ready(function() {
         data.append('image', image);
       }
     }
-
+    $('#bg-selector').attr('data-selected', null);
+    $('#bg-selector').addClass('d-none');
+    $('#bg-selector').children('div').children('div').addClass('d-none');
     var fail_callback = function() {
       message.val(the_message);
       localStorage.setItem(lskey, the_message);

app/dashboard/templates/profiles/status_box.html

@@ -6,13 +6,14 @@
       id="textarea"
       class="form__input p-2 font-body status-textarea"
       placeholder="{% if placeholder %}{{placeholder}}{%else%}What are you thinking?{%endif%}"
+      style="resize: none; height: 7em;"
       data-maxlen={% if max_length %}{{max_length}}{%else%}280{%endif%}
-      style="height: 70px;"
     ></textarea>
     <input type="hidden" name="what" value="{{what}}:{{whatid}}">
     <div id="textarea-dropdown" class="dropdown-menu" style="top: initial; left: initial;"></div>
     <div class="status-menu position-absolute d-flex flex-wrap" style="width: 3.6em; right: 0; top: 0px;">
       <button id="emoji-button" class="btn btn-sm p-1" data-toggle="tooltip" title="Add an emoji to post." style="bottom: 3.5em; right: 0;"><i class="far fa-fw fa-smile"></i></button>
+      <button id="background-button" style="bottom: 3.5em; right: 0em; flex:1;" class="btn btn-sm p-1"><i class="fas fa-image" data-toggle="tooltip" title="" data-original-title="Add a background to post"></i></button>
       {% if is_alpha_tester %}
         <button id="video-button" class="btn btn-sm p-1" data-toggle="tooltip" title="Add a video call to post." style="bottom: 3.5em; right: 1.5em;"><i class="fas fa-fw fa-video"></i></i></button>
       {% endif %}
@@ -33,6 +34,8 @@
       </div>
       <button id="poll-button" class="btn btn-sm p-1" data-toggle="tooltip" title="Add a poll to post." style="bottom: 2em; right: 0em;"><i class="fas fa-fw fa-chart-bar"></i></i></button>
     </div>
+    <div class="d-none" id="bg-selector">
+    </div>
   </div>
   <div class="btn-group-toggle text-center text-md-left activity_type_selector" {% if not suppress_data_toggle %} data-toggle="buttons" {%endif%}>
     {% if tags %}