order-list-item #88

maestrow · 2018-05-03T16:39:42Z

No description provided.

serjout · 2018-05-04T10:30:51Z

front/src/app/components/common/orders-list-item/readme.md

@@ -0,0 +1,15 @@
+Order list item:
+
+    const { EProfileStatus } = require ('app/api/types');


а это так работает да ?

Это работает. Если здесь что-то неправильно, напиши.

все правильно если работает. я прост не знал что так можно)

serjout · 2018-05-04T10:35:06Z

front/src/app/components/common/orders-list-item/index.tsx

+        return (
+            <div className="orders-list-item">
+                <div className="orders-list-item__column-logo">
+                    <div className="orders-list-item__column-logo__logo">


тут можно везде без враперов обойтись. переделывать не надо (пока). но надо всегда помнить как мы не любим когда браузеры тормозят и потребляют много памяти ))

AccountItem можно посмотреть как пример

Ты имеешь в виду, что здесь лучше использовать display: grid; ?

serjout · 2018-05-04T10:36:04Z

front/src/app/components/common/orders-list-item/index.tsx

+                    <div className="orders-list-item__value">
+                        {this.props.duration} hours
+                    </div>
+                    <div>&nbsp;</div>


а это что за штука?)

Да, мне тоже не нравится эта штука. <div> </div> в данном случае играет роль пустой третьей строки. И две первые становятся вровень со строками предыдущих колонок. Без   содержимое контейнера растягивается. Возможно этой проблемы не будет, если сделать всю разметку через display: grid;

serjout · 2018-05-04T10:41:09Z

front/src/app/components/common/orders-list-item/index.less

+@ordersListItem-fontFamily: Roboto, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    'Helvetica Neue', Helvetica, Arial, sans-serif;
+@ordersListItem-label-fontColor: #95989a;


эти цвета и шрифты должны быть в guide.less и надо оттуда их использовать. в том и смысл guide.less )

serjout · 2018-05-04T10:41:49Z

front/src/app/components/common/orders-list-item/index.less

+
+// External variables
+
+@ordersListItem-fontFamily: Roboto, -apple-system, BlinkMacSystemFont,


@ordersListItem-fontFamily: @font-family

…sed buttons.

…column widths.

…llet into OrderPreviewItem

serjout · 2018-05-11T08:52:00Z

front/src/app/components/common/input/readme.md

+
+Input with prefix:
+
+    <div style={{display:'flex', 'flex-direction': 'row' }}>


u can just write

Input with prefix: <Input prefix="from" /> one more: <Input prefix="to" />

serjout · 2018-05-11T08:52:34Z

front/src/app/components/common/list-header/index.less

+
+// External variables
+
+@listHeader-fontColor: #95989a;


u must take this values from guide.less

serjout · 2018-05-11T08:54:22Z

front/src/app/components/common/list-header/index.tsx

+            <div className={cn('list-header', this.props.className)}>
+                <div className="list-header__sortings">
+                    Sort by:
+                    <div className="list-header__sortings__container">


element of element is not allowed in BEM notation
u must use another block here (or element)

serjout · 2018-05-11T09:05:52Z

front/src/app/components/common/list-header/index.tsx

+                            <button
+                                key={orderKey}
+                                className={cn(
+                                    'list-header__sortings__container__item',


same like previous

serjout · 2018-05-11T09:11:35Z

front/src/app/components/common/list-header/index.tsx

+import { IListHeaderProps } from './types';
+
+export class ListHeader extends React.Component<IListHeaderProps, any> {
+    constructor(props: IListHeaderProps) {


redundant. u can just skip constructor

serjout · 2018-05-11T09:44:58Z

front/src/app/components/common/orders/index.tsx

+
+    public render() {
+        return (
+            <div className="orders">


please use more specific block name

serjout · 2018-05-11T10:02:46Z

front/src/app/components/common/orders-list-item/index.tsx

+import * as cn from 'classnames';
+
+export class OrdersListItem extends React.Component<IOrdersListItemProps, any> {
+    constructor(props: IOrdersListItemProps) {


u can skip ctr definiton

serjout · 2018-05-11T10:11:53Z

front/src/app/components/common/orders/index.tsx

+import { ListHeader } from '../list-header';
+import { IOrdersProps } from './types';
+
+export class Orders extends React.Component<IOrdersProps, any> {


we must use PureComponent for complex component

serjout · 2018-05-11T10:14:55Z

front/src/app/components/common/orders/readme.md

+
+    const Container = observer(() =>
+      <Orders
+        header={{


we must use PureComponent for complex component

but this line will kill this optimisation. nested object is not good idea for props

serjout · 2018-05-11T10:17:32Z

front/src/app/components/layouts/orders/index.tsx

+export class Orders extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+        this.state = initialState;


this component must not have this.state.

rootStore.orderList - is its state

…derProps. Goal: to have flat props to make Orders shouldComponentUpdate performance better.

…llet into OrderPreviewItem

maestrow added 2 commits May 3, 2018 19:35

order-list-item

df60ec6

OrdersListItem: alignments and borders

b819923

serjout reviewed May 4, 2018

View reviewed changes

maestrow added 24 commits May 4, 2018 15:51

Add icons: refresh, sync, order-asc, order-desc

91988d8

Clean svg code for Icons

514ae70

ListHeader

cae9f74

ListHeader: replace div click with button. Make ouline style for focu…

0c69f31

…sed buttons.

OrdersItemList: use guide.less variables.

fab5da9

remove redundant component stub

e1a45b7

ListHeader: Extract type in separate file. Add className property.

84a125c

OrdersListItem: Add className property.

cebbb33

Orders: Draft version.

00c8557

Input: Add prefix. Add style. Add readme.

87070dd

Input: Remove style prop application

6dd9268

OrdersListItem: Rewrite to grid layout

0460ec5

OrdersListItem: Custom fields.

5ebdcea

OrdersListItem: Top and bottom borders. Align costs.

f55e046

OrdersListItem, Orders: Made order name optional.

aef5df6

OrdersListItem: Change line names, replace 'auto' with fractions for …

73183ab

…column widths.

Merge branch 'GUI-01-prepare-your-a' of https://github.com/sonm-io/Wa…

865fe6a

…llet into OrderPreviewItem

Merge branch 'GUI-01-prepare-your-a' of https://github.com/sonm-io/Wa…

ad274c8

…llet into OrderPreviewItem

rename EProfileStatus -> EnumProfileStatus

9fd0c49

Orders: Add interactivity to readme

81b49fc

Orders layout with mock data. Menu: Market \ Orders.

afabc44

Merge branch 'GUI-01-prepare-your-a' of https://github.com/sonm-io/Wa…

9285250

…llet into OrderPreviewItem

Merge branch 'GUI-01-prepare-your-a' of https://github.com/sonm-io/Wa…

5684665

…llet into OrderPreviewItem

Add store to orders

5493a9e

serjout suggested changes May 11, 2018

View reviewed changes

maestrow added 2 commits May 11, 2018 15:35

Specify strict event type.

bc7fd32

getOrders recieve: limit and offset args.

7183295

maestrow added 6 commits May 11, 2018 15:37

Clean Orders layout component

8318311

Move Orders from common to layout.

412872f

Add sorting for mock data in Orders view.

f4a63d3

Flatten OrdersView component: make IOrdersProps inheritor of IListHea…

74ec148

…derProps. Goal: to have flat props to make Orders shouldComponentUpdate performance better.

less: Use color from guide.less.

eb16625

Merge branch 'GUI-01-prepare-your-a' of https://github.com/sonm-io/Wa…

f31021f

…llet into OrderPreviewItem

serjout merged commit e411d38 into sonm-io:GUI-01-prepare-your-a May 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

order-list-item #88

order-list-item #88

maestrow commented May 3, 2018

serjout May 4, 2018

maestrow May 4, 2018

serjout May 7, 2018

serjout May 4, 2018

serjout May 4, 2018

maestrow May 4, 2018

serjout May 4, 2018

maestrow May 4, 2018 •

edited

serjout May 4, 2018

serjout May 4, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

serjout May 11, 2018

		@@ -0,0 +1,15 @@
		Order list item:

		const { EProfileStatus } = require ('app/api/types');


		// External variables

		@ordersListItem-fontFamily: Roboto, -apple-system, BlinkMacSystemFont,


		Input with prefix:

		<div style={{display:'flex', 'flex-direction': 'row' }}>

order-list-item #88

order-list-item #88

Conversation

maestrow commented May 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maestrow May 4, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maestrow May 4, 2018 •

edited