BigW Consortium Gitlab

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'
17 18
    %li
      = link_to 'Nav', '#nav'
19 20
    %li
      = link_to 'Buttons', '#buttons'
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

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
51
    %code .row-content-block
52

53
  .example
54
    .row-content-block
55 56
      %h4 Normal block inside content
      = lorem
57

58
    .row-content-block.second-block
59 60
      %h4 Second block
      = lorem
61 62


63 64
  .lead
    Cover block for profile page with avatar, name and description
65
    %code .cover-block
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

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
87
    %code .content-list
88

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

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

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

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

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

169 170
  %h2#navs Navigation

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

194 195
  .lead
    Only nav links without button and search
196
    %code .nav-links
197
  .example
198
    %ul.nav-links
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

217 218 219 220 221
  %h2#dropdowns Dropdowns

  .example
    .clearfix
      .dropdown.inline.pull-left
222
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
223
          Dropdown
224
          = icon('chevron-down')
225 226
        %ul.dropdown-menu
          %li
227
            %a{ href: "#" }
228
              Dropdown option
229
      .dropdown.inline.pull-right
230
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
231
          Dropdown
232
          = icon('chevron-down')
233 234
        %ul.dropdown-menu.dropdown-menu-align-right
          %li
235
            %a{ href: "#" }
236
              Dropdown option
237 238 239
  .example
    %div
      .dropdown.inline
240
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
241
          Dropdown
242
          = icon('chevron-down')
243 244
        %ul.dropdown-menu.dropdown-menu-selectable
          %li
245
            %a.is-active{ href: "#" }
246
              Dropdown option
247 248 249
  .example
    %div
      .dropdown.inline
250
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
251
          Dropdown
252
          = icon('chevron-down')
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" } }
257 258
              = icon('times')
          .dropdown-input
259
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
260 261 262 263
            = icon('search')
          .dropdown-content
            %ul
              %li
264
                %a.is-active{ href: "#" }
265
                  Dropdown option
266
              %li
267
                %a{ href: "#" }
268
                  Dropdown option
269 270
              %li.divider
              %li
271
                %a{ href: "#" }
272
                  Dropdown option
273
              %li
274
                %a{ href: "#" }
275
                  Dropdown option
276
              %li
277
                %a{ href: "#" }
278
                  Dropdown option
279
              %li
280
                %a{ href: "#" }
281
                  Dropdown option
282
              %li
283
                %a{ href: "#" }
284
                  Dropdown option
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' } }
290
          Dropdown loading
291
          = icon('chevron-down')
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" } }
296 297
              = icon('times')
          .dropdown-input
298
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
299 300 301 302
            = icon('search')
          .dropdown-content
            %ul
              %li
303
                %a.is-active{ href: "#" }
304
                  Dropdown option
305
              %li
306
                %a{ href: "#" }
307
                  Dropdown option
308 309
              %li.divider
              %li
310
                %a{ href: "#" }
311
                  Dropdown option
312
              %li
313
                %a{ href: "#" }
314
                  Dropdown option
315
              %li
316
                %a{ href: "#" }
317
                  Dropdown option
318
              %li
319
                %a{ href: "#" }
320
                  Dropdown option
321
              %li
322
                %a{ href: "#" }
323
                  Dropdown option
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' } }
334
          Dropdown user
335
          = icon('chevron-down')
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" } }
340 341
              = icon('times')
          .dropdown-input
342
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
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)
349
                  %strong.dropdown-menu-user-full-name
350
                    = @user.name
351
                  .dropdown-menu-user-username
352
                    = @user.to_reference
353 354 355

  .example
    %div
Phil Hughes committed
356
      .dropdown.inline
357
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
358
          Dropdown page 2
359
          = icon('chevron-down')
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" } }
364
                = icon('arrow-left')
365
              %span Dropdown title
366
              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
367 368
                = icon('times')
            .dropdown-input
369
              %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
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)
376
                    %strong.dropdown-menu-user-full-name
377
                      = @user.name
378
                    .dropdown-menu-user-username
379
                      = @user.to_reference
380 381
          .dropdown-page-two
            .dropdown-title
382
              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
383 384
                = icon('arrow-left')
              %span Create label
385
              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
386 387
                = icon('times')
            .dropdown-input
388
              %input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
389 390 391 392
            .dropdown-content
              %button.btn.btn-primary
                Create

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 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 committed
403 404
              = icon('times')
          .dropdown-input
405
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
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 committed
412
        data: function (term, callback) {
413
          Api.projects(term, { order_by: 'last_activity_at' }, function (data) {
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 committed
436
      = dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" })
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

482 483
  .lead
    Horizontal form when label rendered inline with input
484 485
    %code form.horizontal-form

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

506 507
  .lead
    Form when label rendered above input
508 509
    %code form

510 511 512
  .example
    %form
      .form-group
513 514
        %label{ :for => "exampleInputEmail1" } Email address
        %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
515
      .form-group
516 517
        %label{ :for => "exampleInputPassword1" } Password
        %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
518 519
      .checkbox
        %label
520
          %input{ :type => "checkbox" }/
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

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