Permalink
Browse files

Added basic view elements

  • Loading branch information...
karlbright committed Oct 18, 2012
1 parent 0ed873b commit 32a5425636f38e532eec265579bd760c47900202
View
@@ -12,6 +12,7 @@ gem 'fog'
gem 'jquery-rails'
gem 'haml-rails'
gem 'formtastic'
+gem 'mini_colors-rails'
gem 'daemons'
gem 'delayed_job_active_record'
View
@@ -117,6 +117,8 @@ GEM
mime-types (~> 1.16)
treetop (~> 1.4.8)
mime-types (1.19)
+ mini_colors-rails (1.0.5)
+ railties (~> 3.1)
multi_json (1.3.6)
net-scp (1.0.4)
net-ssh (>= 1.99.1)
@@ -218,6 +220,7 @@ DEPENDENCIES
graylog2_exceptions!
haml-rails
jquery-rails
+ mini_colors-rails
open4
pg
rails (= 3.2.8)
@@ -12,4 +12,8 @@
//
//= require jquery
//= require jquery_ujs
-//= require_tree .
+//= require minicolors
+
+$(function(){
+ $('#stylesheet_primary_color').miniColors();
+});
@@ -9,5 +9,5 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
- *= require_tree .
+ *= require minicolors
*/
@@ -0,0 +1,6 @@
+= semantic_form_for @stylesheet do |f|
+ = f.inputs name: 'General settings' do
+ = f.input :primary_color
+ = f.input :author
+ = f.input :version, as: :select, collection: {"1.0 (Latest)" => "1.0"}, include_blank: false
+ = f.submit text: "Generate"
@@ -1,8 +1,12 @@
%h1 Stylesheets
+= link_to 'Create new stylesheet', new_stylesheet_path
%ul
- for stylesheet in @stylesheets
%li
- = stylesheet.primary_color
+ - if stylesheet.last_generated?
+ = link_to stylesheet.primary_color, stylesheet.file.url
+ - else
+ = stylesheet.primary_color
(
= link_to 'Generate', generate_stylesheet_path(stylesheet)
- if stylesheet.last_generated?
@@ -0,0 +1,2 @@
+%h1 New stylesheets
+= render 'form'
@@ -7,5 +7,4 @@
config.fog_directory = ENV['AWS_S3_BUCKET']
config.fog_public = true # optional, defaults to true
config.fog_attributes = {'Cache-Control'=>'max-age=315576000'} # optional, defaults to {}
- config.asset_host = 'https://whatson.iswhatcddown.com'
end

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1 @@
+.DS_Store
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,178 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+ <title>jQuery miniColors</title>
+
+ <style type="text/css">
+ BODY {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ line-height: 1.5;
+ }
+
+ INPUT {
+ vertical-align: middle;
+ font-size: 13px;
+ }
+ </style>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+
+ <script type="text/javascript" src="jquery.miniColors.js"></script>
+ <link type="text/css" rel="stylesheet" href="jquery.miniColors.css" />
+
+ <script type="text/javascript">
+
+ $(document).ready( function() {
+
+ function init() {
+
+ // Enabling miniColors
+ $('.color-picker').miniColors({
+ change: function(hex, rgb) {
+ $('#console').prepend('change: ' + hex + ', rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br>');
+ },
+ open: function(hex, rgb) {
+ $('#console').prepend('open: ' + hex + ', rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br>');
+ },
+ close: function(hex, rgb) {
+ $('#console').prepend('close: ' + hex + ', rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br>');
+ }
+ });
+
+ // With opacity
+ $('.color-picker-opacity').miniColors({
+ opacity: true,
+ change: function(hex, rgba) {
+ $('#console').prepend('change: ' + hex + ', rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')<br>');
+ },
+ open: function(hex, rgba) {
+ $('#console').prepend('open: ' + hex + ', rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')<br>');
+ },
+ close: function(hex, rgba) {
+ $('#console').prepend('close: ' + hex + ', rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')<br>');
+ }
+ });
+
+ }
+
+ init();
+
+ $('#disable').click( function() {
+ $('#console').prepend('disable<br />');
+ $('.color-picker, .color-picker-opacity').miniColors('disabled', true);
+ $("#disable").prop('disabled', true);
+ $("#enable").prop('disabled', false);
+ });
+
+ $('#enable').click( function() {
+ $('#console').prepend('enable<br />');
+ $('.color-picker, .color-picker-opacity').miniColors('disabled', false);
+ $("#disable").prop('disabled', false);
+ $("#enable").prop('disabled', true);
+ });
+
+ $('#makeReadonly').click( function() {
+ $('#console').prepend('readonly = true<br />');
+ $('.color-picker, .color-picker-opacity').miniColors('readonly', true);
+ $("#unmakeReadonly").prop('disabled', false);
+ $("#makeReadonly").prop('disabled', true);
+ });
+
+ $('#unmakeReadonly').click( function() {
+ $('#console').prepend('readonly = false<br />');
+ $('.color-picker, .color-picker-opacity').miniColors('readonly', false);
+ $("#unmakeReadonly").prop('disabled', true);
+ $("#makeReadonly").prop('disabled', false);
+ });
+
+ $('#destroy').click( function() {
+ $('#console').prepend('destroy<br />');
+ $('.color-picker, .color-picker-opacity').miniColors('destroy');
+ $("INPUT[type=button]:not(#create)").prop('disabled', true);
+ $("#destroy").prop('disabled', true);
+ $("#create").prop('disabled', false);
+ });
+
+ $('#create').click( function() {
+ $('#console').prepend('create<br />');
+ init();
+ $("#makeReadonly, #disable, #destroy, #randomize").prop('disabled', false);
+ $("#destroy").prop('disabled', false);
+ $("#create").prop('disabled', true);
+ });
+
+ $('#randomize').click( function() {
+ $('.color-picker, .color-picker-opacity').miniColors('value', '#' + Math.floor(Math.random() * 16777215).toString(16));
+ });
+
+ });
+
+ </script>
+
+ </head>
+
+ <body>
+
+ <h1>jQuery miniColors</h1>
+ <p>
+ A compact color selector for input elements.
+ </p>
+
+ <div id="console" style="width: 500px; float: right; color: #FFF; background: #000; font: 12px monospace; padding: 1em; margin: 1em 0; height: 350px; overflow: auto;"></div>
+
+ <p>
+ Default<br /><input type="text" name="color1" class="color-picker" size="7" autocomplete="on" value="#fff" />
+ </p>
+
+ <p>
+ Black theme (set class=&quot;black&quot; on the input)<br />
+ <input type="text" name="color2" class="color-picker black" size="7" />
+ </p>
+
+ <p>
+ Preset HEX value (set value attribute for preset)<br />
+ <input type="text" name="color3" class="color-picker" size="7" value="#fff666" />
+ </p>
+
+ <p>
+ With Opacity (set data-opacity attribute for preset)<br />
+ <input type="text" name="color3" class="color-picker-opacity" size="7" value="#005294" data-opacity=".5" />
+ </p>
+
+ <p>
+ Attached to a hidden input<br />
+ <input type="hidden" name="color4" class="color-picker" size="7" />
+ </p>
+
+ <p style="position: absolute; right: 0; top: 0; margin-right: 10px;">
+ Absolutely positioned in upper-right corner
+ <input type="hidden" name="color5" class="color-picker" size="7" />
+ </p>
+
+ <p style="position: absolute; left: 0; bottom: 0; margin-left: 10px;">
+ <input type="hidden" name="color6" class="color-picker" size="7" />
+ Absolutely positioned in bottom-left corner
+ </p>
+
+ <p style="position: absolute; right: 0; bottom: 0; margin-right: 10px;">
+ Absolutely positioned in bottom-right corner
+ <input type="hidden" name="color7" class="color-picker" size="7" />
+ </p>
+
+ <p style="margin-top: 50px;">
+ Select an action to apply to all of the controls on this page:
+ <br />
+ <input type="button" id="makeReadonly" value="Read-only" />
+ <input type="button" id="unmakeReadonly" value="Not Read-only" disabled="disabled" /><br />
+ <input type="button" id="disable" value="Disable" />
+ <input type="button" id="enable" value="Enable" disabled="disabled" /><br />
+ <input type="button" id="destroy" value="Destroy" />
+ <input type="button" id="create" value="Create" disabled="disabled" /><br />
+ <input type="button" id="randomize" value="Random Color" />
+ </p>
+
+ </body>
+
+</html>
@@ -0,0 +1,125 @@
+INPUT.miniColors {
+ margin-right: 4px;
+}
+
+.miniColors-selector {
+ position: absolute;
+ width: 175px;
+ height: 150px;
+ background: white;
+ border: solid 1px #bababa;
+ -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
+ box-shadow: 0 0 6px rgba(0, 0, 0, .25);
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ padding: 5px;
+ z-index: 999999;
+}
+
+.miniColors.opacity.miniColors-selector {
+ width: 200px;
+}
+
+.miniColors-selector.black {
+ background: black;
+ border-color: black;
+}
+
+.miniColors-colors {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ width: 150px;
+ height: 150px;
+ background: url(images/colors.png) -40px 0 no-repeat;
+ cursor: crosshair;
+}
+
+.miniColors.opacity .miniColors-colors {
+ left: 30px;
+}
+
+.miniColors-hues {
+ position: absolute;
+ top: 5px;
+ left: 160px;
+ width: 20px;
+ height: 150px;
+ background: url(images/colors.png) 0 0 no-repeat;
+ cursor: crosshair;
+}
+
+.miniColors.opacity .miniColors-hues {
+ left: 185px;
+}
+
+.miniColors-opacity {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ width: 20px;
+ height: 150px;
+ background: url(images/colors.png) -20px 0 no-repeat;
+ cursor: crosshair;
+}
+
+.miniColors-colorPicker {
+ position: absolute;
+ width: 11px;
+ height: 11px;
+ border: 1px solid black;
+ -moz-border-radius: 11px;
+ -webkit-border-radius: 11px;
+ border-radius: 11px;
+}
+.miniColors-colorPicker-inner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 7px;
+ height: 7px;
+ border: 2px solid white;
+ -moz-border-radius: 9px;
+ -webkit-border-radius: 9px;
+ border-radius: 9px;
+}
+
+.miniColors-huePicker,
+.miniColors-opacityPicker {
+ position: absolute;
+ left: -2px;
+ width: 22px;
+ height: 2px;
+ border: 1px solid black;
+ background: white;
+ margin-top: -1px;
+ border-radius: 2px;
+}
+
+.miniColors-trigger,
+.miniColors-triggerWrap {
+ width: 22px;
+ height: 22px;
+ display: inline-block;
+}
+
+.miniColors-triggerWrap {
+ background: url(images/trigger.png) -22px 0 no-repeat;
+}
+
+.miniColors-triggerWrap.disabled {
+ filter: alpha(opacity=50);
+ opacity: .5;
+}
+
+.miniColors-trigger {
+ vertical-align: middle;
+ outline: none;
+ background: url(images/trigger.png) 0 0 no-repeat;
+}
+
+.miniColors-triggerWrap.disabled .miniColors-trigger {
+ cursor: default;
+}
Oops, something went wrong.

0 comments on commit 32a5425

Please sign in to comment.