Revert "Colorful Status Update System"

app/app/urls.py

@@ -136,7 +136,6 @@
     ),
     url(r'^api/v0.1/profile/(?P<handle>.*)', dashboard.views.profile_details, name='profile_details'),
     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,59 +52,6 @@
   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;
@@ -125,6 +72,7 @@ a .sup {
 
 .tip_activity,
 .action:hover {
+  background-color: #fafafa;
   cursor: pointer;
 }
 
@@ -205,7 +153,7 @@ a .sup {
 }
 
 
-.tip_activity {
+.tip_activity{
   color: black;
 }
 

app/assets/v2/js/status.js

@@ -4,65 +4,18 @@ 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;
@@ -202,9 +155,7 @@ $(document).ready(function() {
     } else {
       $('#thumbnail-desc').text('');
       if (no_lb) {
-        if (embedded_resource != $('#bg-selector').attr('data-selected')) {
-          embedded_resource = '';
-        }
+        embedded_resource = '';
         $('#thumbnail').hide();
       }
     }
@@ -267,69 +218,22 @@ $(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);
-  });
-
-
-  document.is_shift = false;
-  // handle shift button
-  $('body').on('keyup', '#textarea', function(e) {
-    if (e.keyCode == 16) {
-      document.is_shift = false;
-    }
-  });
-  // handle shift button
+  // handle poll 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');
 
     if (is_selected) {
       let html = `
-        <div id=poll_container class="bg-lightblue p-2">
-        <input name=option1 placeholder="Option 1" class="form-control form-control-sm my-2">
-        <input name=option2 placeholder="Option 2" class="form-control form-control-sm my-2">
-        <input name=option3 placeholder="Option 3" class="form-control form-control-sm my-2">
-        <input name=option4 placeholder="Option 4" class="form-control form-control-sm my-2">
-        </div>
-        `;
+      <div id=poll_container class="bg-lightblue p-2">
+      <input name=option1 placeholder="Option 1" class="form-control form-control-sm my-2">
+      <input name=option2 placeholder="Option 2" class="form-control form-control-sm my-2">
+      <input name=option3 placeholder="Option 3" class="form-control form-control-sm my-2">
+      <input name=option4 placeholder="Option 4" class="form-control form-control-sm my-2">
+      </div>
+      `;
 
       $(html).insertAfter('#status');
       $('#poll_container input[name=option1]').focus();
@@ -344,11 +248,6 @@ $(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');
 
@@ -357,10 +256,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 {
@@ -416,7 +315,6 @@ $(document).ready(function() {
     if ($('#btn_post').is(':disabled')) {
       return;
     }
-
     const data = new FormData();
     const message = $('#textarea');
     const the_message = message.val().trim();
@@ -444,7 +342,6 @@ $(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');
@@ -457,10 +354,6 @@ $(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);
@@ -470,9 +363,7 @@ $(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,14 +6,13 @@
       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 %}
@@ -34,8 +33,6 @@
       </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 %}