Merge pull request #1088 from TOMToolkit/1073-add-copy-button-to-targ…

…et-coordinates-radec

1073 add copy button to target coordinates radec

docs/customization/index.rst

@@ -9,6 +9,7 @@ Customization
   adding_pages
   customize_template_tags
   testing_toms
+  widgets
 
 
 Start here to learn how to customize the look and feel of your TOM or add new functionality.
@@ -22,4 +23,6 @@ displaying static html pages or dynamic database-driven content.
 :doc:`Customizing Template Tags <customize_template_tags>` - Learn how to write your own template tags to display 
 the data you need.
 
-:doc:`Testing TOMs <testing_toms>` - Learn how to test your TOM's functionality.
+:doc:`Testing TOMs <testing_toms>` - Learn how to test your TOM's functionality.
+
+:doc:`TOM Widgets <widgets>` - Include these widgets in your custom templates.

docs/customization/widgets.rst

@@ -0,0 +1,55 @@
+Widgets
+=======
+
+The TOM uses a number of custom widgets to display information in a more user-friendly way. These widgets are
+implemented as Django template tags and can be used in any template.
+Be sure to include ``{% load tom_common_extras %}`` at the top of your template to load the required tags.
+
+Copy Button:
+------------
+.. automodule:: tom_common.templatetags.tom_common_extras.copy_button
+    :members:
+
+Popup Notification (Toast):
+---------------------------
+
+If you wish to add a small, but obvious, non-intrusive popup notification that will temporarily appear at the top
+of the page (commonly referred to as a Toast Notification), the TOMtoolkit provides the following strategy to do so.
+
+Add the toast class to a div to create a temporary notification at the top of the TOM.
+Add something like the following codeblock to your template. Anything that can trigger a javascript function can be
+used to show the toast.
+
+.. code-block:: html
+
+    <button onclick="ShowToast()">Show Toast</button>
+    <div id="toast_window" class="toast">Thing inside the toast window! </div>
+
+    {% block scripts %}
+    <script>
+      function ShowToast() {
+      // Get the toast DIV
+      var x = document.getElementById("toast_window");
+
+      // Add the "show" class to DIV
+      x.className += " show";
+
+      // After 3 seconds, remove the show class from DIV
+      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+    }
+    </script>
+    {% endblock scripts %}
+
+Change the background color of the toast by adding a class to the toast div.
+i.e. ``class="toast warning"`` will change the background color to yellow (unless you have changed your root colors):
+
+|image0|
+
+The following classes are available:
+ - primary
+ - info
+ - success
+ - warning
+ - danger
+
+.. |image0| image:: /_static/customize_templates_doc/toast_example.png

tom_common/static/font-awesome-4.7.0/HELP-US-OUT.txt

@@ -0,0 +1,7 @@
+I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
+Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
+comprehensive icon sets or copy and paste your own.
+
+Please. Check it out.
+
+-Dave Gandy