Feature/sass theme

.gitignore

@@ -8,4 +8,5 @@
 deploy
 extensible-all*
 /examples-1.0/
-/examples/calendar/test.html
+/examples/calendar/test.html
+/resources/sass/.sass-cache

README.md

@@ -64,6 +64,10 @@ For use in your own application, you'll simply include the built framework files
     <!-- Include your app and any other app-specific files -->
     <script type="text/javascript" src="MyApp.js"></script>
 
+## Theming
+
+To modify the color schema of Extensible use the supplied SASS files in /resources/sass. A good starting point is in the [Learn Ext JS Guide](http://www.sencha.com/learn/theming/).
+
 ## Upgrading from Extensible 1.x to 1.5+
 
 Nothing about the Extensible API changed between 1.x and 1.5 except the naming/namespacing and organization of classes. No new functionality was introduced that was not directly relevant to supporting Ext 4.0. Because of this upgrading should not be difficult, but since almost every single class was renamed and/or reorganized (to be more consistent with Ext 4 and also to provide support for dynamic loading), you may find it initially tedious to get existing application code back up and running under Extensible 1.5+.

resources/sass/calendar-colors.scss

@@ -0,0 +1,3 @@
+@import 'compass';
+@import 'ext4/default/variables/calendar-colors';
+@import 'ext4/default/widgets/calendar-colors';

resources/sass/calendar.scss

@@ -0,0 +1,3 @@
+@import 'compass';
+@import 'ext4/default/variables/calendar';
+@import 'ext4/default/widgets/calendar';

resources/sass/config.rb

@@ -0,0 +1,22 @@
+# $ext_path: This should be the path of where the ExtJS SDK is installed
+# Generally this will be in a lib/extjs folder in your applications root
+# <root>/lib/extjs
+$ext_path = "../../"
+
+# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
+# Generally this will be in a resources/sass folder
+# <root>/resources/sass
+sass_path = File.dirname(__FILE__)
+
+# css_path: the directory you want your CSS files to be.
+# Generally this is a folder in the parent directory of your Sass files
+# <root>/resources/css
+css_path = File.join(sass_path, "..", "css")
+
+# output_style: The output style for your compiled CSS
+# nested, expanded, compact, compressed
+# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
+output_style = :nested
+
+# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
+load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')

resources/sass/recurrence.scss

@@ -0,0 +1,3 @@
+@import 'compass';
+@import 'ext4/default/variables/recurrence';
+@import 'ext4/default/widgets/recurrence';

resources/themes/compass_init.rb

@@ -0,0 +1,6 @@
+# include the utils rb file which has extra functionality for the ext theme
+dir = File.dirname(__FILE__)
+require File.join(dir, 'lib', 'utils.rb')
+
+# register ext4 as a compass framework
+Compass::Frameworks.register 'ext4', dir

resources/themes/lib/utils.rb

@@ -0,0 +1,93 @@
+module ExtJS4
+  module SassExtensions
+    module Functions
+      module Utils
+        def parsebox(list, n)
+          assert_type n, :Number
+          if !n.int?
+            raise ArgumentError.new("List index #{n} must be an integer")
+          elsif n.to_i < 1
+            raise ArgumentError.new("List index #{n} must be greater than or equal to 1")
+          elsif n.to_i > 4
+            raise ArgumentError.new("A box string can't contain more then 4")
+          end
+
+          new_list = list.clone.to_a
+          size = new_list.size
+
+          if n.to_i >= size
+            if size == 1
+              new_list[1] = new_list[0]
+              new_list[2] = new_list[0]
+              new_list[3] = new_list[0]
+            elsif size == 2
+              new_list[2] = new_list[0]
+              new_list[3] = new_list[1]
+            elsif size == 3
+              new_list[3] = new_list[1]
+            end
+          end
+
+          new_list.to_a[n.to_i - 1]
+        end
+
+        def parseint(value)
+          Sass::Script::Number.new(value.to_i)
+        end
+
+        # Returns a background-image property for a specified images for the theme
+        def theme_image(theme, path, without_url = false, relative = false)
+          path = path.value
+          theme = theme.value
+          without_url = (without_url.class == FalseClass) ? without_url : without_url.value
+
+          relative_path = "../../images/"
+
+          if relative
+            if relative.class == Sass::Script::String
+              relative_path = relative.value
+              relative = true
+            elsif relative.class == FalseClass || relative.class == TrueClass
+              relative = relative
+            else
+              relative = relative.value
+            end
+          else
+            relative = false
+          end
+
+          if relative
+            image_path = File.join(relative_path, theme, path)
+          else
+            images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
+            image_path = File.join(images_path, path)
+          end
+
+          if !without_url
+            url = "url('#{image_path}')"
+          else
+            url = "#{image_path}"
+          end
+
+          Sass::Script::String.new(url)
+        end
+
+        def theme_image_exists(path)
+          result = false
+
+          where_to_look = path.value.gsub('../../resources', 'resources')
+
+          if where_to_look && FileTest.exists?("#{where_to_look}")
+            result = true
+          end
+
+          return Sass::Script::Bool.new(result)
+        end
+      end
+    end
+  end
+end
+
+module Sass::Script::Functions
+  include ExtJS4::SassExtensions::Functions::Utils
+end

resources/themes/stylesheets/ext4/default/_all.scss

@@ -0,0 +1,5 @@
+@import "compass/css3";
+@import "blueprint/typography";
+
+@import "variables";
+@import "widgets";

resources/themes/stylesheets/ext4/default/_variables.scss

@@ -0,0 +1,5 @@
+@import "variables/core";
+
+@import "variables/calendar-colors";
+@import "variables/calendar";
+@import "variables/recurrence";

resources/themes/stylesheets/ext4/default/_widgets.scss

@@ -0,0 +1,3 @@
+@import 'widgets/calendar-colors';
+@import 'widgets/calendar';
+@import 'widgets/recurrence';

resources/themes/stylesheets/ext4/default/variables/_calendar-colors.scss

@@ -0,0 +1,37 @@
+$extensible-event-allday-color: 	#fff !default;
+
+
+//calendar colors:
+$extensible-calendar-color-no-info:	#668CB3 !default;
+$extensible-calendar-color-1: 		#FA7166 !default;
+$extensible-calendar-color-2:		#cf2424 !default;
+$extensible-calendar-color-3:		#a01a1a !default;
+$extensible-calendar-color-4:		#7e3838 !default;
+$extensible-calendar-color-5:		#ca7609 !default;
+$extensible-calendar-color-6:		#f88015 !default;
+$extensible-calendar-color-7:		#eda12a !default;
+$extensible-calendar-color-8:		#d5b816 !default;
+$extensible-calendar-color-9:		#e281ca !default;
+$extensible-calendar-color-10:		#bf53a4 !default;
+$extensible-calendar-color-11:		#9d3283 !default;
+$extensible-calendar-color-12:		#7a0f60 !default;
+$extensible-calendar-color-13:		#542382 !default;
+$extensible-calendar-color-14:		#7742a9 !default;
+$extensible-calendar-color-15:		#8763ca !default;
+$extensible-calendar-color-16:		#b586e2 !default;
+$extensible-calendar-color-17:		#7399f9 !default;
+$extensible-calendar-color-18:		#4e79e6 !default;
+$extensible-calendar-color-19:		#2951b9 !default;
+$extensible-calendar-color-20:		#133897 !default;
+$extensible-calendar-color-21:		#1a5173 !default;
+$extensible-calendar-color-22:		#1a699c !default;
+$extensible-calendar-color-23:		#3694b7 !default;
+$extensible-calendar-color-24:		#64b9d9 !default;
+$extensible-calendar-color-25:		#a8c67b !default;
+$extensible-calendar-color-26:		#83ad47 !default;
+$extensible-calendar-color-27:		#2e8f0c !default;
+$extensible-calendar-color-28:		#176413 !default;
+$extensible-calendar-color-29:		#0f4c30 !default;
+$extensible-calendar-color-30:		#386651 !default;
+$extensible-calendar-color-31:		#3ea987 !default;
+$extensible-calendar-color-32:		#7bc3b5 !default;

resources/themes/stylesheets/ext4/default/variables/_calendar.scss

@@ -0,0 +1,102 @@
+// Shared Colors
+$extensible-toolbar-button-color: 			#555 !default;
+$extensible-panel-border-color: 			#99bbe8 !default;
+$extensible-panel-inner-background-color:	#eee !default;
+
+
+//
+$extensible-cal-hd-color: 					#555 !default;
+$extensible-cal-hd-background-color: 		#d3e1f1 !default;
+$extensible-cal-hd-border-color: 			#c3d9ff !default;
+$extensible-cal-hd-border-separator-color:	#bcf !default;
+
+//Day/week-specific styles
+$extensible-cal-hd-days-background-color: 	#cddcef !default;
+$extensible-cal-hd-ad-background-color:		#fff !default;
+$extensible-cal-hd-ad-border-color:			#e3e9ff !default;
+$extensible-cal-days-row-border-color:		#ddd !default;
+$extensible-cal-days-times-color: 			#666 !default;
+$extensible-cal-days-times-border-color:	$extensible-cal-days-row-border-color !default;
+$extensible-cal-days-times-background-color: #f6f9fc !default;
+
+//Month-specific styles
+$extensible-cal-month-hd-background-color:	#95B8EF !default;
+$extensible-cal-month-background-color:		#fff !default;
+
+//Month view week link boxes
+$extensible-cal-month-week-link-color:						#999 !default;
+$extensible-cal-month-week-link-background-color: 			#EFEFEF !default;
+$extensible-cal-month-week-link-over-background-color: 		#E0E7EF !default;
+$extensible-cal-month-week-link-border-color:				#C3D9FF !default;
+$extensible-cal-month-week-link-border-top-color:			$extensible-panel-border-color !default;
+$extensible-cal-month-week-link-first-border-left-color: 	$extensible-cal-hd-border-color !default;
+
+//Month table cells
+$extensible-cal-month-day-border-color: 			$extensible-cal-hd-border-color !default;
+$extensible-cal-month-day-over-background-color: 	#D1EAEF !default;
+
+//Event title cell
+$extensible-cal-month-title-color: 					#A7C6DF !default;
+$extensible-cal-month-title-border-color: 			$extensible-cal-hd-border-color !default;
+$extensible-cal-month-title-first-border-color:		$extensible-cal-hd-border-separator-color !default;
+
+//Today's title cell
+$extensible-cal-month-today-color: 					#BFA52F !default;
+$extensible-cal-month-today-background-color: 		#FFF4BF !default;
+
+//Weekend cell
+$extensible-cal-month-weekend-background-color: 	#EFF9FC !default;
+
+//Prev Next cell
+$extensible-cal-month-prevnext-color: 				#bbb !default;
+$extensible-cal-month-prevnext-background-color: 	#EFEFEF !default;
+
+//Event cells
+$extensible-cal-ev-more-color:						#369 !default;
+
+//Day view event styles
+$extensible-cal-day-evt-color:						#fff !default;
+$extensible-cal-day-evt-link-color:					$extensible-cal-day-evt-color !default;
+
+//Calendar DD styles
+$extensible-dd-sel-background-color:				#C3D9FF !default;
+$extensible-dd-shim-background-color:				$extensible-dd-sel-background-color !default;
+$extensible-dd-ghost-color:							#000 !default;
+$extensible-dd-ghost-background-color:				#fff !default;
+$extensible-dd-ghost-border-color:					#ddd #bbb #bbb #ddd !default;
+
+//Event resize handle
+$extensible-resize-handle-border-color: 			#ccc !default;
+$extensible-resize-handle-border-opacity-color:		#fff !default;
+
+
+//Calendar navigation picker styles
+$extensible-navigation-picker-border-color:						#99BBE8 !default;
+$extensible-navigation-picker-header-background-color:			#D3E1F1 !default;
+
+$extensible-navigation-picker-button-color:						$extensible-toolbar-button-color !default;
+$extensible-navigation-picker-inner-border-color:				$extensible-cal-hd-border-separator-color !default;
+
+$extensible-navigation-picker-today-background-color:			#FFF4BF !default;
+$extensible-navigation-picker-today-border-color:				#BFA52F !default;
+
+$extensible-navigation-picker-month-border-color:				$extensible-navigation-picker-border-color !default;
+$extensible-navigation-picker-footer-background-color:			$extensible-navigation-picker-header-background-color !default;
+
+//Calendar editor window styles
+$extensible-editor-link-color:									#15428B !default;
+
+//Calendar form styles
+$extensible-form-toolbar-border-color:							#99BBE8 !default;
+$extensible-form-toolbar-background-color:						#DFE8F6 !default;
+$extensible-form-panel-border-top-color:						$extensible-form-toolbar-border-color !default;
+$extensible-form-panel-border-bottom-color:						#BBCCFF !default;
+
+//CalendarList styles
+$extensible-cal-list-background-color:							#fff !default;
+$extensible-cal-list-border-color:								#99BBE8 !default;
+$extensible-cal-list-header-color:								#555 !default;
+
+//CalendarList menu styles
+$extensible-cal-list-menu-link-color:							#f0f0f0 !default;
+$extensible-cal-list-menu-selected-color:						#8BB8F3 !default;