From 3d58ca9176691eb5ebfe71ccb9c370685e8ae510 Mon Sep 17 00:00:00 2001 From: Nicholas Shindler Date: Thu, 25 Jan 2018 17:27:03 -0800 Subject: [PATCH] update to theme styling --- app/view/main/Main.js | 2 +- .../local/rambox-dark-theme/sass/Readme.md | 6 +- .../rambox-dark-theme/sass/etc/Readme.md | 4 +- .../local/rambox-dark-theme/sass/etc/all.scss | 14 + .../sass/src/button/Button.scss | 19 + .../sass/src/form/field/Text.scss | 11 + .../sass/src/grid/grouping/Grouping.scss | 4 + .../sass/src/panel/Tool.scss | 9 + .../rambox-dark-theme/sass/src/tab/Bar.scss | 2 +- .../sass/src/toolbar/Toolbar.scss | 2 +- .../sass/src/window/MessageBox.scss | 10 + .../sass/var/grid/column/Column.scss | 1 + .../sass/var/grid/grouping/Grouping.scss | 29 + .../sass/var/grid/header/Container.scss | 2 + .../sass/var/panel/Panel.scss | 6 + .../rambox-dark-theme/sass/var/tab/Bar.scss | 2 +- .../rambox-dark-theme/sass/var/tab/Tab.scss | 8 +- .../sass/var/view/Table.scss | 78 +++ .../local/rambox-dark-theme/src/Readme.md | 2 +- resources/earth.png | Bin 0 -> 1101 bytes sencha-error-20180125-1.log | 596 ++++++++++++++++++ sencha-error-20180125-2.log | 596 ++++++++++++++++++ sencha-error-20180125-3.log | 596 ++++++++++++++++++ sencha-error-20180125-4.log | 596 ++++++++++++++++++ sencha-error-20180125-5.log | 596 ++++++++++++++++++ sencha-error-20180125.log | 596 ++++++++++++++++++ 26 files changed, 3773 insertions(+), 14 deletions(-) create mode 100644 packages/local/rambox-dark-theme/sass/src/form/field/Text.scss create mode 100644 packages/local/rambox-dark-theme/sass/src/grid/grouping/Grouping.scss create mode 100644 packages/local/rambox-dark-theme/sass/src/window/MessageBox.scss create mode 100644 packages/local/rambox-dark-theme/sass/var/grid/column/Column.scss create mode 100644 packages/local/rambox-dark-theme/sass/var/grid/grouping/Grouping.scss create mode 100644 packages/local/rambox-dark-theme/sass/var/grid/header/Container.scss create mode 100644 packages/local/rambox-dark-theme/sass/var/panel/Panel.scss create mode 100644 packages/local/rambox-dark-theme/sass/var/view/Table.scss create mode 100644 resources/earth.png create mode 100644 sencha-error-20180125-1.log create mode 100644 sencha-error-20180125-2.log create mode 100644 sencha-error-20180125-3.log create mode 100644 sencha-error-20180125-4.log create mode 100644 sencha-error-20180125-5.log create mode 100644 sencha-error-20180125.log diff --git a/app/view/main/Main.js b/app/view/main/Main.js index 1b0f1e34..9231b9a8 100644 --- a/app/view/main/Main.js +++ b/app/view/main/Main.js @@ -341,7 +341,7 @@ Ext.define('Rambox.view.main.Main', { ,'->' ,{ xtype: 'label' - ,html: ' '+locale['app.main[26]']+' '+locale['app.main[27]'].replace('Argentina', 'Argentina') + ,html: ' '+locale['app.main[26]']+' '+locale['app.main[27]'].replace('Argentina', 'Earth') } ,'->' ,{ diff --git a/packages/local/rambox-dark-theme/sass/Readme.md b/packages/local/rambox-dark-theme/sass/Readme.md index 9a65b067..9f548ea9 100644 --- a/packages/local/rambox-dark-theme/sass/Readme.md +++ b/packages/local/rambox-dark-theme/sass/Readme.md @@ -2,6 +2,6 @@ This folder contains SASS files of various kinds, organized in sub-folders: - rambox-default-theme/sass/etc - rambox-default-theme/sass/src - rambox-default-theme/sass/var + rambox-dark-theme/sass/etc + rambox-dark-theme/sass/src + rambox-dark-theme/sass/var diff --git a/packages/local/rambox-dark-theme/sass/etc/Readme.md b/packages/local/rambox-dark-theme/sass/etc/Readme.md index d7030ab0..9f7162d7 100644 --- a/packages/local/rambox-dark-theme/sass/etc/Readme.md +++ b/packages/local/rambox-dark-theme/sass/etc/Readme.md @@ -1,4 +1,4 @@ -# rambox-default-theme/sass/etc +# rambox-dark-theme/sass/etc -This folder contains miscellaneous SASS files. Unlike `"rambox-default-theme/sass/etc"`, these files +This folder contains miscellaneous SASS files. Unlike `"rambox-dark-theme/sass/etc"`, these files need to be used explicitly. diff --git a/packages/local/rambox-dark-theme/sass/etc/all.scss b/packages/local/rambox-dark-theme/sass/etc/all.scss index b9779d85..fcbd6bdc 100644 --- a/packages/local/rambox-dark-theme/sass/etc/all.scss +++ b/packages/local/rambox-dark-theme/sass/etc/all.scss @@ -4,7 +4,21 @@ @import 'loadscreen'; $base-color: #162938; +$base-light-color: #4B6375; +$base-dark-color: #30414F; +$base-white: #FEFEFE; +$base-gray: #FBFCFC; +$body-color: #3E4552; +$body-light-color: #929DB1; + $font-family: 'Roboto', sans-serif; +$base-light-text: $base-white; +$base-dark-text: $base-gray; + +$border-radius-sm: 5px; +$border-radius-md: 15px; +$border-radius-lg: 30px; + $include-ie: false; $include-ff: false; $include-safari: false; diff --git a/packages/local/rambox-dark-theme/sass/src/button/Button.scss b/packages/local/rambox-dark-theme/sass/src/button/Button.scss index 52344945..4f09c3ae 100644 --- a/packages/local/rambox-dark-theme/sass/src/button/Button.scss +++ b/packages/local/rambox-dark-theme/sass/src/button/Button.scss @@ -11,3 +11,22 @@ .x-btn-inner-decline-small:hover{ text-decoration: underline; } + +.x-btn-default-toolbar-small { + border-radius: $border-radius-lg; + border-width: 2px; + border-color: $base-gray; + background-color: transparent; + .x-btn-inner-default-toolbar-small{ + color: $base-light-text; + } +} + +.x-btn { + &.x-btn-pressed, &.x-btn-focus, &.x-btn-over, &.x-btn-menu-active { + &.x-btn-default-toolbar-small { + border-color: $body-light-color; + background-color: $base-dark-color; + } + } +} \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/src/form/field/Text.scss b/packages/local/rambox-dark-theme/sass/src/form/field/Text.scss new file mode 100644 index 00000000..a601cc54 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/src/form/field/Text.scss @@ -0,0 +1,11 @@ +.x-form-trigger-wrap { + border-radius: $border-radius-md; + border-width: 2px; + border-color: $base-gray; + background-color: transparent; + .x-form-text, .x-form-trigger-default { + border-radius: $border-radius-md; + background-color: transparent; + color: $base-light-text; + } +} \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/src/grid/grouping/Grouping.scss b/packages/local/rambox-dark-theme/sass/src/grid/grouping/Grouping.scss new file mode 100644 index 00000000..8bd442a9 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/src/grid/grouping/Grouping.scss @@ -0,0 +1,4 @@ +.x-grid-group-hd { + border-color: $grid-grouped-header-border-color; + background: $body-color; +} \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/src/panel/Tool.scss b/packages/local/rambox-dark-theme/sass/src/panel/Tool.scss index a0a69b7f..67858f49 100644 --- a/packages/local/rambox-dark-theme/sass/src/panel/Tool.scss +++ b/packages/local/rambox-dark-theme/sass/src/panel/Tool.scss @@ -2,3 +2,12 @@ cursor: pointer; color: #2E658E; } +.x-panel-default { + .x-toolbar-docked-bottom { + background-color: $body-color; + } +} + +.x-autocontainer-innerCt { + background-color: rgba($body-light-color, .12); +} \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/src/tab/Bar.scss b/packages/local/rambox-dark-theme/sass/src/tab/Bar.scss index 36ac5539..f6192a69 100644 --- a/packages/local/rambox-dark-theme/sass/src/tab/Bar.scss +++ b/packages/local/rambox-dark-theme/sass/src/tab/Bar.scss @@ -1,6 +1,6 @@ .x-tab-bar-top { .x-tab-bar-body { - background-color: $base-color; + background-color: $body-color; padding: 8px 0 0 0 !important; } .x-tab-bar-strip { diff --git a/packages/local/rambox-dark-theme/sass/src/toolbar/Toolbar.scss b/packages/local/rambox-dark-theme/sass/src/toolbar/Toolbar.scss index c14c136d..2cefa3f9 100644 --- a/packages/local/rambox-dark-theme/sass/src/toolbar/Toolbar.scss +++ b/packages/local/rambox-dark-theme/sass/src/toolbar/Toolbar.scss @@ -8,7 +8,7 @@ @include extjs-toolbar-ui( $ui: 'newversion', - $background-color: #31B96E + $background-color: $body-color ); .x-toolbar-newversion { diff --git a/packages/local/rambox-dark-theme/sass/src/window/MessageBox.scss b/packages/local/rambox-dark-theme/sass/src/window/MessageBox.scss new file mode 100644 index 00000000..74f3ee76 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/src/window/MessageBox.scss @@ -0,0 +1,10 @@ +.x-window-header-default-top { + background: $base-color; +} +.x-message-box .x-window-body { + background: $body-color; + color: $base-light-text; +} +.x-toolbar-footer { + background: $base-color; +} \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/var/grid/column/Column.scss b/packages/local/rambox-dark-theme/sass/var/grid/column/Column.scss new file mode 100644 index 00000000..441e1ec7 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/var/grid/column/Column.scss @@ -0,0 +1 @@ +$grid-column-header-color: $base-light-text; \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/var/grid/grouping/Grouping.scss b/packages/local/rambox-dark-theme/sass/var/grid/grouping/Grouping.scss new file mode 100644 index 00000000..288a7194 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/var/grid/grouping/Grouping.scss @@ -0,0 +1,29 @@ +/** + * @var {color} + * The background color of group headers + */ +$grid-grouped-header-background-color: rgba($base-color, .3); + +/** + * @var {number/list} + * The border-width of group headers + */ +$grid-grouped-header-border-width: 0 0 2px 0 !default; + +/** + * @var {string} + * The border-style of group headers + */ +$grid-grouped-header-border-style: solid !default; + +/** + * @var {color} + * The border-color of group headers + */ +$grid-grouped-header-border-color: adjust-color($base-color, $hue: 0.844deg, $saturation: 7.644%, $lightness: -8.627%) !default; + +/** + * @var {color} + * The text color of group header titles + */ +$grid-grouped-title-color: adjust-color($base-light-text, $hue: 0.952deg, $saturation: -6.718%, $lightness: -41.961%) !default; diff --git a/packages/local/rambox-dark-theme/sass/var/grid/header/Container.scss b/packages/local/rambox-dark-theme/sass/var/grid/header/Container.scss new file mode 100644 index 00000000..1034b596 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/var/grid/header/Container.scss @@ -0,0 +1,2 @@ +$grid-header-background-color: $base-dark-color; +$grid-header-border-color: $base-light-color; diff --git a/packages/local/rambox-dark-theme/sass/var/panel/Panel.scss b/packages/local/rambox-dark-theme/sass/var/panel/Panel.scss new file mode 100644 index 00000000..9e2167e6 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/var/panel/Panel.scss @@ -0,0 +1,6 @@ +$panel-base-color: $base-light-color; +$panel-header-color: $base-light-text; + + +$panel-body-background-color: $base-color; +$panel-body-color: $base-light-text; \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/sass/var/tab/Bar.scss b/packages/local/rambox-dark-theme/sass/var/tab/Bar.scss index 2062895d..f9bb4128 100644 --- a/packages/local/rambox-dark-theme/sass/var/tab/Bar.scss +++ b/packages/local/rambox-dark-theme/sass/var/tab/Bar.scss @@ -1,2 +1,2 @@ -$tabbar-strip-background-color: $base-color; +$tabbar-strip-background-color: $base-light-color; $tabbar-strip-height: 3px; diff --git a/packages/local/rambox-dark-theme/sass/var/tab/Tab.scss b/packages/local/rambox-dark-theme/sass/var/tab/Tab.scss index 56369c2b..abb23acb 100644 --- a/packages/local/rambox-dark-theme/sass/var/tab/Tab.scss +++ b/packages/local/rambox-dark-theme/sass/var/tab/Tab.scss @@ -1,5 +1,5 @@ -$tab-base-color: #30414F; -$tab-base-color-active: #4B6375; +$tab-base-color: $base-dark-color; +$tab-base-color-active: $base-light-color; $tab-icon-width: 24px; $tab-icon-height: 24px; $tab-padding: 13px; @@ -13,6 +13,6 @@ $tab-inner-border-width-focus: 0px; $tab-inner-border-width-focus-active: 0px; $tab-inner-border-width-focus-over: 0px; $tab-border-radius: 4px 4px 0 0; -$tab-color: #FFF; -$tab-color-active: #FFF; +$tab-color: $base-dark-text; +$tab-color-active: $base-light-text; $tab-font-size: 18px; diff --git a/packages/local/rambox-dark-theme/sass/var/view/Table.scss b/packages/local/rambox-dark-theme/sass/var/view/Table.scss new file mode 100644 index 00000000..7db49ca3 --- /dev/null +++ b/packages/local/rambox-dark-theme/sass/var/view/Table.scss @@ -0,0 +1,78 @@ +/** + * @var {color} + * The color of the text in the grid cells + */ +$grid-row-cell-color: $base-light-text; + +/** + * @var {color} + * The background-color of the grid cells + */ +$grid-row-cell-background-color: $base-color; + + + +/** + * @var {color} + * The border-color of row/column borders. Can be specified as a single color, or as a list + * of colors containing the row border color followed by the column border color. + */ +$grid-row-cell-border-color: $base-light-color; + +/** + * @var {color} + * The background-color of "special" cells. Special cells are created by {@link + * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection + * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}. + */ +$grid-cell-special-background-color: $grid-row-cell-background-color; + +/** + * @var {color} + * The background-color of "special" cells when the row is hovered. Special cells are + * created by {@link Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel + * Checkbox Selection Model} and {@link Ext.grid.plugin.RowExpander RowExpander}. + */ +// $grid-cell-special-over-background-color: $grid-row-cell-over-background-color; + +/** + * @var {color} + * The text color of the hovered row + */ +$grid-row-cell-over-color: $base-dark-text; + +/** + * @var {color} + * The background-color of the hovered row + */ +$grid-row-cell-over-background-color: $base-dark-color; + +/** + * @var {color} + * The text color of the selected row + */ +$grid-row-cell-selected-color: $base-light-text; + +/** + * @var {color} + * The background-color of the selected row + */ +$grid-row-cell-selected-background-color: $base-light-color; + +// /** +// * @var {color} +// * The border-color of the grid body +// */ +// $grid-body-border-color: $panel-body-border-color !default; + +// /** +// * @var {color} +// * The background-color of the grid body +// */ +// $grid-body-background-color: $panel-body-background-color !default; + +// /** +// * @var {color} +// * The background color of the grid body when the grid contains no data. +// */ +// $grid-empty-background-color: $panel-body-background-color !default; \ No newline at end of file diff --git a/packages/local/rambox-dark-theme/src/Readme.md b/packages/local/rambox-dark-theme/src/Readme.md index b8828534..ecb9fa5a 100644 --- a/packages/local/rambox-dark-theme/src/Readme.md +++ b/packages/local/rambox-dark-theme/src/Readme.md @@ -1,4 +1,4 @@ -# rambox-default-theme/src +# rambox-dark-theme/src This folder contains source code that will automatically be added to the classpath when the package is used. diff --git a/resources/earth.png b/resources/earth.png new file mode 100644 index 0000000000000000000000000000000000000000..cbaa46c0d30bd82a4948014ec6113f8d666d270a GIT binary patch literal 1101 zcmeAS@N?(olHy`uVBq!ia0vp@Ak4uAB#T}@sR2?f>5jgR3=A9lx&I`x0{IHb9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg!CBxDSxV%QuQiw3xKK_7;Gx6fXv*~l0=1y+?>2(s|s5sunH?6 z8zii+qySb@l5MLL;TxdfoL`ixV5(=LXP{)qrJ$f-QP|K%!RuMVYBUn?dH= z8QOqVqKHB5vC#)vj^r4KPr;%RZP3~5%LNj3 zlj1im^S!LPth;sUt=x_>xm~5jRxSb}SGpfL6te%7{=#4I=E2$78@km$Dm2Ts{$#XD z+|YbI&nI=$+AUkNXK#DyK5I#4-Lkx2hkk$Bv*-NhL%$CuNUnJ=S5v*EDdhIPFFVri z>{w*S32u<9r^LV*kQWyZxV3rtK&z&e73b(RHGj$z5XJ^XA4m4-D^5ij4~7 zIU~L&sct@V9y^Qa=YR=Mv{$+aa8BJ38m!7IE?}+a6aA{V>CDf&&y{Z-Oya%q$<>&X zCpFF4S=BSmE~wRaqu9(8jnW6-sxnO7JyzTJ?(Gv4YB|J{W_ZxC+g&$$io|NJz57@y z9{a4`-mx%DDz{eR=$wXE-&kDMbw7CV+@oZb+|wVytjj~XcKu9bRjQt!xjOqwN!Y^w zuNG`EZ%KN zIK({SWz}@8;KrIC=Z@B{3;40l{n*^E%9CRrI0}9BVtbplXaE1pX*R2!=HAs(dhFPs z(yef-{p*L*llF5o7_NT*+f47Zfw=TSlZ(YR8Ed)pE-;F7AK?D9B~;K{)%IK7f&bO& zzrVLV+{N|yzLn3N2AyuR(8tS`&-tiR;Iue()9kY`>05W~+VV603A5PUyGEtWmYS!g zwLgBlY0iT7hdXvZj`$K>o1E{PwdY>Zw8X!^7c~C3p&=pvgV{kk)