UNPKG

decentraland-ui

Version:

Decentraland's UI components and styles

github.com/decentraland/ui

decentraland/ui

273 lines (272 loc) • 20.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.TablePage = exports.DetailPage = exports.FullscreenPage = exports.HeroPage = exports.MenuAndFullscreenPage = exports.MenuAndSubmenuPage = exports.MenuPage = exports.RegularPage = void 0; var react_1 = __importDefault(require("react")); var Table_1 = __importDefault(require("semantic-ui-react/dist/commonjs/collections/Table")); var Icon_1 = __importDefault(require("semantic-ui-react/dist/commonjs/elements/Icon")); var Atlas_1 = require("../Atlas/Atlas"); var Center_1 = require("../Center/Center"); var Container_1 = require("../Container/Container"); var Dropdown_1 = require("../Dropdown/Dropdown"); var Filter_1 = require("../Filter/Filter"); var Footer_1 = require("../Footer/Footer"); var Header_1 = require("../Header/Header"); var HeaderMenu_1 = require("../HeaderMenu/HeaderMenu"); var Hero_1 = require("../Hero/Hero"); var Navbar_1 = require("../Navbar/Navbar"); var Radio_1 = require("../Radio/Radio"); var Tabs_1 = require("../Tabs/Tabs"); var Column_1 = require("../Column/Column"); var Button_1 = require("../Button/Button"); var Badge_1 = require("../Badge/Badge"); var Back_1 = require("../Back/Back"); var Row_1 = require("../Row/Row"); var Section_1 = require("../Section/Section"); var Empty_1 = require("../Empty/Empty"); var Narrow_1 = require("../Narrow/Narrow"); var colors_1 = require("../../colors"); var Page_1 = require("./Page"); require("./Page.stories.css"); var selected = [{ x: 22, y: 22 }]; function isSelected(x, y) { return selected.some(function (coord) { return coord.x === x && coord.y === y; }); } var selectedStrokeLayer = function (x, y) { return isSelected(x, y) ? { color: '#ff0044', scale: 1.4 } : null; }; var selectedFillLayer = function (x, y) { return isSelected(x, y) ? { color: '#ff9990', scale: 1.2 } : null; }; var meta = { title: 'Page', component: Page_1.Page }; exports.default = meta; exports.RegularPage = { render: function () { return (react_1.default.createElement("div", { className: "Page-story-container" }, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Page_1.Page, null, react_1.default.createElement(Header_1.Header, null, "Hello Wolrd"), react_1.default.createElement("p", null, "This is a regular page")), react_1.default.createElement(Footer_1.Footer, null))); } }; exports.MenuPage = { render: function () { return (react_1.default.createElement("div", { className: "Page-story-container" }, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Tabs_1.Tabs, null, react_1.default.createElement(Tabs_1.Tabs.Tab, { active: true }, "Atlas"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "Market"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "My Assets")), react_1.default.createElement(Page_1.Page, null, react_1.default.createElement(Header_1.Header, null, "Hello Wolrd"), react_1.default.createElement("p", null, "This page has a menu")), react_1.default.createElement(Footer_1.Footer, null))); } }; exports.MenuAndSubmenuPage = { render: function () { return (react_1.default.createElement("div", { className: "Page-story-container" }, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Tabs_1.Tabs, null, react_1.default.createElement(Tabs_1.Tabs.Tab, { active: true }, "Atlas"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "Market"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "My Assets")), react_1.default.createElement(Page_1.Page, null, react_1.default.createElement(HeaderMenu_1.HeaderMenu, null, react_1.default.createElement(HeaderMenu_1.HeaderMenu.Left, null, react_1.default.createElement(Filter_1.Filter, { active: true }, "2 Parcels"), react_1.default.createElement(Filter_1.Filter, null, "1 Estate"), react_1.default.createElement(Filter_1.Filter, null, "1 Contributions"), react_1.default.createElement(Filter_1.Filter, null, "1 Mortgage")), react_1.default.createElement(HeaderMenu_1.HeaderMenu.Right, null, react_1.default.createElement("span", { className: "secondary-text", style: { marginRight: 8 } }, "On Sale"), react_1.default.createElement(Radio_1.Radio, { toggle: true, style: { padding: 5, marginRight: 8 } }), react_1.default.createElement(Dropdown_1.Dropdown, { text: "Newest", direction: "left" }, react_1.default.createElement(Dropdown_1.Dropdown.Menu, null, react_1.default.createElement(Dropdown_1.Dropdown.Item, { text: "Newest", active: true }), react_1.default.createElement(Dropdown_1.Dropdown.Item, { text: "Cheapest" }), react_1.default.createElement(Dropdown_1.Dropdown.Item, { text: "Closest to expire" })))))), react_1.default.createElement(Footer_1.Footer, null))); } }; exports.MenuAndFullscreenPage = { render: function () { return (react_1.default.createElement("div", { className: "Page-story-container" }, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Tabs_1.Tabs, { isFullscreen: true }, react_1.default.createElement(Tabs_1.Tabs.Tab, { active: true }, "Atlas"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "Market"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "My Assets")), react_1.default.createElement(Page_1.Page, { isFullscreen: true }, react_1.default.createElement(Atlas_1.Atlas, null)), react_1.default.createElement(Footer_1.Footer, { isFullscreen: true }))); } }; exports.HeroPage = { render: function () { return (react_1.default.createElement("div", { className: "Page-story-container" }, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Page_1.Page, { isFullscreen: true }, react_1.default.createElement(Hero_1.Hero, { centered: true }, react_1.default.createElement(Hero_1.Hero.Header, null, "ATLAS"), react_1.default.createElement(Hero_1.Hero.Description, null, "Or something like that")), react_1.default.createElement(Container_1.Container, null, react_1.default.createElement(Header_1.Header, null, "Hello Wolrd"), react_1.default.createElement("p", null, "This page has a hero"))), react_1.default.createElement(Footer_1.Footer, null))); } }; exports.FullscreenPage = { render: function () { return (react_1.default.createElement("div", { className: "Page-story-container" }, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Page_1.Page, { isFullscreen: true }, react_1.default.createElement(Center_1.Center, null, react_1.default.createElement(Header_1.Header, { size: "huge" }, "Oops"), react_1.default.createElement("p", null, "Nothing to do here."))), react_1.default.createElement(Footer_1.Footer, { isFullscreen: true }))); } }; exports.DetailPage = { render: function () { return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Page_1.Page, null, react_1.default.createElement(Section_1.Section, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Back_1.Back, { absolute: true }), react_1.default.createElement(Narrow_1.Narrow, null, react_1.default.createElement(Row_1.Row, { stacked: true }, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Header_1.Header, { size: "large" }, "Some Title"), react_1.default.createElement(Badge_1.Badge, { color: colors_1.Color.SUMMER_RED }, react_1.default.createElement(Icon_1.default, { name: "point" }), "66,66"))), react_1.default.createElement(Column_1.Column, { align: "right" }, react_1.default.createElement(Row_1.Row, { align: "right" }, react_1.default.createElement(Button_1.Button, { basic: true }, "Transfer"), react_1.default.createElement(Button_1.Button, { basic: true }, "Edit"), react_1.default.createElement(Button_1.Button, { basic: true }, "Permissions"), react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Button_1.Button, { basic: true }, react_1.default.createElement(Icon_1.default, { name: "ellipsis horizontal" }))), inline: true, direction: "left" }, react_1.default.createElement(Dropdown_1.Dropdown.Menu, null, react_1.default.createElement(Dropdown_1.Dropdown.Item, { text: "Create estate" }), react_1.default.createElement(Dropdown_1.Dropdown.Item, { text: "List for sale" }))))))))), react_1.default.createElement(Narrow_1.Narrow, null, react_1.default.createElement(Section_1.Section, null, react_1.default.createElement(Empty_1.Empty, { height: 240 }, "Some placeholder...")), react_1.default.createElement(Section_1.Section, null, react_1.default.createElement(Header_1.Header, { sub: true }, "Description"), react_1.default.createElement("p", null, "This is some description bla bla bla...")), react_1.default.createElement(Section_1.Section, { size: "tiny" }, react_1.default.createElement(Row_1.Row, { height: 32 }, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Header_1.Header, { sub: true }, "Deployments"))), react_1.default.createElement(Column_1.Column, { align: "right" }, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Button_1.Button, { basic: true }, "Publish"))))), react_1.default.createElement(Empty_1.Empty, { height: 80 }, "Deployments go here..."))), react_1.default.createElement(Footer_1.Footer, null))); } }; exports.TablePage = { render: function () { return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }), react_1.default.createElement(Tabs_1.Tabs, null, react_1.default.createElement(Tabs_1.Tabs.Tab, { active: true }, "Land"), react_1.default.createElement(Tabs_1.Tabs.Tab, null, "Scenes")), react_1.default.createElement(Page_1.Page, { className: "table-story" }, react_1.default.createElement(Row_1.Row, { height: 30 }, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Header_1.Header, { sub: true }, "120 ITEMS"))), react_1.default.createElement(Column_1.Column, { align: "right" }, react_1.default.createElement(Row_1.Row, { align: "right" }, react_1.default.createElement(Radio_1.Radio, { checked: true, label: "Owner" }), react_1.default.createElement(Radio_1.Radio, { checked: true, label: "Operator" }), react_1.default.createElement(Radio_1.Radio, { checked: true, label: "Host" })))), react_1.default.createElement(Table_1.default, { basic: "very" }, react_1.default.createElement(Table_1.default.Header, null, react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.HeaderCell, null, "Name"), react_1.default.createElement(Table_1.default.HeaderCell, null, "Coordinates"), react_1.default.createElement(Table_1.default.HeaderCell, null, "Role"), react_1.default.createElement(Table_1.default.HeaderCell, null, "Operated By"), react_1.default.createElement(Table_1.default.HeaderCell, null, "Type"), react_1.default.createElement(Table_1.default.HeaderCell, null, "Current Scene"))), react_1.default.createElement(Table_1.default.Body, null, react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.Cell, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Atlas_1.Atlas, { x: 22, y: 22, width: 45, height: 45, layers: [selectedStrokeLayer, selectedFillLayer], isDraggable: false, size: 9 })), react_1.default.createElement(Column_1.Column, null, "Delta City"))), react_1.default.createElement(Table_1.default.Cell, null, "66,66"), react_1.default.createElement(Table_1.default.Cell, null, "Owner"), react_1.default.createElement(Table_1.default.Cell, null, "Kyllian"), react_1.default.createElement(Table_1.default.Cell, null, "Parcel"), react_1.default.createElement(Table_1.default.Cell, null, "Magic Forrest")), react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.Cell, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Atlas_1.Atlas, { x: 22, y: 22, width: 45, height: 45, layers: [selectedStrokeLayer, selectedFillLayer], isDraggable: false, size: 9 })), react_1.default.createElement(Column_1.Column, null, "Delta City"))), react_1.default.createElement(Table_1.default.Cell, null, "66,66"), react_1.default.createElement(Table_1.default.Cell, null, "Owner"), react_1.default.createElement(Table_1.default.Cell, null, "Kyllian"), react_1.default.createElement(Table_1.default.Cell, null, "Parcel"), react_1.default.createElement(Table_1.default.Cell, null, "Magic Forrest")), react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.Cell, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Atlas_1.Atlas, { x: 22, y: 22, width: 45, height: 45, layers: [selectedStrokeLayer, selectedFillLayer], isDraggable: false, size: 9 })), react_1.default.createElement(Column_1.Column, null, "Delta City"))), react_1.default.createElement(Table_1.default.Cell, null, "66,66"), react_1.default.createElement(Table_1.default.Cell, null, "Owner"), react_1.default.createElement(Table_1.default.Cell, null, "Kyllian"), react_1.default.createElement(Table_1.default.Cell, null, "Parcel"), react_1.default.createElement(Table_1.default.Cell, null, "Magic Forrest")), react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.Cell, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Atlas_1.Atlas, { x: 22, y: 22, width: 45, height: 45, layers: [selectedStrokeLayer, selectedFillLayer], isDraggable: false, size: 9 })), react_1.default.createElement(Column_1.Column, null, "Delta City"))), react_1.default.createElement(Table_1.default.Cell, null, "66,66"), react_1.default.createElement(Table_1.default.Cell, null, "Owner"), react_1.default.createElement(Table_1.default.Cell, null, "Kyllian"), react_1.default.createElement(Table_1.default.Cell, null, "Parcel"), react_1.default.createElement(Table_1.default.Cell, null, "Magic Forrest")), react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.Cell, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Atlas_1.Atlas, { x: 22, y: 22, width: 45, height: 45, layers: [selectedStrokeLayer, selectedFillLayer], isDraggable: false, size: 9 })), react_1.default.createElement(Column_1.Column, null, "Delta City"))), react_1.default.createElement(Table_1.default.Cell, null, "66,66"), react_1.default.createElement(Table_1.default.Cell, null, "Owner"), react_1.default.createElement(Table_1.default.Cell, null, "Kyllian"), react_1.default.createElement(Table_1.default.Cell, null, "Parcel"), react_1.default.createElement(Table_1.default.Cell, null, "Magic Forrest")), react_1.default.createElement(Table_1.default.Row, null, react_1.default.createElement(Table_1.default.Cell, null, react_1.default.createElement(Row_1.Row, null, react_1.default.createElement(Column_1.Column, null, react_1.default.createElement(Atlas_1.Atlas, { x: 22, y: 22, width: 45, height: 45, layers: [selectedStrokeLayer, selectedFillLayer], isDraggable: false, size: 9 })), react_1.default.createElement(Column_1.Column, null, "Delta City"))), react_1.default.createElement(Table_1.default.Cell, null, "66,66"), react_1.default.createElement(Table_1.default.Cell, null, "Owner"), react_1.default.createElement(Table_1.default.Cell, null, "Kyllian"), react_1.default.createElement(Table_1.default.Cell, null, "Parcel"), react_1.default.createElement(Table_1.default.Cell, null, "Magic Forrest"))))), react_1.default.createElement(Footer_1.Footer, null))); } };