Skip to content

Commit f17119d

Browse files
author
pipeline
committed
feature(EJ2-4278): Theme Switcher Dev to Master changes in Angular SB
1 parent bd949a9 commit f17119d

25 files changed

+377
-148
lines changed

‎index.html

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="shortcut icon" href="favicon.ico" />
1111
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
1212

13-
<link href="./styles/material.css" rel="stylesheet" />
13+
<link href="./styles/material.css" rel="stylesheet" id="themelink" />
1414
<link href="./styles/index.css" rel="stylesheet" />
1515
<link rel="stylesheet" href="./styles/highlight.css">
1616
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
@@ -34,7 +34,15 @@
3434
<div class="sb-logo" title="Essential JS 2 for Angular"></div>
3535
</a>
3636
</div>
37-
<div class="sb-h-content sb-h-right" role="main"></div>
37+
<div class="sb-h-content sb-h-right" role="main">
38+
<div id="themeswitcher" class="themeicon"><img id="themeswitcher-icon" src='styles/images/SB_icon/SB_Switcher_icon_material.png'></div>
39+
<div id="selectdiv" class='e-hidden'>
40+
<ul id="themelist" class="options">
41+
<li class="e-list" id="material"><span class='switch-text'>Material</span><span class='switch-icon material'></span></a></li>
42+
<li class="e-list" id="fabric"><span class='switch-text'>Fabric</span><span class='switch-icon fabric'></span></a></li>
43+
</ul>
44+
</div>
45+
</div>
3846
</div>
3947
<ng-app class="e-view audjust-sb-header animate-sb-header"></ng-app>
4048
</div>

‎src/button/button.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { CheckBoxController } from './check-box.component';
66
import { SharedModule } from '../common/shared.module';
77

88
export const buttonAppRoutes: Object[] = [
9-
{ path: 'button/default', component: DefaultButtonController, name: 'Default Functionalities', category: 'Button' },
10-
{ path: 'button/check-box', component: CheckBoxController, name: 'CheckBox', category: 'Button', type: 'new' }
9+
{ path: ':theme/button/default', component: DefaultButtonController, name: 'Default Functionalities', category: 'Button' },
10+
{ path: ':theme/button/check-box', component: CheckBoxController, name: 'CheckBox', category: 'Button', type: 'new' }
1111
];
1212

1313
export const buttonRouter: ModuleWithProviders = RouterModule.forChild(buttonAppRoutes);

‎src/calendar/calendar.module.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { RangesCalendarComponent } from './range.component';
1010
import { InternationalizationComponent } from './internationalization.component';
1111
import { SharedModule } from '../common/shared.module';
1212
export const calendarAppRoutes: Object[] = [
13-
{ path: 'calendar/default', component: DefaultCalendarComponent, name: 'Default Functionalities', category: 'Calendar' },
14-
{ path: 'calendar/special', component: SpecialCalendarComponent, name: 'Special Dates', category: 'Calendar' },
15-
{ path: 'calendar/disabled', component: DisabledCalendarComponent, name: 'Disable Dates', category: 'Calendar' },
16-
{ path: 'calendar/range', component: RangesCalendarComponent, name: 'Date Range', category: 'Calendar' },
17-
{ path: 'calendar/internationalization', component: InternationalizationComponent, name: 'Internationalization', category: 'Calendar' }
13+
{ path: ':theme/calendar/default', component: DefaultCalendarComponent, name: 'Default Functionalities', category: 'Calendar' },
14+
{ path: ':theme/calendar/special', component: SpecialCalendarComponent, name: 'Special Dates', category: 'Calendar' },
15+
{ path: ':theme/calendar/disabled', component: DisabledCalendarComponent, name: 'Disable Dates', category: 'Calendar' },
16+
{ path: ':theme/calendar/range', component: RangesCalendarComponent, name: 'Date Range', category: 'Calendar' },
17+
{ path: ':theme/calendar/internationalization', component: InternationalizationComponent, name: 'Internationalization', category: 'Calendar' }
1818
];
1919

2020
export const CalendarRouter: ModuleWithProviders = RouterModule.forChild(calendarAppRoutes);

‎src/chart/chart.module.ts

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -45,60 +45,60 @@ import { GroupingPieComponent } from './grouping.component';
4545
import { InversedAxisChartComponent } from './inversed.component';
4646
import { SharedModule } from '../common/shared.module';
4747
export const chartAppRoutes: Object[] = [
48-
{ path: 'chart/line', component: LineChartComponent, name: 'Line', order:'01' ,category: 'Series' },
49-
{ path: 'chart/column', component: ColumnChartComponent, name: 'Column',order:'01', category: 'Series' },
50-
{ path: 'chart/bar', component: BarChartComponent, name: 'Bar', order:'01',category: 'Series' },
51-
{ path: 'chart/area', component: AreaChartComponent, name: 'Area', order:'01',category: 'Series' },
52-
{ path: 'chart/spline', component: SplineChartComponent, name: 'Spline', order:'01',category: 'Series' },
53-
{ path: 'chart/stacked-column', component: StackedColumnChartComponent, name: 'Stacked Column',order:'01', category: 'Series' },
54-
{ path: 'chart/stacked-column100', component: PercentStackedColumnChartComponent, name: '100% Stacked Column',
48+
{ path: ':theme/chart/line', component: LineChartComponent, name: 'Line', order:'01' ,category: 'Series' },
49+
{ path: ':theme/chart/column', component: ColumnChartComponent, name: 'Column',order:'01', category: 'Series' },
50+
{ path: ':theme/chart/bar', component: BarChartComponent, name: 'Bar', order:'01',category: 'Series' },
51+
{ path: ':theme/chart/area', component: AreaChartComponent, name: 'Area', order:'01',category: 'Series' },
52+
{ path: ':theme/chart/spline', component: SplineChartComponent, name: 'Spline', order:'01',category: 'Series' },
53+
{ path: ':theme/chart/stacked-column', component: StackedColumnChartComponent, name: 'Stacked Column',order:'01', category: 'Series' },
54+
{ path: ':theme/chart/stacked-column100', component: PercentStackedColumnChartComponent, name: '100% Stacked Column',
5555
order: '01', category: 'Series' },
56-
{ path: 'chart/stacked-bar', component: StackedBarChartComponent, name: 'Stacked Bar',order:'01', category: 'Series' },
57-
{ path: 'chart/stacked-bar100', component: PercentStackedBarChartComponent, name: '100% Stacked Bar', order: '01', category: 'Series' },
58-
{ path: 'chart/stacked-area', component: StackedAreaChartComponent, name: 'Stacked Area', order:'01',category: 'Series' },
59-
{ path: 'chart/stacked-area100', component: PercentStackedAreaChartComponent, name: '100% Stacked Area',order:'01',category: 'Series' },
60-
{ path: 'chart/range-column', component: RangeColumnChartComponent, name: 'Range Column',order:'01',category: 'Series' },
61-
{ path: 'chart/step-line', component: StepLineChartComponent, name: 'StepLine', order:'01',category: 'Series' },
62-
{ path: 'chart/step-area', component: StepAreaChartComponent, name: 'StepArea', order:'01',category: 'Series',type:'new' },
63-
{ path: 'chart/scatter', component: ScatterChartComponent, name: 'Scatter', order:'01',category: 'Series' },
64-
{ path: 'chart/bubble', component: BubbleChartComponent, name: 'Bubble', order:'01', category: 'Series'},
65-
{ path: 'chart/combination-series', component: CombinationSeriesChartComponent, name: 'Combination Series',
56+
{ path: ':theme/chart/stacked-bar', component: StackedBarChartComponent, name: 'Stacked Bar',order:'01', category: 'Series' },
57+
{ path: ':theme/chart/stacked-bar100', component: PercentStackedBarChartComponent, name: '100% Stacked Bar', order: '01', category: 'Series' },
58+
{ path: ':theme/chart/stacked-area', component: StackedAreaChartComponent, name: 'Stacked Area', order:'01',category: 'Series' },
59+
{ path: ':theme/chart/stacked-area100', component: PercentStackedAreaChartComponent, name: '100% Stacked Area',order:'01',category: 'Series' },
60+
{ path: ':theme/chart/range-column', component: RangeColumnChartComponent, name: 'Range Column',order:'01',category: 'Series' },
61+
{ path: ':theme/chart/step-line', component: StepLineChartComponent, name: 'StepLine', order:'01',category: 'Series' },
62+
{ path: ':theme/chart/step-area', component: StepAreaChartComponent, name: 'StepArea', order:'01',category: 'Series',type:'new' },
63+
{ path: ':theme/chart/scatter', component: ScatterChartComponent, name: 'Scatter', order:'01',category: 'Series' },
64+
{ path: ':theme/chart/bubble', component: BubbleChartComponent, name: 'Bubble', order:'01', category: 'Series'},
65+
{ path: ':theme/chart/combination-series', component: CombinationSeriesChartComponent, name: 'Combination Series',
6666
order:'01', category: 'Series' },
67-
{ path: 'chart/performance', component: PerformanceChartComponent, name: 'Performance',order:'01', category: 'Series' },
68-
{ path: 'chart/default-pie', component: DefaultPieComponent, name: 'Pie', order: '02', category: 'Accumulation Series', type: 'new'},
67+
{ path: ':theme/chart/performance', component: PerformanceChartComponent, name: 'Performance',order:'01', category: 'Series' },
68+
{ path: ':theme/chart/default-pie', component: DefaultPieComponent, name: 'Pie', order: '02', category: 'Accumulation Series', type: 'new'},
6969
{
70-
path: 'chart/default-doughnut', component: DefaultDoughnutComponent, name: 'Pie With Legend', order: '02',
70+
path: ':theme/chart/default-doughnut', component: DefaultDoughnutComponent, name: 'Pie With Legend', order: '02',
7171
category: 'Accumulation Series', type: 'new'
7272
},
7373
{
74-
path: 'chart/semi-pie', component: SemiPieComponent, name: 'Semi Accumulation Series', order: '02',
74+
path: ':theme/chart/semi-pie', component: SemiPieComponent, name: 'Semi Accumulation Series', order: '02',
7575
category: 'Accumulation Series', type: 'new'
7676
},
7777
{
78-
path: 'chart/smart-labels', component: SmartLabelsComponent, name: 'Smart Labels', order: '02',
78+
path: ':theme/chart/smart-labels', component: SmartLabelsComponent, name: 'Smart Labels', order: '02',
7979
category: 'Accumulation Series', type: 'new'
8080
},
8181
{
82-
path: 'chart/drilldown-pie', component: DrilldownPieComponent, name: 'Drilldown', order: '02',
82+
path: ':theme/chart/drilldown-pie', component: DrilldownPieComponent, name: 'Drilldown', order: '02',
8383
category: 'Accumulation Series', type: 'new'
8484
},
8585
{
86-
path: 'chart/grouping', component: GroupingPieComponent, name: 'Grouping', order: '02',
86+
path: ':theme/chart/grouping', component: GroupingPieComponent, name: 'Grouping', order: '02',
8787
category: 'Accumulation Series', type: 'new'
8888
},
89-
{ path: 'chart/local-data', component: LocalDataChartComponent, name: 'Local Data', order:'03',category: 'Data Binding' },
90-
{ path: 'chart/remote-data', component: RemoteDataChartComponent, name: 'Remote Data',order:'03', category: 'Data Binding' },
91-
{ path: 'chart/numeric-axis', component: NumericAxisChartComponent, name: 'Numeric Axis', order:'04', category: 'Chart Axes' },
92-
{ path: 'chart/datetime', component: DateTimeAxisChartComponent, name: 'DateTime Axis', order:'04', category: 'Chart Axes' },
93-
{ path: 'chart/category', component: CategoryChartComponent, name: 'Category Axis', order:'04', category: 'Chart Axes' },
94-
{ path: 'chart/logarithmic', component: LogarithmicAxisChartComponent, name: 'Logarithmic Axis', order:'04', category: 'Chart Axes' },
95-
{ path: 'chart/multiple-axes', component: MultipleAxesChartComponent, name: 'Multiple Axes',order:'04', category: 'Chart Axes' },
96-
{ path: 'chart/inversed', component: InversedAxisChartComponent, name: 'Inversed Axes', order:'04', category: 'Chart Axes', type: 'new'},
97-
{ path: 'chart/symbols', component: SymbolsChartComponent, name: 'Symbols',order:'05', category: 'Chart Symbols' },
98-
{ path: 'chart/selection', component: SelectionChartComponent, name: 'Selection',order:'06', category: 'User Interaction' },
99-
{ path: 'chart/crosshair', component: CrosshairChartComponent, name: 'Crosshair',order:'06', category: 'User Interaction' },
100-
{ path: 'chart/trackball', component: TrackBallChartComponent, name: 'TrackBall', order:'06',category: 'User Interaction' },
101-
{ path: 'chart/zooming', component: ZoomingChartComponent, name: 'Zooming and Panning',order:'06', category: 'User Interaction' },
89+
{ path: ':theme/chart/local-data', component: LocalDataChartComponent, name: 'Local Data', order:'03',category: 'Data Binding' },
90+
{ path: ':theme/chart/remote-data', component: RemoteDataChartComponent, name: 'Remote Data',order:'03', category: 'Data Binding' },
91+
{ path: ':theme/chart/numeric-axis', component: NumericAxisChartComponent, name: 'Numeric Axis', order:'04', category: 'Chart Axes' },
92+
{ path: ':theme/chart/datetime', component: DateTimeAxisChartComponent, name: 'DateTime Axis', order:'04', category: 'Chart Axes' },
93+
{ path: ':theme/chart/category', component: CategoryChartComponent, name: 'Category Axis', order:'04', category: 'Chart Axes' },
94+
{ path: ':theme/chart/logarithmic', component: LogarithmicAxisChartComponent, name: 'Logarithmic Axis', order:'04', category: 'Chart Axes' },
95+
{ path: ':theme/chart/multiple-axes', component: MultipleAxesChartComponent, name: 'Multiple Axes',order:'04', category: 'Chart Axes' },
96+
{ path: ':theme/chart/inversed', component: InversedAxisChartComponent, name: 'Inversed Axes', order:'04', category: 'Chart Axes', type: 'new'},
97+
{ path: ':theme/chart/symbols', component: SymbolsChartComponent, name: 'Symbols',order:'05', category: 'Chart Symbols' },
98+
{ path: ':theme/chart/selection', component: SelectionChartComponent, name: 'Selection',order:'06', category: 'User Interaction' },
99+
{ path: ':theme/chart/crosshair', component: CrosshairChartComponent, name: 'Crosshair',order:'06', category: 'User Interaction' },
100+
{ path: ':theme/chart/trackball', component: TrackBallChartComponent, name: 'TrackBall', order:'06',category: 'User Interaction' },
101+
{ path: ':theme/chart/zooming', component: ZoomingChartComponent, name: 'Zooming and Panning',order:'06', category: 'User Interaction' },
102102
];
103103

104104
export const chartRouter: ModuleWithProviders = RouterModule.forChild(chartAppRoutes);

‎src/circulargauge/circulargauge.module.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,18 @@ import { DirectionComponent } from './direction.component';
2121

2222

2323
export const circulargaugeAppRoutes: Object[] = [
24-
{ path: 'circulargauge/default', component: DefaultComponent, name: 'Default', order: '01', category: 'Circular Gauge'},
25-
{ path: 'circulargauge/range', component: RangeComponent, name: 'Range', order: '01', category: 'Circular Gauge' },
26-
{ path: 'circulargauge/label', component: LabelComponent, name: 'Ticks and Labels', order: '01', category: 'Circular Gauge'},
27-
{ path: 'circulargauge/annotation', component: AnnotationComponent , name: 'Annotation', order: '01', category: 'Circular Gauge'},
28-
{ path: 'circulargauge/customization', component: CustomizationComponent, name: 'Gauge Customization', order: '01', category: 'Circular Gauge'},
29-
{ path: 'circulargauge/direction', component: DirectionComponent, name: 'Direction Compass', order: '01', category: 'Circular Gauge'},
30-
{ path: 'circulargauge/pointer-image', component: PointerImageComponent, name: 'Pointer Image', order: '02', category: 'Pointer'},
31-
{ path: 'circulargauge/pointers', component: PointersComponent, name: 'Pointer Customization', order: '02', category: 'Pointer'},
32-
{ path: 'circulargauge/multiple-axis', component: MultipleAxisComponent, name: 'Multiple Axis', order: '03', category: 'Axes'},
33-
{ path: 'circulargauge/user-interactions', component: UserInteractionComponent, name: 'Pointer Drag', order: '04', category: 'User Interaction'},
34-
{ path: 'circulargauge/tooltip', component: TooltipComponent, name: 'Tooltip', order: '04', category: 'User Interaction'},
35-
{ path: 'circulargauge/sampledata', component: SampleDataComponent , name: 'Data Sample', order: '05', category: 'Live'}
24+
{ path: ':theme/circulargauge/default', component: DefaultComponent, name: 'Default', order: '01', category: 'Circular Gauge'},
25+
{ path: ':theme/circulargauge/range', component: RangeComponent, name: 'Range', order: '01', category: 'Circular Gauge' },
26+
{ path: ':theme/circulargauge/label', component: LabelComponent, name: 'Ticks and Labels', order: '01', category: 'Circular Gauge'},
27+
{ path: ':theme/circulargauge/annotation', component: AnnotationComponent , name: 'Annotation', order: '01', category: 'Circular Gauge'},
28+
{ path: ':theme/circulargauge/customization', component: CustomizationComponent, name: 'Gauge Customization', order: '01', category: 'Circular Gauge'},
29+
{ path: ':theme/circulargauge/direction', component: DirectionComponent, name: 'Direction Compass', order: '01', category: 'Circular Gauge'},
30+
{ path: ':theme/circulargauge/pointer-image', component: PointerImageComponent, name: 'Pointer Image', order: '02', category: 'Pointer'},
31+
{ path: ':theme/circulargauge/pointers', component: PointersComponent, name: 'Pointer Customization', order: '02', category: 'Pointer'},
32+
{ path: ':theme/circulargauge/multiple-axis', component: MultipleAxisComponent, name: 'Multiple Axis', order: '03', category: 'Axes'},
33+
{ path: ':theme/circulargauge/user-interactions', component: UserInteractionComponent, name: 'Pointer Drag', order: '04', category: 'User Interaction'},
34+
{ path: ':theme/circulargauge/tooltip', component: TooltipComponent, name: 'Tooltip', order: '04', category: 'User Interaction'},
35+
{ path: ':theme/circulargauge/sampledata', component: SampleDataComponent , name: 'Data Sample', order: '05', category: 'Live'}
3636
];
3737

3838
export const circularRouter: ModuleWithProviders = RouterModule.forChild(circulargaugeAppRoutes);

‎src/common/page.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div class="sb-content e-view">
2+
<div id="overlay"></div>
23
<div class="left-panel e-view">
34
<left-pane #leftPane class="e-view"></left-pane>
45
</div>

0 commit comments

Comments
 (0)