init repo

OfficeWeb/apps/documenteditor/mobile/resources/sass/_application-base.scss

@@ -0,0 +1,138 @@
+// Basic
+$base-color                 : #cbcbcb;
+$active-color               : #688AD2;
+$base-gradient              : 'matte';
+$include-default-icons      : false;
+$include-default-uis        : false;
+
+// Toolbar
+$toolbar-icon-size          : 1.0em;
+
+// Setting list
+$settinglist-icon-size      : 24px;
+$settinglist-image-width    : 72px;
+$settinglist-image-height   : 48px;
+
+// Image default icons
+$icons-default-size         : 24px;
+$icons-default-image-width  : 72px;
+$icons-default-image-height : 888px;
+
+// Image bullet icons
+$bullet-icon-size           : 24px;
+$bullet-icon-image-width    : 48px;
+$bullet-icon-image-height   : 168px;
+
+// Image numbering icons
+$numbering-icon-size        : 74px;
+$numbering-icon-image-width : 148px;
+$numbering-icon-image-height: 518px;
+
+// Image outline icons
+$outline-icon-size          : 74px;
+$outline-icon-image-width   : 148px;
+$outline-icon-image-height  : 222px;
+
+@import 'sencha-touch/default/all';
+
+@include sencha-panel;
+@include sencha-buttons;
+@include sencha-toolbar;
+@include sencha-toolbar-forms;
+@include sencha-indexbar;
+@include sencha-list;
+@include sencha-layout;
+@include sencha-form;
+@include sencha-msgbox;
+@include sencha-loading-spinner;
+
+@import 'common-buttons';
+@import 'common-dataview';
+@import 'common-toolbar';
+@import 'common-settingspanel';
+@import 'common-planarspinner';
+@import 'common-settingslist';
+@import 'common-messagebox';
+
+@import 'application-mixins';
+@import 'application-dataview';
+
+@include common-settings-panel;
+@include common-planar-spinner;
+
+@include common-toolbar-ui('edit', $base-color);
+@include common-toolbar-ui('search', $base-color);
+
+@include application-icon-normal('save',          0);
+@include application-icon-normal('undo',          1);
+@include application-icon-normal('share',         2);
+@include application-icon-normal('font-style',    3);
+@include application-icon-normal('font-color',    4);
+@include application-icon-normal('bold',          5);
+@include application-icon-normal('italic',        6);
+@include application-icon-normal('underline',     7);
+@include application-icon-normal('align-left',    8);
+@include application-icon-normal('align-center',  9);
+@include application-icon-normal('align-right',   10);
+@include application-icon-normal('align-fill',    11);
+@include application-icon-normal('bullets',       12);
+@include application-icon-normal('spacing',       13);
+@include application-icon-normal('page-number',   14);
+@include application-icon-normal('insert',        15);
+@include application-icon-normal('search',        16);
+@include application-icon-normal('fullscreen',    17);
+@include application-icon-normal('spinner-down',  18);
+@include application-icon-normal('spinner-up',    19);
+@include application-icon-normal('superscript',   20);
+@include application-icon-normal('subscript',     21);
+@include application-icon-normal('table',         22);
+@include application-icon-normal('picture',       23);
+@include application-icon-normal('spacing',       24);
+@include application-icon-normal('indent-inc',    25);
+@include application-icon-normal('indent-dec',    26);
+@include application-icon-normal('numbering',     27);
+@include application-icon-normal('outline',       28);
+@include application-icon-normal('insert-row',    29);
+@include application-icon-normal('insert-column', 30);
+@include application-icon-normal('highlightcolor',31);
+@include application-icon-normal('textcolor',     32);
+@include application-icon-normal('textbigger',    33);
+@include application-icon-normal('textless',      34);
+@include application-icon-normal('spinner-prev',  35);
+@include application-icon-normal('spinner-next',  36);
+
+
+@include common-button-ui('base',       $base-color);
+@include common-button-ui('light',      lighten($base-color, 100%));
+@include common-button-ui('base-blue',  $active-color, 'dark');
+@include common-button-ui('back',       $base-color);
+
+/*
+ *  unsupport
+ */
+
+//TODO: need retina resolution
+.unsuported-view {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: url(../img/ios-only.png) no-repeat center #efefef;
+    background-attachment: fixed;
+    z-index: 90000;
+}
+
+/*
+ * Additional styles
+ */
+
+.x-button.text-offset-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.x-button.text-offset-30 {
+  padding-left: 30px;
+  padding-right: 30px;
+}

OfficeWeb/apps/documenteditor/mobile/resources/sass/_application-dataview.scss

@@ -0,0 +1,156 @@
+/*
+ *  Application dataview
+ */
+
+@mixin iconview-create-icon($cls, $index, $iconsize) {
+  .x-dataview-item .icon.#{$cls}-#{$index} {
+    background-position: 0 -1 * $index * $iconsize;
+  }
+
+  .x-dataview-item {
+    &.x-item-selected,
+    &.x-item-pressed {
+      .icon.#{$cls}-#{$index} {
+        background-position: -1 * $iconsize -1 * $index * $iconsize;
+      }
+    }
+  }
+}
+
+@mixin bullet-icon($index) {
+  @include iconview-create-icon(bullet, $index, $bullet-icon-size);
+}
+
+@mixin numbering-icon($index) {
+  @include iconview-create-icon(numbering, $index, $numbering-icon-size);
+}
+
+@mixin outline-icon($index) {
+  @include iconview-create-icon(outline, $index, $outline-icon-size);
+}
+
+.x-dataview {
+  &.icon-view {
+    .x-dataview-inner.x-scroll-scroller {
+      width: auto !important;
+      height: auto !important;
+
+      .x-dataview-container {
+        margin-top: 12px;
+        margin-left: 12px;
+      }
+    }
+
+    .x-dataview-item {
+      display: inline-block;
+
+      &.x-item-pressed,
+      &.x-item-selected {
+        .item-inner {
+          @include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
+          @include color-by-background($list-active-color);
+        }
+      }
+
+      .item-inner {
+        display: inline-block;
+        width: 77px;
+        height: 77px;
+        border: 1px solid darken($base-color, 6%);
+        background: lighten($base-color, 100%);
+        margin: -1px;
+
+        &.top-left {
+          @include border-top-left-radius($form-fieldset-radius);
+        }
+
+        &.top-right {
+          @include border-top-right-radius($form-fieldset-radius);
+        }
+
+        &.bottom-left {
+          @include border-bottom-left-radius($form-fieldset-radius);
+        }
+
+        &.bottom-right {
+          @include border-bottom-right-radius($form-fieldset-radius);
+        }
+      }
+    }
+
+    &.bullets {
+      @include bullet-icon(0);
+      @include bullet-icon(1);
+      @include bullet-icon(2);
+      @include bullet-icon(3);
+      @include bullet-icon(4);
+      @include bullet-icon(5);
+      @include bullet-icon(6);
+      @include bullet-icon(7);
+
+      .item-inner {
+        .text {
+          margin-top: 1.4em;
+          text-align: center;
+        }
+
+        .icon {
+          width: $bullet-icon-size;
+          height: $bullet-icon-size;
+          margin: 1.4em auto;
+          background-image: url($icons-bullets-image);
+          background-size: $bullet-icon-image-width $bullet-icon-image-height;
+        }
+      }
+    }
+
+    &.numbering {
+      @include numbering-icon(0);
+      @include numbering-icon(1);
+      @include numbering-icon(2);
+      @include numbering-icon(3);
+      @include numbering-icon(4);
+      @include numbering-icon(5);
+      @include numbering-icon(6);
+      @include numbering-icon(7);
+
+      .item-inner {
+        .text {
+          position: relative;
+          top: 1.4em;
+          text-align: center;
+        }
+
+        .icon {
+          width: $numbering-icon-size;
+          height: $numbering-icon-size;
+          margin: 0 auto;
+          background-image: url($icons-numbering-image);
+          background-size: $numbering-icon-image-width $numbering-icon-image-height;
+        }
+      }
+    }
+
+    &.outline {
+      @include outline-icon(0);
+      @include outline-icon(1);
+      @include outline-icon(2);
+
+      .item-inner {
+        .text {
+          position: relative;
+          top: 1.4em;
+          text-align: center;
+        }
+
+        .icon {
+          width: $outline-icon-size;
+          height: $outline-icon-size;
+          margin: 0 auto;
+          background-image: url($icons-outline-image);
+          background-size: $outline-icon-image-width $outline-icon-image-height;
+        }
+      }
+    }
+  }
+}

OfficeWeb/apps/documenteditor/mobile/resources/sass/_application-mixins.scss

@@ -0,0 +1,19 @@
+@mixin application-icon-normal($name, $index) {
+  .x-button-icon.#{$name},
+  .list-icon.#{$name} {
+    background-image: url($icons-default-path);
+    background-color: transparent;
+    background-position: 0 -1 * $index * $icons-default-size;
+    background-size: $icons-default-image-width $icons-default-image-height;
+  }
+
+  .x-button-pressing,
+  .x-button-pressed,
+  .x-button-active,
+  .x-item-pressed {
+    .x-button-icon.#{$name},
+    .list-icon.#{$name} {
+      background-position: -1 * $icons-default-size -1 * $index * $icons-default-size;
+    }
+  }
+}

OfficeWeb/apps/documenteditor/mobile/resources/sass/application-normal.scss

@@ -0,0 +1,7 @@
+$icons-default-path       : '../img/icons/icons-normal.png';
+$icons-bullets-image      : '../img/icons/bullets-normal.png';
+$icons-numbering-image    : '../img/icons/numbering-normal.png';
+$icons-outline-image      : '../img/icons/outline-normal.png';
+$icons-setting-list-image : '../img/icons/list-normal.png';
+
+@import 'application-base';

OfficeWeb/apps/documenteditor/mobile/resources/sass/application-retina.scss

@@ -0,0 +1,7 @@
+$icons-default-path       : '../img/icons/icons-retina.png';
+$icons-bullets-image      : '../img/icons/bullets-retina.png';
+$icons-numbering-image    : '../img/icons/numbering-retina.png';
+$icons-outline-image      : '../img/icons/outline-retina.png';
+$icons-setting-list-image : '../img/icons/list-retina.png';
+
+@import 'application-base';

OfficeWeb/apps/documenteditor/mobile/resources/sass/config-debug.rb

@@ -0,0 +1,14 @@
+# Get the directory that this configuration file exists in
+dir = File.dirname(__FILE__)
+
+# Load the sencha-touch framework automatically.
+load File.join(dir, '..', '..', '..', '..', '..', '3rdparty', 'touch', 'resources', 'themes')
+
+# Add include path for command styles
+add_import_path File.join(dir, '..', '..', '..', '..', '..', 'apps', 'common', 'mobile', 'resources', 'sass')
+
+# Compass configurations
+sass_path    = dir
+css_path     = File.join(dir, "..", "css")
+environment  = :development
+output_style = :expanded

OfficeWeb/apps/documenteditor/mobile/resources/sass/config.rb

@@ -0,0 +1,14 @@
+# Get the directory that this configuration file exists in
+dir = File.dirname(__FILE__)
+
+# Load the sencha-touch framework automatically.
+load File.join(dir, '..', '..', '..', '..', '..', '3rdparty', 'touch', 'resources', 'themes')
+
+# Add include path for command styles
+add_import_path File.join(dir, '..', '..', '..', '..', '..', 'apps', 'common', 'mobile', 'resources', 'sass')
+
+# Compass configurations
+sass_path    = dir
+css_path     = File.join(dir, "..", "css")
+environment  = :production
+output_style = :compressed