BigW Consortium Gitlab

ui.html.haml 14.7 KB
Newer Older
1
- page_title "UI Development Kit", "Help"
2
- 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."
3 4
- content_for :page_specific_javascripts do
  = webpack_bundle_tag('ui_development_kit')
5 6 7 8 9 10 11 12 13 14 15 16 17 18

.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'
19 20
    %li
      = link_to 'Nav', '#nav'
21 22
    %li
      = link_to 'Buttons', '#buttons'
23 24
    %li
      = link_to 'Dropdowns', '#dropdowns'
25 26 27 28 29 30
    %li
      = link_to 'Panels', '#panels'
    %li
      = link_to 'Alerts', '#alerts'
    %li
      = link_to 'Forms', '#forms'
31 32
    %li
      = link_to 'Files', '#file'
33 34
    %li
      = link_to 'Markdown', '#markdown'
35 36 37

  %h2#blocks Blocks

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
  .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
53
    %code .row-content-block
54

55
  .example
56
    .row-content-block
57 58
      %h4 Normal block inside content
      = lorem
59

60
    .row-content-block.second-block
61 62
      %h4 Second block
      = lorem
63 64


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

75 76 77 78 79 80 81 82 83
      .cover-desc
        = lorem

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

85 86
  %h2#lists Lists

87 88
  .lead
    Simple list using
89
    %code .content-list
90

91 92 93 94 95 96 97 98
  .example
    %ul.content-list
      %li
        One item
      %li
        One item
      %li
        One item
99

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

104 105 106 107 108 109 110 111 112 113 114 115 116 117
  .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
118

119 120
  .lead
    List with hover effect
121
    %code .well-list
122
  .example
123 124 125 126 127 128 129 130
    %ul.well-list
      %li
        One item
      %li
        One item
      %li
        One item

131 132 133 134 135 136 137 138 139 140 141 142
  .lead
    List inside panel
  .example
    .panel.panel-default
      .panel-heading Your list
      %ul.well-list
        %li
          One item
        %li
          One item
        %li
          One item
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

  %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

171 172
  %h2#navs Navigation

173 174
  .lead
    Holder for top page navigation. Includes navigation, search field, sorting and button
175 176 177 178 179 180 181 182 183 184 185 186
    %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
187
          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
188
            %span Sort by name
189
            = icon('chevron-down')
190 191
          %ul.dropdown-menu
            %li
192
              = link_to 'Sort by date', '#'
193

194
        = link_to 'New issue', '#', class: 'btn btn-new btn-inverted'
195

196 197
  .lead
    Only nav links without button and search
198
    %code .nav-links
199
  .example
200
    %ul.nav-links
201 202 203 204 205
      %li.active
        %a Open
      %li
        %a Closed

206 207 208 209

  %h2#buttons Buttons

  .example
210 211 212 213 214 215 216 217
    %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
218

219 220 221 222 223
  %h2#dropdowns Dropdowns

  .example
    .clearfix
      .dropdown.inline.pull-left
224
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
225
          Dropdown
226
          = icon('chevron-down')
227 228
        %ul.dropdown-menu
          %li
229
            %a{ href: "#" }
230
              Dropdown option
231
      .dropdown.inline.pull-right
232
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
233
          Dropdown
234
          = icon('chevron-down')
235 236
        %ul.dropdown-menu.dropdown-menu-align-right
          %li
237
            %a{ href: "#" }
238
              Dropdown option
239 240 241
  .example
    %div
      .dropdown.inline
242
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
243
          Dropdown
244
          = icon('chevron-down')
245 246
        %ul.dropdown-menu.dropdown-menu-selectable
          %li
247
            %a.is-active{ href: "#" }
248
              Dropdown option
249 250 251
  .example
    %div
      .dropdown.inline
252
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
253
          Dropdown
254
          = icon('chevron-down')
255 256
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
257
            %span Dropdown title
258
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
259 260
              = icon('times')
          .dropdown-input
261
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
262 263 264 265
            = icon('search')
          .dropdown-content
            %ul
              %li
266
                %a.is-active{ href: "#" }
267
                  Dropdown option
268
              %li
269
                %a{ href: "#" }
270
                  Dropdown option
271 272
              %li.divider
              %li
273
                %a{ href: "#" }
274
                  Dropdown option
275
              %li
276
                %a{ href: "#" }
277
                  Dropdown option
278
              %li
279
                %a{ href: "#" }
280
                  Dropdown option
281
              %li
282
                %a{ href: "#" }
283
                  Dropdown option
284
              %li
285
                %a{ href: "#" }
286
                  Dropdown option
287 288 289 290
          .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
291
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
292
          Dropdown loading
293
          = icon('chevron-down')
294 295
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
          .dropdown-title
296
            %span Dropdown title
297
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
298 299
              = icon('times')
          .dropdown-input
300
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
301 302 303 304
            = icon('search')
          .dropdown-content
            %ul
              %li
305
                %a.is-active{ href: "#" }
306
                  Dropdown option
307
              %li
308
                %a{ href: "#" }
309
                  Dropdown option
310 311
              %li.divider
              %li
312
                %a{ href: "#" }
313
                  Dropdown option
314
              %li
315
                %a{ href: "#" }
316
                  Dropdown option
317
              %li
318
                %a{ href: "#" }
319
                  Dropdown option
320
              %li
321
                %a{ href: "#" }
322
                  Dropdown option
323
              %li
324
                %a{ href: "#" }
325
                  Dropdown option
326 327 328 329 330 331 332 333 334
          .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
335
        %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
336
          Dropdown user
337
          = icon('chevron-down')
338 339
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
          .dropdown-title
340
            %span Dropdown title
341
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
342 343
              = icon('times')
          .dropdown-input
344
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
345 346 347 348
            = icon('search')
          .dropdown-content
            %ul
              %li
349
                %a.dropdown-menu-user-link.is-active{ href: "#" }
350
                  = link_to_member_avatar(@user, size: 30)
351
                  %strong.dropdown-menu-user-full-name
352
                    = @user.name
353
                  .dropdown-menu-user-username
354
                    = @user.to_reference
355 356 357

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

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

  .example
    %div
Phil Hughes committed
415
      = dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" })
Phil Hughes committed
416

417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442
  %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

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

  .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

461 462
  .lead
    Horizontal form when label rendered inline with input
463 464
    %code form.horizontal-form

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

485 486
  .lead
    Form when label rendered above input
487 488
    %code form

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

503
  %h2#file File
504
  %h4
505 506
    %code .file-holder

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

519
  %h2#markdown Markdown
520
  %h4
521 522 523 524 525 526 527 528 529 530
    %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

531
  You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.