Skip to content

feat(docs): refactoring navbar component #276

Merged
merged 2 commits into from
Oct 3, 2019
Merged

feat(docs): refactoring navbar component #276

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3324865
feat(docs): refactoring navbar component
Oct 3, 2019
d135f68
feat(docs): version's bold defining mechanism is changed
Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/docs/src/app/components/navbar/_navbar-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@mixin mc-navbar-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$primary: map-get($theme, primary);
$is-dark: map-get($theme, is-dark);
$background-color: mc-color($background, background);
$hover: mc-color($background, hover);
Expand Down
61 changes: 61 additions & 0 deletions packages/docs/src/app/components/navbar/navbar-property.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
export interface INavbarProperty {
// name of local storage property
property: string;

// data array for dropdown
data: any[];

// Applies in NavbarProperty.setValue for additional actions (for example: change class on body)
updateTemplate: boolean;

// Applies in NavbarProperty.setValue for updating selected value
updateSelected: boolean;
}

export class NavbarProperty {
data: any[];
currentValue: any;
private readonly property: string;

constructor(navbarProperty: INavbarProperty) {
this.data = navbarProperty.data;
this.currentValue = this.data[0];
this.property = navbarProperty.property;

this.init();
}

setValue(i: number) {
this.currentValue = this.data[i];
localStorage.setItem(this.property, `${i}`);
if (this.updateTemplate) { this.updateTemplate(i); }
if (this.updateSelected) { this.updateSelected(i); }
}

init() {
const currentValue = +localStorage.getItem(this.property);

if (currentValue) {
this.setValue(currentValue);
} else {
localStorage.setItem(this.property, '0');
}
}

updateTemplate(i: number) {
if (this.currentValue) {
for (const color of this.data) {
document.body.classList.remove(color.className);
}

document.body.classList.add(this.currentValue.className);
}
}

updateSelected(i: number) {
this.data.forEach((color) => {
color.selected = false;
});
this.data[i].selected = true;
}
}
254 changes: 134 additions & 120 deletions packages/docs/src/app/components/navbar/navbar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component, Renderer2 } from '@angular/core';
import { Component } from '@angular/core';

import { INavbarProperty, NavbarProperty } from './navbar-property';


@Component({
Expand All @@ -7,127 +9,139 @@ import { Component, Renderer2 } from '@angular/core';
styleUrls: ['./navbar.scss']
})
export class NavbarComponent {
// TODO fetch real data instead
versions = [{number: '5.1', date: '15 октября', bold: true},
{number: '5.0.1', date: '14 октября', bold: false},
{number: '5', date: '13 октября', bold: true},
{number: '4.8.8', date: '12 октября', bold: false},
{number: '4.8.5', date: '11 октября', bold: false},
{number: '4.8.4', date: '10 октября', bold: false},
{number: '4.8', date: '9 октября', bold: true},
{number: '4.7.1', date: '8 октября', bold: false},
{number: '1.0', date: '7 октября', bold: true}];

curVerIndex = this.versions[0].number;
languages = ['Русский язык', 'Английский язык'];
curLanguage = this.languages[0];
themes = [
{
theme: 'default',
name: 'Светлая тема',
className: 'theme-default'
},
{
theme: 'dark',
name: 'Темная тема',
className: 'theme-dark'
}
];
curTheme = this.themes[0];
// TODO Эти значения временные, надо определиться с постоянными и заменить ими текущие значения.
colors = [
{
code: '#2f80ed',
className: 'active-blue',
selected: true
},
{
code: '#832112',
className: 'active-red',
selected: false
},
{
code: '#07804e',
className: 'active-green',
selected: false
},
{
code: '#eaaf00',
className: 'active-yellow',
selected: false
}
];
activeColor = this.colors[0];
private readonly themeProperty = 'PT_theme';
private readonly colorProperty = 'PT_color';

constructor(private renderer: Renderer2) {
this.initTheme();
this.initActiveColor();
}

setVersion(version) {
this.curVerIndex = version;
}

setLanguage(language) {
this.curLanguage = language;
}

setTheme(i) {
this.curTheme = this.themes[i];
localStorage.setItem(this.themeProperty, `${i}`);
this.changeThemeOnBody();
}

setColor(i) {
this.activeColor = this.colors[i];
localStorage.setItem(this.colorProperty, `${i}`);
this.changeColorOnBody();

this.colors.forEach((color) => { color.selected = false; });
this.colors[i].selected = true;
}

initTheme() {
const theme = localStorage.getItem(this.themeProperty);

if (theme) {
this.setTheme(theme);
} else {
localStorage.setItem(this.themeProperty, '0');
}
}

initActiveColor() {
const color = localStorage.getItem(this.colorProperty);

if (color) {
this.setColor(color);
} else {
localStorage.setItem(this.colorProperty, '0');
}
}

private changeThemeOnBody() {

if (this.curTheme) {
for (const theme of this.themes) {
this.renderer.removeClass(document.body, theme.className);
/*To add navbar property create new private property of type INavbarProperty
and instantiate new NavbarProperty(property: INavbarProperty)*/
versionSwitch: NavbarProperty;
colorSwitch: NavbarProperty;
themeSwitch: NavbarProperty;
languageSwitch: NavbarProperty;

private activeColorProperty: INavbarProperty = {
property: 'PT_color',
data: [
{
code: '#2f80ed',
className: 'active-blue',
selected: true
},
{
code: '#832112',
className: 'active-red',
selected: false
},
{
code: '#07804e',
className: 'active-green',
selected: false
},
{
code: '#eaaf00',
className: 'active-yellow',
selected: false
}

this.renderer.addClass(document.body, this.curTheme.className);
}
],
updateTemplate: true,
updateSelected: true
};

private languageProperty: INavbarProperty = {
property: 'PT_language',
data: [
'Русский язык',
'Английский язык'
],
updateTemplate: false,
updateSelected: false
};

private themeProperty: INavbarProperty = {
property: 'PT_theme',
data: [
{
theme: 'default',
name: 'Светлая тема',
className: 'theme-default',
selected: true
},
{
theme: 'dark',
name: 'Темная тема',
className: 'theme-dark',
selected: false
}
],
updateTemplate: true,
updateSelected: true
};

private versionProperty: INavbarProperty = {
property: 'PT_version',
data: [
{
number: '5.1',
date: '15 октября',
bold: true,
selected: true
},
{
number: '5.0.1',
date: '14 октября',
bold: false,
selected: false
},
{
number: '5',
date: '13 октября',
bold: true,
selected: false
},
{
number: '4.8.8',
date: '12 октября',
bold: false,
selected: false
},
{
number: '4.8.5',
date: '11 октября',
bold: false,
selected: false
},
{
number: '4.8.4',
date: '10 октября',
bold: false,
selected: false
},
{
number: '4.8',
date: '9 октября',
bold: true,
selected: false
},
{
number: '4.7.1',
date: '8 октября',
bold: false,
selected: false
},
{
number: '1.0',
date: '7 октября',
bold: true,
Copy link
Member

@pimenovoleg pimenovoleg Oct 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

далее расчет этого св-ва, bold или нет. должен проходить через анализ версии (number)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Готово!

selected: false
}
],
updateTemplate: false,
updateSelected: true
};

constructor() {
this.versionSwitch = new NavbarProperty(this.versionProperty);
this.colorSwitch = new NavbarProperty(this.activeColorProperty);
this.themeSwitch = new NavbarProperty(this.themeProperty);
this.languageSwitch = new NavbarProperty(this.languageProperty);
}

private changeColorOnBody() {

if (this.activeColor) {
for (const color of this.colors) {
this.renderer.removeClass(document.body, color.className);
}

this.renderer.addClass(document.body, this.activeColor.className);
}
}
}
16 changes: 8 additions & 8 deletions packages/docs/src/app/components/navbar/navbar.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
<button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-version__trigger"
[mcDropdownTriggerFor]="versionDropdown">
<span>Версия</span>
<span class="docs-navbar-version__number" id="versionNumber">{{curVerIndex}}</span>
<span class="docs-navbar-version__number" id="versionNumber">{{versionSwitch.currentValue.number}}</span>
<i mc-icon="mc-angle-down-L_16" class="docs-navbar-version__icon"></i>
</button>
<mc-dropdown #versionDropdown="mcDropdown" xPosition="after" class="docs-navbar-version__dropdown">
<button mc-dropdown-item *ngFor="let version of versions; let i = index" (click)="setVersion(version.number)" [class.docs-navbar-version_bold]="version.bold">
<button mc-dropdown-item *ngFor="let version of versionSwitch.data; let i = index" [class.mc-selected]="version.selected" (click)="versionSwitch.setValue(i)" [class.docs-navbar-version_bold]="version.bold">
<span class="docs-navbar-version__item" >
<span class="docs-navbar-version__num" >{{version.number}}</span>
<span class="docs-navbar-version__date" >{{version.date}}</span>
Expand All @@ -26,12 +26,12 @@
<div class="docs-navbar-dropdown docs-navbar-dropdown_hidden">
<button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
[mcDropdownTriggerFor]="languageDropdown">
<span >{{curLanguage}}</span>
<span>{{languageSwitch.currentValue}}</span>
<i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
</button>

<mc-dropdown #languageDropdown="mcDropdown">
<button mc-dropdown-item *ngFor="let language of languages; let i = index" (click)="setLanguage(language)">
<button mc-dropdown-item *ngFor="let language of languageSwitch.data; let i = index" (click)="languageSwitch.setValue(i)">
{{language}}
</button>
</mc-dropdown>
Expand All @@ -40,12 +40,12 @@
<div class="docs-navbar-dropdown">
<button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
[mcDropdownTriggerFor]="themeDropdown">
<span >{{curTheme.name}}</span>
<span >{{themeSwitch.currentValue.name}}</span>
<i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
</button>

<mc-dropdown #themeDropdown="mcDropdown">
<button mc-dropdown-item *ngFor="let theme of themes; let i = index" (click)="setTheme(i)">
<button mc-dropdown-item *ngFor="let theme of themeSwitch.data; let i = index" [class.mc-selected]="theme.selected" (click)="themeSwitch.setValue(i)">
{{theme.name}}
</button>
</mc-dropdown>
Expand All @@ -54,12 +54,12 @@
<div class="color-picker">
<button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
[mcDropdownTriggerFor]="colorDropdown">
<i mc-icon="mc-circle-8_16" [style.color]='activeColor.code' class="color-picker__icon"></i>
<i mc-icon="mc-circle-8_16" [style.color]='colorSwitch.currentValue.code' class="color-picker__icon"></i>
<i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
</button>
<mc-dropdown #colorDropdown="mcDropdown" class="color-picker__dropdown" [style.margin-top]="0">
<div class="color-picker__dropdown-content">
<span *ngFor="let color of colors; let i = index" [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected" (click)="setColor(i)">
<span *ngFor="let color of colorSwitch.data; let i = index" [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected" (click)="colorSwitch.setValue(i)">
<i mc-icon="mc-circle-8_16" [style.color]='color.code' class="color-picker__icon"></i>
</span>
</div>
Expand Down