BigW Consortium Gitlab

ui.html.haml 15 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 192 193
          %ul.dropdown-menu
            %li
              %a Sort by date

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

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 208

  %h2#buttons Buttons

  .example
    %button.btn.btn-default{:type => "button"} Default
209
    %button.btn.btn-gray{:type => "button"} Gray
210 211 212 213 214 215 216
    %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

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 227 228 229
        %ul.dropdown-menu
          %li
            %a{href: "#"}
              Dropdown Option
      .dropdown.inline.pull-right
230
        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
231
          Dropdown
232
          = icon('chevron-down')
233 234 235 236 237 238 239
        %ul.dropdown-menu.dropdown-menu-align-right
          %li
            %a{href: "#"}
              Dropdown Option
  .example
    %div
      .dropdown.inline
240
        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
241
          Dropdown
242
          = icon('chevron-down')
243 244 245 246 247 248 249
        %ul.dropdown-menu.dropdown-menu-selectable
          %li
            %a.is-active{href: "#"}
              Dropdown Option
  .example
    %div
      .dropdown.inline
250
        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
251
          Dropdown
252
          = icon('chevron-down')
253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %span Dropdown Title
            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
            = icon('search')
          .dropdown-content
            %ul
              %li
                %a.is-active{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li.divider
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
          .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 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
          .dropdown-title
            %span Dropdown Title
            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
            = icon('search')
          .dropdown-content
            %ul
              %li
                %a.is-active{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li.divider
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
              %li
                %a{href: "#"}
                  Dropdown Option
          .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 338 339 340 341 342 343 344 345 346 347
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
          .dropdown-title
            %span Dropdown Title
            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
            = icon('search')
          .dropdown-content
            %ul
              %li
                %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 363 364 365 366 367 368 369 370 371 372 373 374
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
          .dropdown-page-one
            .dropdown-title
              %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
                = icon('arrow-left')
              %span Dropdown Title
              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
                = icon('times')
            .dropdown-input
              %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
              = icon('search')
            .dropdown-content
              %ul
                %li
                  %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 382 383 384 385 386 387 388 389 390 391 392
          .dropdown-page-two
            .dropdown-title
              %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
                = icon('arrow-left')
              %span Create label
              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
                = icon('times')
            .dropdown-input
              %input.dropdown-input-field{type: "search", placeholder: "Name new label"}
            .dropdown-content
              %button.btn.btn-primary
                Create

Phil Hughes committed
393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411
  .example
    %div
      .dropdown.inline
        %button#js-project-dropdown.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
          Projects
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %span Go to project
            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
            = icon('search')
          .dropdown-content
          .dropdown-loading
            = icon('spinner spin')
    :javascript
      $('#js-project-dropdown').glDropdown({
Phil Hughes committed
412 413
        data: function (term, callback) {
          Api.projects(term, "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 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481
  %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

  %h2#alert Alerts

  .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 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504
  .example
    %form.form-horizontal
      .form-group
        %label.col-sm-2.control-label{:for => "inputEmail3"} Email
        .col-sm-10
          %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
      .form-group
        %label.col-sm-2.control-label{:for => "inputPassword3"} Password
        .col-sm-10
          %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
      .form-group
        .col-sm-offset-2.col-sm-10
          .checkbox
            %label
              %input{:type => "checkbox"}/
              Remember me
      .form-group
        .col-sm-offset-2.col-sm-10
          %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 513 514 515 516 517 518 519 520 521 522
  .example
    %form
      .form-group
        %label{:for => "exampleInputEmail1"} Email address
        %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
      .form-group
        %label{:for => "exampleInputPassword1"} Password
        %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
      .checkbox
        %label
          %input{:type => "checkbox"}/
          Remember me
      %button.btn.btn-default{:type => "submit"} Sign in
523

524
  %h2#file File
525
  %h4
526 527 528 529 530 531 532 533 534 535
    %code .file-holder

  - blob = Snippet.new(content: "Wow\nSuch\nFile")
  .example
    .file-holder
      .file-title
        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 552
    %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

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