Added sencha touch files for theming

ups-tla · Jan 12, 2012 · 146258b · 146258b
1 parent 5cc03d7
commit 146258b
Show file tree

Hide file tree

Showing 32 changed files with 3,426 additions and 3 deletions.
diff --git a/app/views/SelectUserType.js b/app/views/SelectUserType.js
@@ -12,6 +12,7 @@ UPSApp.views.SelectUserType = Ext.extend(Ext.Panel, {
 	       },
 	       {
 	    	   xtype:'button',
+	    	   cls:'btn_imastudent',
 	    	   text:"I'm a Student"
 	       },
 	       {

diff --git a/index.html b/index.html
@@ -3,9 +3,10 @@
   <head>
     <meta name="viewport" content="width=320; user-scalable=no" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-    <title>PhoneGap Demo with Sencha Touch</title>
-      <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
-      <script type="text/javascript" src="sencha/sencha-touch.js"></script>
+    <title>University of Puget Sound Mobile</title>
+    <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
+    <link rel="stylesheet" href="styles/upsstyle.css" type="text/css">
+    <script type="text/javascript" src="sencha/sencha-touch.js"></script>
 	  <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
 	  <script type="text/javascript" charset="utf-8" src="UPSUser.js"></script>
 	  <script type="text/javascript" charset="utf-8" src="main.js"></script>

diff --git a/sencha/resources/sass/android.scss b/sencha/resources/sass/android.scss
@@ -0,0 +1,37 @@
+// Let's start with the basics
+$base-color: #333;
+$active-color: #ff8100;
+$base-gradient: 'flat';
+
+// Buttons
+$button-gradient: 'bevel';
+
+// Lists
+$list-bg-color: #eee;
+$list-color: #333;
+$list-pressed-color: #ddd;
+$list-active-gradient: 'recessed';
+$list-header-bg-color: #999;
+$list-header-gradient: 'bevel';
+
+// Tabs
+$tabs_dark_color: #000;
+
+@import 'sencha-touch/default/all';
+
+@include sencha-panel;
+@include sencha-buttons;
+@include sencha-sheet;
+@include sencha-picker;
+@include sencha-tabs;
+@include sencha-toolbar;
+@include sencha-toolbar-forms;
+@include sencha-carousel;
+@include sencha-indexbar;
+@include sencha-list;
+@include sencha-list-paging;
+@include sencha-list-pullrefresh;
+@include sencha-layout;
+@include sencha-form;
+@include sencha-msgbox;
+@include sencha-loading-spinner;
diff --git a/sencha/resources/sass/apple.scss b/sencha/resources/sass/apple.scss
@@ -0,0 +1,30 @@
+// Let's start with the basics
+$base-color: #7c92ae;
+$base-gradient: 'glossy';
+
+// Lists
+$list-active-gradient: 'bevel';
+$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
+$list-header-gradient: 'matte';
+
+// Tabs
+$tabs-dark: #111;
+
+@import 'sencha-touch/default/all';
+
+@include sencha-panel;
+@include sencha-buttons;
+@include sencha-sheet;
+@include sencha-picker;
+@include sencha-tabs;
+@include sencha-toolbar;
+@include sencha-toolbar-forms;
+@include sencha-carousel;
+@include sencha-indexbar;
+@include sencha-list;
+@include sencha-list-paging;
+@include sencha-list-pullrefresh;
+@include sencha-layout;
+@include sencha-form;
+@include sencha-msgbox;
+@include sencha-loading-spinner; 
diff --git a/sencha/resources/sass/bb6.scss b/sencha/resources/sass/bb6.scss
@@ -0,0 +1,66 @@
+$include-highlights: false;
+$include-border-radius: false;
+
+// Let's start with the basics
+$base-color:  #393F45;
+$active-color:  #06f;
+$base-gradient: 'none';
+
+// Lists
+$list_pressed_color: #09f;
+$list_bg_color: #111;
+$list_color: #eee;
+$list_header_bg_color: #aaa;
+$basic-slider: true;
+
+@import 'sencha-touch/default/all';
+
+@include sencha-panel;
+@include sencha-buttons;
+@include sencha-sheet;
+@include sencha-picker;
+@include sencha-tabs;
+@include sencha-toolbar;
+@include sencha-toolbar-forms;
+@include sencha-carousel;
+@include sencha-indexbar;
+@include sencha-list;
+@include sencha-list-paging;
+@include sencha-list-pullrefresh;
+@include sencha-layout;
+@include sencha-form;
+@include sencha-msgbox;
+@include sencha-loading-spinner;
+
+.x-indexbar-item {
+    color: #FFF;
+}
+
+.x-scrollbar-dark {
+  background-color: rgba(255, 255, 255, .6);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+//fixing back/forward buttons in BB.
+$shadow-width: .065em; // Space between tip and its shadow
+$overlap-width: .2em; // how far the mask is clipped
+
+$mask-height: $button-height;
+$mask-width: $mask-height/2.5;
+$mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .22em;
+
+.x-button-forward, .x-button-back {
+    &:before, &:after {
+        @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto);
+        z-index: 2;
+        -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip.png") no-repeat;
+        -webkit-mask-size: $mask-width $mask-height;
+        overflow: hidden;
+    }
+}
+
+.x-button-forward, .x-toolbar .x-button-forward {
+    &:before, &:after {
+        -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip_right.png") no-repeat;
+    }
+  }
diff --git a/sencha/resources/sass/sencha-touch.scss b/sencha/resources/sass/sencha-touch.scss
@@ -0,0 +1,18 @@
+@import 'sencha-touch/default/all';
+
+@include sencha-panel;
+@include sencha-buttons;
+@include sencha-sheet;
+@include sencha-picker;
+@include sencha-tabs;
+@include sencha-toolbar;
+@include sencha-toolbar-forms;
+@include sencha-indexbar;
+@include sencha-list;
+@include sencha-list-paging;
+@include sencha-list-pullrefresh;
+@include sencha-layout;
+@include sencha-carousel;
+@include sencha-form;
+@include sencha-msgbox;
+@include sencha-loading-spinner;
diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_all.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_all.scss
@@ -0,0 +1,2 @@
+@import 'core';
+@import 'widgets';
diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_core.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_core.scss
@@ -0,0 +1,3 @@
+@import 'core/reset';
+@import 'core/core';
+@import 'core/layout';
diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_global.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_global.scss
@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'mixins';
diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_mixins.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_mixins.scss
@@ -0,0 +1,190 @@
+@import 'compass/css3';
+
+/**
+ * Add a background gradient to a selector.
+ *
+ *     .my-element {
+ *       @include background-gradient(green, 'recessed')
+ *     }
+ *
+ * @param {color} $bg-color The base color of the gradient.
+ * @param {string} $type The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or flat.
+ */
+@mixin background-gradient($bg-color, $type: $base-gradient) {
+  background-color: $bg-color;
+  @if $include-highlights {
+    @if $type == bevel {
+      @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%))));
+    } @else if $type == glossy {
+      @include background-image(linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
+    } @else if $type == recessed {
+      @include background-image(linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
+    } @else if $type == matte {
+      @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%))));
+    } @else {
+      background-image: none;
+    }
+  }
+}
+
+/**
+ * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
+ * 
+ *     @include pictos-iconmask('attachment');
+ *
+ * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
+ */
+@mixin pictos-iconmask($name) {
+  .x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
+    -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");
+  }
+}
+
+/**
+ * Includes the default styles for toolbar buttons, mostly used as a helper function.
+ *
+ * @param {color} $bg-color Base color to be used for the button.
+ * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed.
+ */
+@mixin toolbar-button($bg-color, $type: $button-gradient){
+  &, .x-toolbar & {
+    border: .1em solid darken($bg-color, 20%);
+    border-top-color: darken($bg-color, 15%);
+    @include color-by-background($bg-color);
+
+    &.x-button-back:before, &.x-button-forward:before {
+      background: darken($bg-color, 20%);
+    }
+
+    &, &.x-button-back:after, &.x-button-forward:after {
+      @include background-gradient($bg-color, $type);
+    }
+
+    img.x-icon-mask {
+      @include mask-by-background($bg-color);
+    }
+
+    @if $include-highlights {
+      @include bevel-by-background($bg-color);
+      -webkit-box-shadow: rgba(#fff, .1) 0 .1em 0;
+    }
+
+    &.x-button-pressed, &.x-button-active {
+      &, &:after {
+        @include background-gradient(darken($bg-color, 7%), 'recessed');
+      }
+      @if $include-highlights {
+        -webkit-box-shadow: inset saturate(darken($bg-color, 15%), 5%) 0 0 .1em, rgba(#fff, .1) 0 .1em 0;
+      }
+    }
+  }
+}
+
+/**
+ * Adds a small text shadow (or highlight) to give the impression of beveled text.
+ *
+ * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
+ */
+@mixin bevel-text($type: 'shadow') {
+  @if $include-highlights {
+    @if $type == shadow {
+      text-shadow: rgba(0,0,0,.5) 0 -.08em 0;
+    } @else {
+      text-shadow: rgba(255,255,255,.25) 0 .08em 0;
+    }
+  }
+}
+
+/**
+ * Adds a small box shadow (or highlight) to give the impression of being beveled.
+ *
+ * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
+ */
+@mixin bevel-box($type: 'light') {
+  @if $include-highlights {
+    @if $type == shadow {
+      -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0;
+    } @else {
+      -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0;
+    }
+  }
+}
+
+/**
+ * Adds basic styles to :before or :after pseudo-elements.
+ *
+ *     .my-element:after {
+ *       @include insertion(50px, 50px);
+ *     }
+ *
+ * @param {measurement} $width Height of pseudo-element.
+ * @param {measurement} $height Height of pseudo-element.
+ * @param {measurement} $top Top positioning of pseudo-element.
+ * @param {measurement} $left Left positioning of pseudo-element.
+ *
+ */
+@mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
+  content: "";
+  position: absolute;
+  width: $width;
+  height: $height;
+  top: $top;
+  left: $left;
+}
+
+/**
+ * Makes an element stretch to its parent's bounds.
+ */
+@mixin stretch {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/**
+ * Colors the text of an element based on lightness of its background.
+ *
+ *     .my-element {
+ *       @include color-by-background(#fff); // Colors text black.
+ *     }
+ *     
+ *     .my-element {
+ *       @include color-by-background(#fff, 40%); // Colors text gray.
+ *     }
+ *
+ * @param {color} $bg-color Background color of element.
+ * @param {percent} $contrast Contrast of text color to its background.
+ *
+ */
+@mixin color-by-background($bg-color, $contrast: 100%) {
+  @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) }
+  @else { color: lighten($bg-color, $contrast) }
+}
+
+/**
+ * Bevels the text based on its background.
+ *
+ * @param {color} $bg-color Background color of element.
+ * @see bevel-text
+ *
+ */
+@mixin bevel-by-background($bg-color) {
+  @if (lightness($bg-color) > 50) { @include bevel-text(light) }
+  @else { @include bevel-text; }
+}
+
+/**
+ * Creates a background gradient for masked elements, based on the lightness of their background.
+ *
+ * @param {color} $bg-color Background color of element.
+ * @param {percent} $percent Contrast of the new gradient to its background.
+ * @param {percent} $style Gradient style of the gradient.
+ * @see background-gradient
+ *
+ */
+@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {
+  @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) }
+  @else { @include background-gradient(lighten($bg-color, $contrast), $style) }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ UPSApp.views.SelectUserType = Ext.extend(Ext.Panel, { @@
     	       },
     	       {
     	    	   xtype:'button',
+    	    	   cls:'btn_imastudent',
     	    	   text:"I'm a Student"
     	       },
     	       {
@@ Expand Down @@