ui.html.haml 14.6 KB
Newer Older
1
- page_title "UI Development Kit", "Help"
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."

.gitlab-ui-dev-kit
  %h1 GitLab UI development kit
  %p.light
    Use page inspector in your browser to check element classes and structure
    of examples below.
  %hr
  %ul
    %li
      = link_to 'Blocks', '#blocks'
    %li
      = link_to 'Lists', '#lists'
    %li
      = link_to 'Tables', '#tables'
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
17 18
    %li
      = link_to 'Nav', '#nav'
19 20
    %li
      = link_to 'Buttons', '#buttons'
Phil Hughes's avatar
Phil Hughes committed
21 22
    %li
      = link_to 'Dropdowns', '#dropdowns'
23 24 25 26 27 28
    %li
      = link_to 'Panels', '#panels'
    %li
      = link_to 'Alerts', '#alerts'
    %li
      = link_to 'Forms', '#forms'
29 30
    %li
      = link_to 'Files', '#file'
31 32
    %li
      = link_to 'Markdown', '#markdown'
33 34 35

  %h2#blocks Blocks

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
  .lead
    Content block separated with botton border
    %code .content-block

  .example
    .content-block
      %h4 Normal block inside content
      = lorem

    .content-block
      %h4 Second block
      = lorem

  .lead
    Gray content block with side padding using
Annabel Dunstone's avatar
Annabel Dunstone committed
51
    %code .row-content-block
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
52

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
53
  .example
Annabel Dunstone's avatar
Annabel Dunstone committed
54
    .row-content-block
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
55 56
      %h4 Normal block inside content
      = lorem
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
57

Annabel Dunstone's avatar
Annabel Dunstone committed
58
    .row-content-block.second-block
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
59 60
      %h4 Second block
      = lorem
61 62


Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
63 64
  .lead
    Cover block for profile page with avatar, name and description
65
    %code .cover-block
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
66 67 68
  .example
    .cover-block
      .avatar-holder
69
        = image_tag avatar_icon_for_email('admin@example.com', 90), class: "avatar s90", alt: ''
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
70 71
      .cover-title
        John Smith
72

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
73 74 75 76 77 78 79 80 81
      .cover-desc
        = lorem

      .cover-controls
        = link_to '#', class: 'btn btn-gray' do
          = icon('pencil')
         
        = link_to '#', class: 'btn btn-gray' do
          = icon('rss')
82

83 84
  %h2#lists Lists

85 86
  .lead
    Simple list using
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
87
    %code .content-list
88

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
89 90 91 92 93 94 95 96
  .example
    %ul.content-list
      %li
        One item
      %li
        One item
      %li
        One item
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
97

98 99 100 101
  .lead
    List with avatar, title and description using
    %code .content-list

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115
  .example
    %ul.content-list
      %li
        = image_tag 'no_avatar.png', class: 'avatar s40'
        .title Title
        .description Description
      %li
        = image_tag 'no_avatar.png', class: 'avatar s40'
        .title Title
        .description Description
      %li
        = image_tag 'no_avatar.png', class: 'avatar s40'
        .title Title
        .description Description
116

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
117 118
  .lead
    List with hover effect
119
    %code .well-list
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
120
  .example
121 122 123 124 125 126 127 128
    %ul.well-list
      %li
        One item
      %li
        One item
      %li
        One item

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
129 130 131
  .lead
    List inside panel
  .example
132 133
    .card
      .card-header Your list
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
134 135 136 137 138 139 140
      %ul.well-list
        %li
          One item
        %li
          One item
        %li
          One item
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

  %h2#tables Tables

  .example
    %table.table
      %thead
        %tr
          %th #
          %th First Name
          %th Last Name
          %th Username
      %tbody
        %tr
          %td 1
          %td Mark
          %td Otto
          %td @mdo
        %tr
          %td 2
          %td Jacob
          %td Thornton
          %td @fat
        %tr
          %td 3
          %td Larry
          %td the Bird
          %td @twitter

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
169 170
  %h2#navs Navigation

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
171 172
  .lead
    Holder for top page navigation. Includes navigation, search field, sorting and button
173 174 175 176 177 178 179 180 181 182 183 184
    %code .top-area

  .example
    .top-area
      %ul.nav-links
        %li.active
          %a Open
        %li
          %a Closed
      .nav-controls
        = text_field_tag 'sample', nil, class: 'form-control'
        .dropdown
185
          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
186
            %span Sort by name
187
            = icon('chevron-down')
188 189
          %ul.dropdown-menu
            %li
190
              = link_to 'Sort by date', '#'
191

192
        = link_to 'New issue', '#', class: 'btn btn-new btn-inverted'
193

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
194 195
  .lead
    Only nav links without button and search
196
    %code .nav-links
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
197
  .example
198
    %ul.nav-links
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
199 200 201 202 203
      %li.active
        %a Open
      %li
        %a Closed

204 205 206 207

  %h2#buttons Buttons

  .example
208
    %button.btn.btn-secondary{ :type => "button" } Default
209 210 211 212 213 214 215
    %button.btn.btn-gray{ :type => "button" } Gray
    %button.btn.btn-primary{ :type => "button" } Primary
    %button.btn.btn-success{ :type => "button" } Success
    %button.btn.btn-info{ :type => "button" } Info
    %button.btn.btn-warning{ :type => "button" } Warning
    %button.btn.btn-danger{ :type => "button" } Danger
    %button.btn.btn-link{ :type => "button" } Link
216

Phil Hughes's avatar
Phil Hughes committed
217 218 219 220
  %h2#dropdowns Dropdowns

  .example
    .clearfix
221
      .dropdown.inline.float-left
222
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
223
          Dropdown
224
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
225 226
        %ul.dropdown-menu
          %li
227
            %a{ href: "#" }
228
              Dropdown option
229
      .dropdown.inline.float-right
230
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
231
          Dropdown
232
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
233 234
        %ul.dropdown-menu.dropdown-menu-align-right
          %li
235
            %a{ href: "#" }
236
              Dropdown option
Phil Hughes's avatar
Phil Hughes committed
237 238 239
  .example
    %div
      .dropdown.inline
240
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
241
          Dropdown
242
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
243 244
        %ul.dropdown-menu.dropdown-menu-selectable
          %li
245
            %a.is-active{ href: "#" }
246
              Dropdown option
Phil Hughes's avatar
Phil Hughes committed
247 248 249
  .example
    %div
      .dropdown.inline
250
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
251
          Dropdown
252
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
253 254
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
255
            %span Dropdown title
256
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
Phil Hughes's avatar
Phil Hughes committed
257 258
              = icon('times')
          .dropdown-input
259
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
Phil Hughes's avatar
Phil Hughes committed
260 261 262 263
            = icon('search')
          .dropdown-content
            %ul
              %li
264
                %a.is-active{ href: "#" }
265
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
266
              %li
267
                %a{ href: "#" }
268
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
269 270
              %li.divider
              %li
271
                %a{ href: "#" }
272
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
273
              %li
274
                %a{ href: "#" }
275
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
276
              %li
277
                %a{ href: "#" }
278
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
279
              %li
280
                %a{ href: "#" }
281
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
282
              %li
283
                %a{ href: "#" }
284
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
285 286 287 288
          .dropdown-footer
            %strong Tip:
            If an author is not a member of this project, you can still filter by his name while using the search field.
      .dropdown.inline
289
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
290
          Dropdown loading
291
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
292 293
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
          .dropdown-title
294
            %span Dropdown title
295
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
Phil Hughes's avatar
Phil Hughes committed
296 297
              = icon('times')
          .dropdown-input
298
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
Phil Hughes's avatar
Phil Hughes committed
299 300 301 302
            = icon('search')
          .dropdown-content
            %ul
              %li
303
                %a.is-active{ href: "#" }
304
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
305
              %li
306
                %a{ href: "#" }
307
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
308 309
              %li.divider
              %li
310
                %a{ href: "#" }
311
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
312
              %li
313
                %a{ href: "#" }
314
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
315
              %li
316
                %a{ href: "#" }
317
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
318
              %li
319
                %a{ href: "#" }
320
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
321
              %li
322
                %a{ href: "#" }
323
                  Dropdown option
Phil Hughes's avatar
Phil Hughes committed
324 325 326 327 328 329 330 331 332
          .dropdown-footer
            %strong Tip:
            If an author is not a member of this project, you can still filter by his name while using the search field.
          .dropdown-loading
            = icon('spinner spin')

  .example
    %div
      .dropdown.inline
333
        %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
334
          Dropdown user
335
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
336 337
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
          .dropdown-title
338
            %span Dropdown title
339
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
Phil Hughes's avatar
Phil Hughes committed
340 341
              = icon('times')
          .dropdown-input
342
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
Phil Hughes's avatar
Phil Hughes committed
343 344 345 346
            = icon('search')
          .dropdown-content
            %ul
              %li
347
                %a.dropdown-menu-user-link.is-active{ href: "#" }
348
                  = link_to_member_avatar(@user, size: 30)
Phil Hughes's avatar
Phil Hughes committed
349
                  %strong.dropdown-menu-user-full-name
350
                    = @user.name
Phil Hughes's avatar
Phil Hughes committed
351
                  .dropdown-menu-user-username
352
                    = @user.to_reference
Phil Hughes's avatar
Phil Hughes committed
353 354 355

  .example
    %div
Phil Hughes's avatar
Phil Hughes committed
356
      .dropdown.inline
357
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
358
          Dropdown page 2
359
          = icon('chevron-down')
Phil Hughes's avatar
Phil Hughes committed
360 361 362
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
          .dropdown-page-one
            .dropdown-title
363
              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
Phil Hughes's avatar
Phil Hughes committed
364
                = icon('arrow-left')
365
              %span Dropdown title
366
              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
Phil Hughes's avatar
Phil Hughes committed
367 368
                = icon('times')
            .dropdown-input
369
              %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
Phil Hughes's avatar
Phil Hughes committed
370 371 372 373
              = icon('search')
            .dropdown-content
              %ul
                %li
374
                  %a.dropdown-menu-user-link.is-active{ href: "#" }
375
                    = link_to_member_avatar(@user, size: 30)
Phil Hughes's avatar
Phil Hughes committed
376
                    %strong.dropdown-menu-user-full-name
377
                      = @user.name
Phil Hughes's avatar
Phil Hughes committed
378
                    .dropdown-menu-user-username
379
                      = @user.to_reference
Phil Hughes's avatar
Phil Hughes committed
380 381
          .dropdown-page-two
            .dropdown-title
382
              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
Phil Hughes's avatar
Phil Hughes committed
383 384
                = icon('arrow-left')
              %span Create label
385
              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
Phil Hughes's avatar
Phil Hughes committed
386 387
                = icon('times')
            .dropdown-input
388
              %input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
Phil Hughes's avatar
Phil Hughes committed
389 390 391 392
            .dropdown-content
              %button.btn.btn-primary
                Create

Phil Hughes's avatar
Phil Hughes committed
393 394 395
  .example
    %div
      .dropdown.inline
396
        %button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
Phil Hughes's avatar
Phil Hughes committed
397 398 399 400 401
          Projects
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %span Go to project
402
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
Phil Hughes's avatar
Phil Hughes committed
403 404
              = icon('times')
          .dropdown-input
405
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
Phil Hughes's avatar
Phil Hughes committed
406 407 408 409 410 411 412
            = icon('search')
          .dropdown-content
          .dropdown-loading
            = icon('spinner spin')

  .example
    %div
Phil Hughes's avatar
Phil Hughes committed
413
      = dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" })
Phil Hughes's avatar
Phil Hughes committed
414

415 416 417 418
  %h2#panels Panels

  .row
    .col-md-6
419 420 421
      .card.bg-success
        .card-header Success
        .card-body
422
          = lorem
423 424 425
      .card.bg-primary
        .card-header Primary
        .card-body
426
          = lorem
427 428 429
      .card.bg-info
        .card-header Info
        .card-body
430 431
          = lorem
    .col-md-6
432 433 434
      .card.bg-warning
        .card-header Warning
        .card-body
435
          = lorem
436 437 438
      .card.bg-danger
        .card-header Danger
        .card-body
439 440
          = lorem

441
  %h2#alerts Alerts
442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458

  .row
    .col-md-6
      .alert.alert-success
        = lorem
      .alert.alert-primary
        = lorem
      .alert.alert-info
        = lorem
    .col-md-6
      .alert.alert-warning
        = lorem
      .alert.alert-danger
        = lorem

  %h2#forms Forms

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
459 460
  .lead
    Horizontal form when label rendered inline with input
461 462
    %code form.horizontal-form

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
463 464 465
  .example
    %form.form-horizontal
      .form-group
466
        %label.col-sm-2.control-label{ :for => "inputEmail3" } Email
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
467
        .col-sm-10
468
          %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
469
      .form-group
470
        %label.col-sm-2.control-label{ :for => "inputPassword3" } Password
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
471
        .col-sm-10
472
          %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
473 474 475 476
      .form-group
        .col-sm-offset-2.col-sm-10
          .checkbox
            %label
477
              %input{ :type => "checkbox" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
478 479 480
              Remember me
      .form-group
        .col-sm-offset-2.col-sm-10
481
          %button.btn.btn-secondary{ :type => "submit" } Sign in
482

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
483 484
  .lead
    Form when label rendered above input
485 486
    %code form

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
487 488 489
  .example
    %form
      .form-group
490 491
        %label{ :for => "exampleInputEmail1" } Email address
        %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
492
      .form-group
493 494
        %label{ :for => "exampleInputPassword1" } Password
        %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
495 496
      .checkbox
        %label
497
          %input{ :type => "checkbox" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
498
          Remember me
499
      %button.btn.btn-secondary{ :type => "submit" } Sign in
500

501
  %h2#file File
502
  %h4
503 504
    %code .file-holder

505
  - blob = Snippet.new(content: "Wow\nSuch\nFile").blob
506 507
  .example
    .file-holder
508
      .js-file-title.file-title
509 510 511 512
        Awesome file
        .file-actions
          .btn-group
            %a.btn Edit
513
            %a.btn.btn-danger Remove
514 515 516
      .file-contenta.code
        = render 'shared/file_highlight', blob: blob

517
  %h2#markdown Markdown
518
  %h4
519 520 521 522 523 524 525 526 527 528
    %code .md or .wiki and others

  Markdown rendering has a bit different css and presented in next UI elements:

  %ul
    %li comment
    %li issue, merge request description
    %li wiki page
    %li help page

Clement Ho's avatar
Clement Ho committed
529
  You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.