ui.html.haml 15.2 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 69 70 71
  .example
    .cover-block
      .avatar-holder
        = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
      .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 132 133 134 135 136 137 138 139 140
  .lead
    List inside panel
  .example
    .panel.panel-default
      .panel-heading Your list
      %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 190 191
          %ul.dropdown-menu
            %li
              %a Sort by date

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 209 210 211 212 213 214 215
    %button.btn.btn-default{ :type => "button" } Default
    %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 221
  %h2#dropdowns Dropdowns

  .example
    .clearfix
      .dropdown.inline.pull-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
Phil Hughes's avatar
Phil Hughes committed
229
      .dropdown.inline.pull-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 255
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %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 294
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
          .dropdown-title
            %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 338
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
          .dropdown-title
            %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 365
                = icon('arrow-left')
              %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
            = icon('search')
          .dropdown-content
          .dropdown-loading
            = icon('spinner spin')
    :javascript
      $('#js-project-dropdown').glDropdown({
Phil Hughes's avatar
Phil Hughes committed
412
        data: function (term, callback) {
413
          Api.projects(term, { order_by: 'last_activity_at' }, function (data) {
Phil Hughes's avatar
Phil Hughes committed
414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435
            callback(data);
          });
        },
        text: function (project) {
          return project.name_with_namespace || project.name;
        },
        selectable: true,
        fieldName: "author_id",
        filterable: true,
        search: {
          fields: ['name_with_namespace']
        },
        id: function (data) {
          return data.id;
        },
        isSelected: function (data) {
          return data.id === 2;
        }
      })

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

438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463
  %h2#panels Panels

  .row
    .col-md-6
      .panel.panel-success
        .panel-heading Success
        .panel-body
          = lorem
      .panel.panel-primary
        .panel-heading Primary
        .panel-body
          = lorem
      .panel.panel-info
        .panel-heading Info
        .panel-body
          = lorem
    .col-md-6
      .panel.panel-warning
        .panel-heading Warning
        .panel-body
          = lorem
      .panel.panel-danger
        .panel-heading Danger
        .panel-body
          = lorem

464
  %h2#alerts Alerts
465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481

  .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
482 483
  .lead
    Horizontal form when label rendered inline with input
484 485
    %code form.horizontal-form

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
486 487 488
  .example
    %form.form-horizontal
      .form-group
489
        %label.col-sm-2.control-label{ :for => "inputEmail3" } Email
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
490
        .col-sm-10
491
          %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
492
      .form-group
493
        %label.col-sm-2.control-label{ :for => "inputPassword3" } Password
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
494
        .col-sm-10
495
          %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
496 497 498 499
      .form-group
        .col-sm-offset-2.col-sm-10
          .checkbox
            %label
500
              %input{ :type => "checkbox" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
501 502 503
              Remember me
      .form-group
        .col-sm-offset-2.col-sm-10
504
          %button.btn.btn-default{ :type => "submit" } Sign in
505

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
506 507
  .lead
    Form when label rendered above input
508 509
    %code form

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
510 511 512
  .example
    %form
      .form-group
513 514
        %label{ :for => "exampleInputEmail1" } Email address
        %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
515
      .form-group
516 517
        %label{ :for => "exampleInputPassword1" } Password
        %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
518 519
      .checkbox
        %label
520
          %input{ :type => "checkbox" }/
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
521
          Remember me
522
      %button.btn.btn-default{ :type => "submit" } Sign in
523

524
  %h2#file File
525
  %h4
526 527 528 529 530
    %code .file-holder

  - blob = Snippet.new(content: "Wow\nSuch\nFile")
  .example
    .file-holder
531
      .js-file-title.file-title
532 533 534 535
        Awesome file
        .file-actions
          .btn-group
            %a.btn Edit
536
            %a.btn.btn-danger Remove
537 538 539
      .file-contenta.code
        = render 'shared/file_highlight', blob: blob

540
  %h2#markdown Markdown
541
  %h4
542 543 544 545 546 547 548 549 550 551
    %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
552
  You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.