Skip to content

K
kus-admin
Commit 021531f9 by talequale
Options

button component

parents 60fdc406 a3b05e6e
Showing with 720 additions and 302 deletions
pack.js
...@@ -3,6 +3,6 @@ module.exports = { ...@@ -3,6 +3,6 @@ module.exports = {
entry: {js: 'main.jsx', html: 'index.html'}, entry: {js: 'main.jsx', html: 'index.html'},
public: './public', public: './public',
scss: { scss: {
shared: `@import '/base.scss';` shared: `@import '/main.scss';`
} }
}; };
src/base.scss deleted 100644 → 0
$black: #000;
$white: #fff;
$d-green: #006C43;
$l-green: #34BE5B;
$gray: #a6a6a6;
$font: 'SF Pro Text', Arial, sans-serif;
\ No newline at end of file
src/core/data/store/Store.js
...@@ -143,6 +143,24 @@ Store.prototype = { ...@@ -143,6 +143,24 @@ Store.prototype = {
}, },
bind: function (key) { bind: function (key) {
return new StoreBinding(this, key); return new StoreBinding(this, key);
},
val: function(key) {
const me = this;
return function backwardCallback(update) {
me.sub(key, val => update(val));
}
},
valEqual: function(key, val) {
const me = this;
return function backwardCallback(update) {
me.equal(key, val, compareResult => update(compareResult));
}
},
valTrue: function(key) {
return this.valEqual(key, true);
},
valFalse: function(key) {
return this.valEqual(key, false);
} }
}; };
const StoreBinding = function(store, key){ const StoreBinding = function(store, key){
...@@ -159,4 +177,27 @@ StoreBinding.prototype = { ...@@ -159,4 +177,27 @@ StoreBinding.prototype = {
}; };
Store.prototype = Object.assign(new Observable, Store.prototype); Store.prototype = Object.assign(new Observable, Store.prototype);
Store.AND = function() {
};
Store.OR = function(...args) {
let composite, _i = args.length,
vals = new Array(_i);
return function(update) {
let check = ()=>{
let result = false;
for(let i = 0; i < _i; i++){
result = result || vals[i];
}
if(composite !== result)
update(composite = result);
};
for(let i = 0; i < _i; i++){
args[i]((val)=>{vals[i] = val;check();})
}
};
};
typeof module === 'object' && (module.exports = Store); typeof module === 'object' && (module.exports = Store);
\ No newline at end of file
src/dict/Consts.js 0 → 100644
const Consts = {
ANCHORS: {
EXIT: "#exit",
},
API: {
ENDPOINTS: {
// Auth Endpoints
SEND_CODE: "/api/login/send_code",
CHECK_CODE: "/api/login/check_code",
CHECK_PHONE: "/api/login/check_phone",
CHECK_ID_TOKEN: "/api/login/check_id_token",
// Testing Endpoints
GET_TESTING_LIST: "/api/quizzes",
PUT_TESTING_LIST: id => `/api/quizzes/${id}`,
GET_ACTIVE_TESTING: "/api/quiz/active",
CREATE_TESTING_ATTEMPT: "/api/quiz_attempt_create",
GET_TESTING_ATTEMPT: id => `/api/quiz_attempts/${id}`,
GET_TESTING_QUESTION: id => `/api/quiz_questions/${id}`,
SEND_QUESTION_ANSWERS: id => `/api/quiz_questions/${id}`,
INTERRUPT_TEST: id => `/api/quiz_attempt/abort/${id}`,
// Employees Endpoints
GET_USERS_LIST: "/api/users",
EDIT_USER: id => `/api/users/${id}`,
// Employee Positions
GET_POSITIONS: "/api/employee_positions",
// Knowledge Endpoints
GET_CARD_PRODUCTS: "/api/card_products",
GET_CARD_INFOS: "/api/card_infos",
GET_CARD_PRODUCTS_CARD: id => `/api/card_products/${id}`,
GET_CARD_INFO_CARD: id => `/api/card_infos/${id}`,
GET_CARD_INFO_ITEM: id => `/api/card_info_items/${id}`,
CATEGORIES_CATEGORY: id => `/api/categories/${id}`,
// Categories
GET_CATEGORIES: "/api/categories",
// Account Endpoints
GET_USER: id => `/api/users/${id}`,
GET_USER_NEW_CARDS: "/api/history/cards/new",
GET_USER_QUIZ_ATTEMPT_ID: "/api/quiz_attempt/last",
GET_USER_QUIZ_ATTEMPTS_BY_ID: id => `/api/quiz_attempts/${id}`,
},
HEADERS: {
DEFAULT: {
"Content-Type": "application/json",
},
},
DELAY: {
DEFAULT_MS: 1000,
FILTERS_MS: 500,
},
METHODS: {
GET: "GET",
POST: "POST",
PUT: "PUT",
DELETE: "DELETE",
},
STATUS_REQUEST: {
NONE: "NONE",
FETCHING: "FETCHING",
DONE: "DONE",
},
},
ENV: {
DEVELOPMENT: "development",
PRODUCTION: "production",
NODE_ENV: process.env.NODE_ENV,
IS_DEVELOPMENT: null,
BASE_URL: null,
},
ERRORS: {
API: {
NO_ENDPOINT: "NO_ENDPOINT",
},
},
DOM: {
ROOT: "root",
},
LOCAL_STORAGE: {
TOKEN: {
TOKEN: "token",
GET_TOKEN: null,
},
EMPLOYEE: {
IS_LOGGES_FIRST_TIME: "isLoggedFirstTime",
},
ROLES: "roles",
ROLE: "role",
USER_ID: "userId",
TESTING: {
QUESTION_NUMBER: "questionNumber",
ATTEMPT_ID: "attemptId",
TIMER_VALUE: "timerValue",
RESULT_ID: "resultId",
INTERRUPT_TEST: "interruptTest",
DURATION: 'duration'
},
},
ROLES: {
ADMIN: "ROLE_ADMIN",
VISITOR: "ROLE_VISITOR",
EMPLOYEE: "ROLE_EMPLOYEE",
},
ROUTES: {
MAIN: "/",
ADMIN: {
MAIN: "/admin",
EMPLOYEES: "/admin/employees",
CONTENTS: "/admin/contents",
TESTING: "/admin/testing",
STATISTICS: "/admin/statistics",
},
LOGIN: {
MAIN: "/login",
LOGIN_ENTRY: "/login/entry",
LOGIN_INFO: "/login/info",
CHANGE_ROLE: "/login/change_role",
},
EMPLOYEE: {
ACCOUNT: {
MAIN: "/account",
PERSONAL: "/account/personal",
GREETING: "/account/greeting",
},
TESTING: {
MAIN: "/account/testing",
TESTING_NOT_ACTIVATED: "/account/testing/not_activated",
TESTING_CONFIRMATION: "/account/testing/confirmation",
TESTING_TEST: questionId => `/account/testing/test/${questionId}`,
TESTING_HIGH_RESULT: "/account/testing/high_result",
TESTING_TOP_RESULT: "/account/testing/top_result",
TESTING_RESULT: "/account/testing/result",
TESTING_ANSWERS: "/account/testing/answers",
TESTING_FINISH: "/account/testing/finish",
TESTING_INTERRUPT: "/account/testing/interrupt",
MOCK_TESTING_HIGH_RESULT: "/account/mock/testing/high_result",
MOCK_TESTING_TOP_RESULT: "/account/mock/testing/top_result",
MOCK_TESTING_RESULT: "/account/mock/testing/result",
},
KNOWLEDGE_BASE: {
MAIN: "/account/knowledge_base",
KNOWLEDGE_BASE_TOP: categoryId => `/account/knowledge_base/top/${categoryId}`,
KNOWLEDGE_BASE_CARD: (categoryId, cardId) =>
`/account/knowledge_base/card/${categoryId}/${cardId}`,
},
},
},
PAGINATE: {
MAX_PAGES: 19,
},
TESTING: {
LIST: {
ITEMS_PER_PAGE: 20,
},
},
EMPLOYEES: {
LIST: {
ITEMS_PER_PAGE: 20,
},
},
POSITIONS: {
LIST: {
ITEMS_PER_PAGE: 20,
},
},
MODAL: {
EDIT: {
WIDTH: "1060px",
HEIGHT: "730px",
},
ACTIVATED: {
HEIGHT: "300px",
},
ERROR: {
HEIGHT: "420px",
},
CONFIRM: {
HEIGHT: "440px",
},
EDIT_CONFIRM: {
HEIGHT: "420px",
},
SMS: {
HEIGHT: "690px",
WIDTH: "1060px",
},
},
FORMS: {
INPUT: {
MAX_SIZE: 100,
},
},
DATE_FORMATS: {
DEFAULT: "dd.MM.yyyy",
MONTH_YEAR: "LLLL yyyy",
DAY_MONTH: "dd.MM",
},
}
Consts.LOCAL_STORAGE.TOKEN.GET_TOKEN = (token) => `Bearer ${token}`
Consts.ENV.IS_DEVELOPMENT = Consts.ENV.NODE_ENV === Consts.ENV.DEVELOPMENT
Consts.ENV.BASE_URL = 'https://api.local.vkusvill.testin.ru';/*Consts.ENV.IS_DEVELOPMENT
? `${window.location.protocol}//${window.location.hostname}`//${window.location.port!=="80"?':'+window.location.port:''}`
: window.location.origin*/
export default Consts
src/dict/Strings.js 0 → 100644
import Consts from "./Consts"
const Strings = {
ADMIN_MENU: [
{
id: 0,
name: "Список сотрудников",
link: Consts.ROUTES.ADMIN.EMPLOYEES,
},
{
id: 1,
name: "Управление контентом",
link: Consts.ROUTES.ADMIN.CONTENTS,
},
{
id: 2,
name: "Управление тестированием",
link: Consts.ROUTES.ADMIN.TESTING,
},
{
id: 3,
name: "Статистика",
link: Consts.ROUTES.ADMIN.STATISTICS,
},
],
AUTH: {
AUTH_PROBLEM: "Проблемы с авторизацией?",
AUTH_PROBLEM_TEXT: "Текст про то, куда писать и звонить",
AUTH_PROBLEM_PHONE: "8 800 000 00 00",
TO_LOGIN: "Вернуться к авторизации",
EXIT: "Выйти",
ROLES: {
ROLE_ADMIN: {
id: 1,
str: "Как администратор",
props: { arrow: true, theme: "submit", type: "button" },
},
ROLE_EMPLOYEE: {
id: 2,
str: "Как пользователь",
props: { arrow: "next", theme: "default", type: "button" },
},
},
CHOOSE_ROLE_TITLE: "Вы хотите войти как администратор или как пользователь?",
FORM_PHONE_LABEL: "Введите номер телефона, чтобы продолжить.",
FORM_LOGIN_LABEL: "Введите код из СМС",
WELLCOME: "Добро пожаловать в\u00A0\развивающую платформу Вкусвилл!",
},
BUTTONS: {
FARTHER: "Далее",
},
ERRORS: {
API: {
[Consts.ERRORS.API.NO_ENDPOINT]: "Такого endpoint не существует",
},
FIELDS: {
VALUE_MISSING: "Поле не заполнено",
MIN_VALUE: "Поле заполнено некорректно",
},
},
ACCOUNT: {
MAIN: {
NEW_CARDS: "Новые карточки для вашей должности:",
},
GREETING: {
HEADER: "Добро пожаловать!",
TEXT1: "Мы очень рады видеть вас во внутренней базе знаний ВкусВилла!\n",
TEXT2:
"Здесь собрана информация по всему ассортименту продуктов и правилам взаимодействия с покупателями.\n" +
"Для закрепления и проверки знаний можно всегда пройти интерактивное тестирование!\n" +
"\n" +
"**Вы будете одним из первых сотрудников получивших доступ к продукту находящемуся в разработке. Обязательно сообщайте о всех выявленных проблемах — мы постараемся как можно быстрее всё исправить.**",
},
PERSONAL_AREA: {
FINAL_TESTING: "Итоговое тестирование",
PASSED: "Пройдено",
YOU_HAVE_NOT_PASSED: "Вы еще не проходили итоговое тестирование",
PERSONAL_AREA: "Личный кабинет",
TODAY_YOU_CAN: "Сегодня вы можете",
NEW_CARDS_FOR_YOU_POST: "Новые карточки для вашей должности",
YOU_LOOKED_AT_ALL_THE_NEW_CARDS: "Вы просмотрели все новые карточки этого месяца.",
KEEP_IT_UP: "Так держать!",
BUTTONS: {
FINAL_TEST: "Пройти итоговое тестирование",
TRIAL_TEST: "Пройти пробное тестирование",
VIEW_KNOWLEDGE_BASE: "Посмотреть базу знаний",
},
},
TESTING: {
WELCOME: {
HEADER: "Добро пожаловать\nв\u00A0итоговое\nтестирование!",
TEXT1:
"Ассортимент наших магазинов постоянно расширяется и на главном экране появляются карточки с новыми товарами.\n\n"+
"Тестирование — это проверка вашей подготовки к работе с покупателями.\n" +
"Если не уверены в своих знаниях — потренеруйтесь на пробном тестировании.\n",
TEXT2: "Тестирование проходит в период: ",
},
NOT_ACTIVATED: {
ATTENTION: "Внимание!",
HEADER: "Тестирование не\u00A0активировано",
TEXT1:
"Текст про то, что тестирование еще не активировано. СТА -\n" +
"потренироваться на пробном тестировании.\n" +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi\n" +
"lacinia augue quam, in dapibus nulla ullamcorper nec. Mauris\n" +
"ac magna est.",
},
CONFIRMATION: {
HEADER: "Тестирование невозможно прервать",
TEXT: "Это последнее предупреждение. Вы уверены, что\nготовы начать?",
},
RESULT: {
CONGRATULATION: "Поздравляем!",
RESULT: "Ваш результат:",
CORRECT_COUNT: "Вы верно ответили на",
HEADER: "Вы завершили тестирование!",
HEADER_TOP: "Вы вошли в ТОП лучших ответов!",
HEADER_BAD: "Тестирование завершено",
TEXT1:
"ТОП лучших ответов означает, что в следующем\n" +
"тестировании вам нужно будет ответить на меньшее\n" +
"количество вопросов.Отличная работа! Мы гордимся\n" +
"вами!",
TEXT2:
"К сожалению, это очень низкий результат.\n" +
"Мы верим, что вы можете лучше! При подготовке к\n" +
"следующему тестированию, попробуйте\n" +
"потренироваться на пробном тесте или почитать\n" +
"нашу базу знаний.",
FINAL: "Спасибо за участие в тестировании!\nУвидимся через месяц!",
INTERRUPT_HEADER: "Тестирование было прервано",
INTERRUPT_TEXT1: "Вам придется начать его заново.",
INTERRUPT_TEXT2:
"Это могло произойти из-за проблем в соединении с\n" +
'интернетом либо из-за нажатия кнопки "назад".\n' +
"Пожалуйста, убедитесь, что Вы находитесь в зоне хорошего\n" +
"приема и начните тестирование снова.",
},
ANSWERS_TYPE: {
RADIO: "Возможен единственный выбор",
CHECKBOX: "Возможно несколько вариантов",
},
},
},
LOGIN: {
SMS: {
PLACEHOLDER: "000000",
},
LOGIN: "Ваш телефон",
},
KNOWLEDGE: {
CATEGORY: {
TITLE: "База знаний",
SUBTITLE: "Категории",
},
CARDS: {
CARDS_IN_CATEGORY: "Карточек в категории",
VIEWED: "Просмотрено",
},
},
BUTTON: {
CONTINUE: "Продолжить",
PRACTICE_FIRST: "Сначала потренироваться",
START_TESTING: "Начать тестирование",
READY_GO: "Я готов! Начать",
SHOW_MY_ANSWERS: "Посмотреть мои ответы",
COMPLETE_TESTING: "Завершить тестирование",
DONE: "Готово",
START_OVER: "Начать заново",
SHOW_CARD: "Посмотреть карточку с информацией",
},
}
export default Strings
src/global-styles/base.scss 0 → 100644
@import "./fonts.scss";
body {
margin: 0;
padding: 0;
min-width: 320px;
font-family: $font;
font-size: 18px;
line-height: 23px;
color: $text-main;
background-color: $bg-main;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.page-content {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-top: 90px;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}
.page-content__inner {
display: flex;
flex-direction: column;
flex-grow: 1;
}
src/global-styles/fonts.scss 0 → 100644
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-RegularItalic.woff2") format("woff2"),
url("fonts/SFProText-RegularItalic.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/SFProText-Medium.woff2") format("woff2"),
url("fonts/SFProText-Medium.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("fonts/SFProText-MediumItalic.woff2") format("woff2"),
url("fonts/SFProText-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/SFProText-Semibold.woff2") format("woff2"),
url("fonts/SFProText-Semibold.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("fonts/SFProText-SemiboldItalic.woff2") format("woff2"),
url("fonts/SFProText-SemiboldItalic.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/SFProText-Bold.woff2") format("woff2"),
url("fonts/SFProText-Bold.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("fonts/SFProText-BoldItalic.woff2") format("woff2"),
url("fonts/SFProText-BoldItalic.woff") format("woff");
}
src/global-styles/typography.scss 0 → 100644
@mixin mainTitle {
font-weight: 700;
font-size: 44px;
line-height: 50px;
letter-spacing: 0.01em;
}
@mixin title {
font-weight: 700;
font-size: 32px;
line-height: 40px;
}
@mixin headline {
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@mixin lesserHeadline {
font-weight: 700;
font-size: 18px;
line-height: 24px;
}
@mixin mainSubtitle {
font-weight: 600;
font-size: 18px;
line-height: 22px;
}
@mixin subtitle {
font-weight: 600;
font-size: 16px;
line-height: 22px;
}
@mixin mainBodyText {
font-weight: 500;
font-size: 18px;
line-height: 23px;
color: $gray-dark;
}
@mixin bodyText {
font-weight: 500;
font-size: 17px;
line-height: 22px;
}
@mixin mainCaption {
font-weight: 500;
font-size: 15px;
line-height: 20px;
color: $gray-dark;
}
@mixin caption {
font-weight: 500;
font-size: 13px;
line-height: 17px;
color: $gray-dark;
}
@mixin lesserCaption {
font-weight: 400;
font-size: 12px;
line-height: 17px;
color: $green-gray;
}
src/global-styles/variables.scss 0 → 100644
$bg-main: #ffffff;
$bg-accent: #f6f6f6;
$bg-pattern: #e0e0e0;
$text-main: #000000;
$gray-dark: #575756;
$gray-medium: #a6a6a6;
$gray-light: #dfdfdf;
$accent-main: #34BE5B;
$accent-medium: #259C47;
$accent-dark: #006C43;
$green-gray: #B2C5B7;
$teal: #3B6977;
$red: #FF0000;
$brick: #C94C0A;
$sienna: #D8960D;
$font: 'SF Pro Text', Arial, sans-serif;
src/main.jsx
import './main.scss';
import './view/page/login/Login.jsx'; import './view/page/login/Login.jsx';
import './view/page/account/Account.jsx'; import './view/page/account/Account.jsx';
import './view/cmp/switch/Switch.jsx'; import './view/cmp/switch/Switch.jsx';
import Header from './view/block/header/Header.jsx'; import Header from './view/block/header/Header.jsx';
import "/global-styles/base.scss";
export default function() { export default function() {
let tagField, exportEl; let tagField, exportEl;
......
src/main.scss
@import "base.scss"; @import "/global-styles/variables.scss";
@import "/global-styles/typography.scss";
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff");
}
body {
margin: 0;
padding: 0;
min-width: 320px;
font-family: $font;
font-size: 18px;
line-height: 23px;
}
.page-content {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-top: 90px;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}
.page-content__inner {
display: flex;
flex-direction: column;
flex-grow: 1;
}
//.main-menu, .export-sub-menu, .generate-sub-menu {
// display: flex;
//}
//
//.main-menu-item.main-menu-item__active {
// border-bottom: 5px solid #00832a;
//}
//
//.main-menu-item {
// flex-direction: row;
// padding: 4px 8px 4px;
// margin: 5px 5px 2px 5px;
// border-bottom: 5px solid transparent;
//}
//
//
//.main-menu-item__export {
// margin-left: auto;
//}
//.main-menu {
// border-bottom: 1px solid #00832a;
// //margin-bottom: 15px;
//}
//
//
//.table-item {
// padding: 10px;
// transition: all ease-out 0.3s;
// max-height: 500px;
// opacity: 1;
// position: relative;
//
//}
//
//.table-item:hover {
// background: #ffe476;
//}
//
//
//.table-item:hover .product-cmp {
// background: #fff;
//}
//.table-item__product-components {
// margin-left: -5px;
//}
//.table-item__hidden {
// max-height: 0;
// opacity: 0;
// padding: 0;
//}
//.table-item__hidden-full {
// display: none;
//}
//.table-item-action {
// cursor: pointer
//}
//
//
//.tag {
// color: #125ba1;
// font-style: italic;
// font-size: 14px;
// margin-left: 8px;
//}
//
//.product-cmp {
// border-radius: 8px;
// background: #fff3ca;
// padding: 1px 5px;
// font-size: 12px;
//}
//.product-title {
// font-size: 17px;
// margin-right: 16px;
//}
//
//
//textarea.export-data {
// width: calc(100% - 32px);
// margin: 16px 0 5px 14px;
// height: calc(100vh - 200px);
//}
//
//.export-sub-menu {
// margin-right: 10%;
// margin-bottom: 10px;
//}
//.export-sub-menu .main-menu-item,
//.product-filter__title, .product-filter,
//.generate-sub-menu .main-menu-item{
// color: #fff;
//}
//.main-menu-item {
// cursor: pointer;
// transition: all 0.5s;
//}
//
//.product-filter {
// display: flex;
// padding: 5px;
//}
//.product-filter__title {
// font-size: 20px;
// padding-top:4px;
//}
//.product-filter__input {
// margin-left: 20px;
// padding: 4px 10px;
// font-size: 20px;
// font-family: Verdana;
// flex-grow: 1;
//}
//.product-filter__label {
// margin-right: 16px;
//}
//.highlighted {
// background: #00832a;
// color: #fff;
//}
//.product-filter__hint {
// margin-right: 16px;
//}
//
//
//input:focus, textarea:focus, select:focus {
// outline-color: #00832a;
//}
//.product-filter__area, .title-gradient {
// background: linear-gradient(181deg, #afca0b, #00832a);
// padding: 12px 8px 16px;
//}
//
//.export-panel .title-gradient {
// padding-bottom: 0;
//}
//.export-panel .main-menu-item.main-menu-item__active,
//.generate-panel .main-menu-item.main-menu-item__active{
// border-bottom: 5px solid #fff;
//}
//body {margin: 0; padding: 0}
//
//.tag-manipulations {
// padding: 8px;
//}
//.tag-manipulations__not-active {
// opacity: 0.3;
// pointer-events: none;
//}
//
//.cmp-tag-field {
// display: inline-block;
// width: 300px;
// position: relative;
//}
//.cmp-tag-input {
// width: 100%;
// box-sizing: border-box;
//}
//.cmp-tag-dropdown {
// position: absolute;
// width: 100%;
// background: #fff;
// border: 1px solid #158b26;
// box-sizing: border-box;
// margin-top: -1px;
// z-index: 1;
//}
//.cmp-tag-dropdown-item {
// margin: 8px;
//}
//.cmp-tag-dropdown__hidden {
// display: none;
//}
//.table-item-action {
// display: none;
// cursor: pointer;
// color: #a00;
// position: absolute;
// top: -4px;
//}
//
//.table-item:hover .table-item-action {
// display: inline-block;
//}
//
//.product-description {
// font-size: 14px;
// padding: 16px 0 8px;
// max-width: 480px;
//}
//.quiz-answer-label {
// display: block;
//}
//textarea.generate-debug {
// width: calc(100% - 32px);
// margin: 16px 0 5px 14px;
// height: 500px;
//}
//
//.tag-manipulations-add-tag__comment {
// font-size: 12px
//}
//
//.tag-manipulations-add-tag__comment span{
// margin-left: 16px
//}
//.product-title {
// cursor: pointer;
//}
//
//.generate-title {
// font-size: 18px;
// margin: 16px
//}
//
//.quiz-answer-label {
// margin: 16px 32px 16px 16px;
//}
//.quiz-answer-label input {
// margin-right:8px
//}
//.generate-controls {
// margin:16px
//}
//.generate-seed-label {
// margin: 0 8px 0 32px
//}
//.generate-example {
// position: relative;
//}
//.generate-image {
// position: relative;
// float: right;
// width: 265px;
// margin: -20px 16px 16px;
// border: 2px solid #429d1e;
//}
//.generate-image img {
// width: 100%;
//}
src/view/block/header/Header.scss
...@@ -4,6 +4,6 @@ ...@@ -4,6 +4,6 @@
left: 0; left: 0;
width: 100%; width: 100%;
min-height: 90px; min-height: 90px;
background-color: $white; background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25); box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
} }
src/view/cmp/button.scss deleted 100644 → 0
.button {
color: green
}
\ No newline at end of file
src/view/cmp/button.jsx → src/view/cmp/button/Button.jsx
import './button.scss'; import './button.scss';
export const Button = D.declare('view.cmp.Button', function(cfg) {
return <input type='text' {...cfg} cls='button'/> export default D.declare('view.cmp.Button', function(cfg) {
return <button type={cfg.type} {...cfg}>{cfg.value}</button>
}); });
src/view/cmp/button/button.scss 0 → 100644
.button {
position: relative;
padding: 5px 43px;
text-align: center;
font-weight: 500;
font-size: 17px;
line-height: 36px;
color: $accent-dark;
border-width: 2px;
border-style: solid;
border-color: rgba($bg-main, 0);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
&:active {
color: $accent-medium;
}
&:focus {
color: $accent-medium;
outline: none;
}
&:disabled {
color: $gray-medium;
}
}
.button--primary {
padding: 5px 48px;
min-width: 200px;
color: $bg-main;
background-color: $accent-main;
border-color: $accent-main;
&:active {
color: $bg-main;
}
&:focus {
color: $bg-main;
outline: none;
}
&:disabled {
color: $bg-main;
}
}
src/view/cmp/field/LabeledField.jsx
...@@ -5,7 +5,7 @@ export default D.declare('view.cmp.field.LabeledField', (cfg)=> ...@@ -5,7 +5,7 @@ export default D.declare('view.cmp.field.LabeledField', (cfg)=>
<div class="labeled-field"> <div class="labeled-field">
<label class="labeled-field__label"> <label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span> <span class="labeled-field__label-text">{cfg.label}</span>
<Input class="labeled-field__input" type={'text'} {...cfg}/> <Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
</label> </label>
</div> </div>
) )
src/view/page/account/Account.jsx
...@@ -3,7 +3,7 @@ export default D.declare('view.page.Account', ()=> ...@@ -3,7 +3,7 @@ export default D.declare('view.page.Account', ()=>
<div> <div>
Account Page Account Page
<div> <div>
Hello, {_=>store.sub('account.name', account=> _(account))} Hello, {store.val('account.name')}
</div> </div>
</div> </div>
) )
src/view/page/login/Login.jsx
import '../../cmp/field/LabeledField.jsx'; import '../../cmp/field/LabeledField.jsx';
import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg'; import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss'; import './loginPage.scss';
//import '../../cmp/button/button.scss';
const {AND, OR} = Store;
export default D.declare('view.page.Login', () => { export default D.declare('view.page.Login', () => {
const loginStore = new Store({ const loginStore = new Store({
phone: '7', phone: '7',
code: '', code: '',
active: 'enterPhone', active: 'enterPhone',
phoneValid: false phoneValid: false,
phoneChecking: false
}); });
loginStore.sub('phone', function (phone) { loginStore.sub('phone', function (phone) {
loginStore.set('phoneValid', phone.length === 11); loginStore.set('phoneValid', phone.length === 11);
}); });
const checkPhone = function() {
loginStore.set('phoneChecking', true);
setTimeout(function() {
loginStore.set('phoneChecking', false);
loginStore.set('active', 'enterCode');
}, 2000)
};
return <div className={"login-page"}> return <div className={"login-page"}>
<div class="login-page__big-logo"> <div class="login-page__big-logo">
<Logo width="660" height="300"/> <Logo width="660" height="300"/>
</div> </div>
<h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1> <h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form"> <form action="#" method="post" className="authorization-form">
{view.cmp.Switch({store: loginStore, key: 'active'}, { {view.cmp.Switch({store: loginStore, key: 'active'}, {
enterPhone: [ enterPhone: [
<view.cmp.field.LabeledField label={'Введите номер телефона, чтобы продолжить.'} bind={loginStore.bind('phone')}/>, <view.cmp.field.LabeledField label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>,
<button <Button
class={"btn btn--primary authorization-form__btn"} value={'Да'}
onclick={()=>loginStore.set('active', 'enterCode')} class={"button button--primary authorization-form__button"}
disabled={_=>loginStore.equal('phoneValid', false, _)} onclick={checkPhone}
>Ага</button> disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}
></Button>
], ],
enterCode: [ enterCode: [
<button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>, <button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
......
src/view/page/login/loginPage.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
align-items: center; align-items: center;
margin: 0 30px 30px; margin: 0 30px 30px;
padding: 54px; padding: 54px;
text-align: center;
background-image: url("/uploads/images/bg-leaves.svg"); background-image: url("/uploads/images/bg-leaves.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; background-size: 100% auto;
...@@ -21,3 +22,9 @@ ...@@ -21,3 +22,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.login-page__title {
@include headline;
margin: 0 auto;
max-width: 800px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment