Изучите Angular JS2 с Парасом Мендираттой за 31 день

Вернуться к планировщику HTML

Для тех, кто впервые заходит в мой блог: мы создаем онлайн-планировщик, похожий на Google Keep. Более подробно вы можете увидеть здесь: Серия руководств

Сегодня мы поговорим о HTML и попробуем сделать HTML-дизайн компонента планировщика максимально похожим на исходный дизайн в соответствии с файлом фотошопа. Мы будем делать следующие вещи:

HTML-дизайн для заголовка приложения
HTML-дизайн для контейнера планировщика
HTML-дизайн для заголовка планировщика
HTML-дизайн нижнего колонтитула планировщика
Подсказки в нижнем колонтитуле планировщика

1. HTML-дизайн для заголовка приложения

Если вы помните, когда мы только начинали проект, цвет фона заголовка и цвет значков в заголовках были соответственно синим и белым. Но, согласно нашему руководству по дизайну, он должен быть горчичным и черным.

Это было из-за темы материала, который мы использовали в приложении. Я пытался найти много информации, чтобы создать пользовательскую тему, но к моменту написания статьи я не смог найти информацию о том, как анализировать файл SCSS с помощью SystemJS. Итак, мы написали хак на данный момент. Для этого откройте файл styles.css и добавьте следующие классы:

.md-sidenav-container {
  background: transparent !important;
}
md-toolbar.md-primary {
  background: #FFBB00 !important;
  color: #142031 !important;
}
.app-toolbar-menu {
  color: #142031 !important;
}

Что ж, это переопределит настройки по умолчанию в предопределенных классах в CSS материальной темы и на данный момент будет выполнять свою работу.

По возможности избегайте использования «!important». Поскольку это было необходимо, как на этот раз, так что мы используем его.

2. HTML-дизайн для контейнера планировщика

Теперь следующее, что нам хотелось бы сделать, это спроектировать контейнер планировщика и переопределить общий внешний вид приложения. В настоящее время он имеет многоцветный фон, так как мы все еще пытались расположить элементы. Так что давайте изменим и это.

Откройте файл styles.css и добавьте/обновите следующий код:

/* Give a default font and background colour to html and body */
html, body {
  margin: 0px;
  height: 100%;
  width: 100%;
  background-color: #4A4A4A;
  font-family: 'Roboto', sans-serif;
}
/* Equivalent to md-card in material design */
.sd-card {
  box-sizing: border-box;
  flex-direction: column;
  margin: 8px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  display: flex;
  -webkit-box-direction: normal;
  color: rgba(0,0,0,0.87);
  background-color: #FAFAFA;
  border-radius: 2px;
  border: 1px solid #979797;
}
/* Add some settings for Goal Container */
.goal-container {
  padding: 32px;
  overflow: scroll;
}

Теперь откройте файл planner.component.html и добавьте

3. HTML-дизайн заголовка планировщика

Так как мы уже создали компонент для Planner Header. Поэтому просто добавьте следующий код в файл planner.component.html. Это вызовет шаблон заголовка планировщика.

<sd-planner-header>Planner Header</sd-planner-header>

Теперь в файле planner.header.component.html добавьте следующий код:

<div class="sd-planner-header">
    <h1>Planner</h1>
    <span class="subtitle">Monday, 9th January 2017</span>
</div>

В настоящее время данные жестко закодированы, но в ближайшем будущем мы сделаем все эти данные максимально динамичными.

Структура planner.header.component.ts будет следующей:

import { Component } from '@angular/core';
@Component({
    moduleId: module.id,
    selector: 'sd-planner-header',
    styleUrls: ['planner.header.component.css'],
    templateUrl: 'planner.header.component.html'
})
export class PlannerHeaderComponent {
}

и обновленный модуль планировщика будет: -

import { NgModule } from '@angular/core';
import { PlannerComponent } from './planner.component';
import { PlannerHeaderComponent } from './header/planner.header.component';
import { SDCommonModule } from './../common/common.module';
import { MaterialModule } from '@angular/material';
@NgModule({
    imports: [ SDCommonModule, MaterialModule.forRoot() ],
    declarations: [ PlannerComponent, PlannerHeaderComponent ],
    exports: [ PlannerComponent ]
})
export class PlannerModule { }

Теперь создайте файл CSS в папке заголовка: -

В файле planner.header.component.css добавьте следующий код. Он будет содержать руководство по стилю только для компонента заголовка планировщика и не будет использоваться совместно с другим компонентом. Довольно круто!

.sd-planner-header {
    max-height: 70px;
    background-color: #D8D8D8;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 16px;
}
.sd-planner-header > h1 {
    color: black !important;
    font-size: 24px;
    font-weight: normal;
    margin: 0px;
}
.sd-planner-header > .subtitle {
    font-size: 18px;
    color: #4A4A4A;
    font-weight: 300;
}

Теперь давайте создадим HTML-код по умолчанию для индикатора выполнения. Мы создадим его как компонент в ближайшем будущем. Откройте файл planner.component.html и добавьте следующий код после объявления заголовка.

<div class="progress"> </div>

Теперь руководство по стилю для индикатора выполнения. Откройте файл planner.component.css и добавьте в него следующий код.

.sd-card > .progress {
    height: 4px;
    background: #7ED321;
    width: 50%;
}

4. HTML-дизайн нижнего колонтитула Planner

Круто, теперь давайте добавим немного дизайна для нижнего колонтитула. Цель должна быть ниже: -

Давайте снова откроем файл planner.component.html и добавим в него следующий код. После планировщик тела.

<div class="planner-footer" sd-layout="row">
        <div sd-layout="row">
            <div class="app-icon-button">
                <i class="material-icons">replay_30</i>
            </div>
            <div class="app-icon-button">
                <i class="material-icons">skip_previous</i>
            </div>
            <div class="app-icon-button">
                <i class="material-icons">navigate_before</i>
            </div>
        </div>
        <div class="app-icon-button">
            <i class="material-icons">print</i>
        </div>
        <div sd-layout="row">
            <div class="app-icon-button">
                <i class="material-icons">navigate_next</i>
            </div>
            <div class="app-icon-button">
                <i class="material-icons">skip_next</i>
            </div>
            <div class="app-icon-button">
                <i class="material-icons">forward_30</i>
            </div>
        </div>
    </div>

Добавьте к нему немного стиля css. Откройте файл planner.component.css и добавьте в него следующий код.

.planner-footer {
    background: #D8D8D8;
    padding: 16px;
    text-align: center;
    justify-content: space-between;
    position: relative;
    bottom: 0px;
}
.planner-footer > div {
    text-align: center;
}
.planner-footer > div > .material-icons, .planner-footer > div > div > .material-icons {
    color: #757575;
    font-size: 32px;
}
.planner-footer > div > .material-icons:hover, .planner-footer > div > div > .material-icons:hover {
    color: #4A4A4A;
}

5. Добавьте всплывающие подсказки в нижний колонтитул планировщика

Теперь давайте добавим всплывающую подсказку в нижний колонтитул планировщика для каждой иконки. На данный момент это немного повторяющийся код. Посмотрим, сможем ли мы в будущем свести его к минимуму. Обновите код нижнего колонтитула следующим образом:

<div class="planner-footer" sd-layout="row">
        <div sd-layout="row">
            <div class="app-icon-button" md-tooltip="Previous Month" mdTooltipPosition="above" >
                <i class="material-icons">replay_30</i>
            </div>
            <div class="app-icon-button" md-tooltip="Previous Week" mdTooltipPosition="above">
                <i class="material-icons">skip_previous</i>
            </div>
            <div class="app-icon-button" md-tooltip="Yesterday" mdTooltipPosition="above">
                <i class="material-icons">navigate_before</i>
            </div>
        </div>
        <div class="app-icon-button" md-tooltip="Print Planner" mdTooltipPosition="above">
            <i class="material-icons">print</i>
        </div>
        <div sd-layout="row">
            <div class="app-icon-button" md-tooltip="Tomorrow" mdTooltipPosition="above">
                <i class="material-icons">navigate_next</i>
            </div>
            <div class="app-icon-button" md-tooltip="Next Week" mdTooltipPosition="above">
                <i class="material-icons">skip_next</i>
            </div>
            <div class="app-icon-button" md-tooltip="Next Month" mdTooltipPosition="above">
                <i class="material-icons">forward_30</i>
            </div>
        </div>
    </div>

Ну вот и все на сегодня. Вы можете скачать код с Github и посмотреть его более подробно.

Скачать Код дня 6:

День № 6 — CodeSnooker/silver-doe
silver-doe — онлайн-планировщикgithub.com

Ссылки на путешествие:

Готовьтесь: Пролог
День №1: Введение в AngularJS 2
День №2: Компонентный и HTML дизайн
День №3: Введение в NgModule
День №4: Введение в компоненты
День №5: Введение в Директивы
День 6. Пересмотрите HTML-код Планировщика

Изучите Angular JS2 с Парасом Мендираттой за 31 день — День № 6