Skip to content
This repository
Browse code

Adding additional toolbar

  • Loading branch information...
commit d6687febac14807ac42dc23b4efb7920975b09af 1 parent f5eebb8
Jake Archibald authored
24 www/assets/7/script/base.js
@@ -14,16 +14,15 @@
14 14 return;
15 15 }
16 16
17   - var $canvasContainer = $('.canvas-inner'),
18   - $codeContainer = $('.code-container'),
19   - $pageContainer = $('.container'),
20   - $toolbarContainer = $('.toolbar-container'),
21   - $tutorialLink = $('.tutorial'),
22   - spriteCanvas = new spriteCow.SpriteCanvas(),
23   - spriteCanvasView = new spriteCow.SpriteCanvasView( spriteCanvas, $canvasContainer ),
24   - imgInput = new spriteCow.ImgInput( $canvasContainer, $canvasContainer, $tutorialLink.attr('href') ),
25   - cssOutput = new spriteCow.CssOutput( $codeContainer ),
26   - toolbarTop = new spriteCow.Toolbar( $toolbarContainer );
  17 + var $canvasContainer = $('.canvas-inner');
  18 + var $codeContainer = $('.code-container');
  19 + var $tutorialLink = $('.tutorial');
  20 + var spriteCanvas = new spriteCow.SpriteCanvas();
  21 + var spriteCanvasView = new spriteCow.SpriteCanvasView( spriteCanvas, $canvasContainer );
  22 + var imgInput = new spriteCow.ImgInput( $canvasContainer, $canvasContainer, $tutorialLink.attr('href') );
  23 + var cssOutput = new spriteCow.CssOutput( $codeContainer );
  24 + var toolbarTop = new spriteCow.Toolbar('.toolbar-container');
  25 + var toolbarBottom = new spriteCow.Toolbar('.toolbar-bottom-container');
27 26
28 27 toolbarTop.
29 28 addItem('open-img', 'Open').
@@ -35,6 +34,11 @@
35 34 ).
36 35 addItem('invert-bg', 'Toggle Dark Background', {noLabel: true});
37 36
  37 + toolbarTop.$container.addClass('top');
  38 +
  39 + //toolbarBottom.
  40 + // addItem('percent', 'Percent');
  41 +
38 42 spriteCow.pageLayout.init();
39 43
40 44 // listeners
5 www/assets/7/style/_components.scss
@@ -215,9 +215,12 @@
215 215 border-width: 1px 0;
216 216 border-color: #e2e2e2 #000 #888;
217 217 color: #333;
218   - border-radius: 5px 5px 0 0;
219 218 @include linear-gradient((top, #d0d0d0, #a7a7a7));
220 219
  220 + &.top {
  221 + border-radius: 5px 5px 0 0;
  222 + }
  223 +
221 224 .intro & {
222 225 height: 0;
223 226 padding-top: 0;
3  www/assets/7/style/_structure.scss
@@ -56,7 +56,8 @@
56 56 }
57 57 }
58 58 // Toolbar
59   - .toolbar-container {
  59 + .toolbar-container,
  60 + .toolbar-bottom-container {
60 61 display: table-row;
61 62 position: relative;
62 63 @include user-select(none);
73 www/assets/7/style/all.css
@@ -178,8 +178,9 @@ body {
178 178 .intro .further-detail {
179 179 height: 0; }
180 180
181   -/* line 59, _structure.scss */
182   -.toolbar-container {
  181 +/* line 60, _structure.scss */
  182 +.toolbar-container,
  183 +.toolbar-bottom-container {
183 184 display: table-row;
184 185 position: relative;
185 186 -webkit-user-select: none;
@@ -422,20 +423,22 @@ body {
422 423 border-width: 1px 0;
423 424 border-color: #e2e2e2 #000 #888;
424 425 color: #333;
425   - border-radius: 5px 5px 0 0;
426 426 background: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7);
427 427 background: -moz-linear-gradient(top, #d0d0d0, #a7a7a7);
428 428 background: -ms-linear-gradient(top, #d0d0d0, #a7a7a7);
429 429 background: -o-linear-gradient(top, #d0d0d0, #a7a7a7);
430 430 background: linear-gradient(top, #d0d0d0, #a7a7a7); }
431   - /* line 221, _components.scss */
  431 + /* line 220, _components.scss */
  432 + .toolbar.top {
  433 + border-radius: 5px 5px 0 0; }
  434 + /* line 224, _components.scss */
432 435 .intro .toolbar {
433 436 height: 0;
434 437 padding-top: 0;
435 438 padding-bottom: 0;
436 439 border-top-width: 0;
437 440 border-bottom-width: 0; }
438   - /* line 229, _components.scss */
  441 + /* line 232, _components.scss */
439 442 .toolbar [role=button] {
440 443 float: left;
441 444 margin: 0 5px 5px 0;
@@ -449,7 +452,7 @@ body {
449 452 background: -ms-linear-gradient(top, #fefefe, #b8b8b8);
450 453 background: -o-linear-gradient(top, #fefefe, #b8b8b8);
451 454 background: linear-gradient(top, #fefefe, #b8b8b8); }
452   - /* line 240, _components.scss */
  455 + /* line 243, _components.scss */
453 456 .toolbar [role=button]::before {
454 457 content: '';
455 458 width: 16px;
@@ -458,66 +461,66 @@ body {
458 461 top: 4px;
459 462 left: 5px;
460 463 background: url("imgs/sprites1.png") no-repeat; }
461   - /* line 249, _components.scss */
  464 + /* line 252, _components.scss */
462 465 .toolbar [role=button].active {
463 466 background: #707070;
464 467 box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6);
465 468 color: #fff; }
466   - /* line 254, _components.scss */
  469 + /* line 257, _components.scss */
467 470 .toolbar [role=button].no-label {
468 471 width: 26px;
469 472 padding: 4px 0;
470 473 text-indent: -5000px; }
471   - /* line 259, _components.scss */
  474 + /* line 262, _components.scss */
472 475 .toolbar [role=button].select-sprite::before {
473 476 background-position: -4px -2px; }
474   - /* line 262, _components.scss */
  477 + /* line 265, _components.scss */
475 478 .toolbar [role=button].select-bg::before {
476 479 background-position: -50px -3px; }
477   - /* line 265, _components.scss */
  480 + /* line 268, _components.scss */
478 481 .toolbar [role=button].open-img::before {
479 482 background-position: -26px -2px; }
480   - /* line 268, _components.scss */
  483 + /* line 271, _components.scss */
481 484 .toolbar [role=button].invert-bg::before {
482 485 background-position: -99px -2px; }
483   - /* line 271, _components.scss */
  486 + /* line 274, _components.scss */
484 487 .toolbar [role=button].reload-img::before {
485 488 background-position: -75px -2px; }
486   - /* line 275, _components.scss */
  489 + /* line 278, _components.scss */
487 490 .toolbar .feedback {
488 491 float: left;
489 492 padding: 5px;
490 493 color: #555;
491 494 opacity: 0; }
492 495
493   -/* line 283, _components.scss */
  496 +/* line 286, _components.scss */
494 497 .toolbar-group [role=button] {
495 498 margin-right: 0;
496 499 border-radius: 0;
497 500 border-left-width: 0; }
498   - /* line 288, _components.scss */
  501 + /* line 291, _components.scss */
499 502 .toolbar-group [role=button]:first-child {
500 503 border-left-width: 1px;
501 504 border-radius: 4px 0 0 4px; }
502   - /* line 292, _components.scss */
  505 + /* line 295, _components.scss */
503 506 .toolbar-group [role=button]:last-child {
504 507 margin-right: 5px;
505 508 border-radius: 0 4px 4px 0; }
506 509
507   -/* line 298, _components.scss */
  510 +/* line 301, _components.scss */
508 511 .main-footer {
509 512 overflow: hidden;
510 513 background: rgba(0, 0, 0, 0.23); }
511   - /* line 302, _components.scss */
  514 + /* line 305, _components.scss */
512 515 .main-footer p {
513 516 float: right;
514 517 padding: 15px 29px 0;
515 518 margin: 0;
516 519 white-space: nowrap; }
517   - /* line 308, _components.scss */
  520 + /* line 311, _components.scss */
518 521 .intro .main-footer p {
519 522 padding: 12px 16px 0; }
520   - /* line 312, _components.scss */
  523 + /* line 315, _components.scss */
521 524 .main-footer .the-team-logo {
522 525 background: url("imgs/sprites1.png") no-repeat -4px -29px;
523 526 width: 88px;
@@ -526,17 +529,17 @@ body {
526 529 text-indent: -5000px;
527 530 vertical-align: top;
528 531 margin: -1px 0 0 4px; }
529   - /* line 321, _components.scss */
  532 + /* line 324, _components.scss */
530 533 .main-footer ul {
531 534 float: left;
532 535 padding: 16px 30px; }
533   - /* line 325, _components.scss */
  536 + /* line 328, _components.scss */
534 537 .intro .main-footer ul {
535 538 padding: 13px 16px; }
536   - /* line 329, _components.scss */
  539 + /* line 332, _components.scss */
537 540 .main-footer li {
538 541 display: inline; }
539   - /* line 333, _components.scss */
  542 + /* line 336, _components.scss */
540 543 .main-footer li a:link, .main-footer li a:visited {
541 544 font-weight: normal;
542 545 color: #fff;
@@ -544,53 +547,53 @@ body {
544 547 padding: 0 10px 0 0;
545 548 margin: 0 10px 0 0;
546 549 border-right: 1px solid #fff; }
547   - /* line 342, _components.scss */
  550 + /* line 345, _components.scss */
548 551 .main-footer li:last-child a:link, .main-footer li:last-child a:visited {
549 552 padding: 0;
550 553 margin: 0;
551 554 border: none; }
552 555
553   -/* line 350, _components.scss */
  556 +/* line 353, _components.scss */
554 557 .feature-test {
555 558 display: none;
556 559 width: 800px;
557 560 margin: 0 auto;
558 561 text-align: center; }
559   - /* line 356, _components.scss */
  562 + /* line 359, _components.scss */
560 563 .not-supported .feature-test {
561 564 display: block; }
562   - /* line 359, _components.scss */
  565 + /* line 362, _components.scss */
563 566 .feature-test h1 {
564 567 font: normal 2.5em sans-serif;
565 568 margin: 0;
566 569 padding: 40px 0; }
567   - /* line 364, _components.scss */
  570 + /* line 367, _components.scss */
568 571 .feature-test ul {
569 572 display: inline-block;
570 573 *display: inline;
571 574 zoom: 1; }
572   - /* line 369, _components.scss */
  575 + /* line 372, _components.scss */
573 576 .feature-test li {
574 577 margin: 10px auto;
575 578 font-size: 1.1em;
576 579 overflow: hidden;
577 580 text-align: left; }
578   - /* line 375, _components.scss */
  581 + /* line 378, _components.scss */
579 582 .feature-test p {
580 583 width: 600px;
581 584 margin: 0 auto 20px;
582 585 font-size: 1.1em;
583 586 text-align: left; }
584   - /* line 382, _components.scss */
  587 + /* line 385, _components.scss */
585 588 .feature-test .pass, .feature-test .fail {
586 589 float: left;
587 590 width: 50px;
588 591 font-weight: bold;
589 592 color: #5f5; }
590   - /* line 388, _components.scss */
  593 + /* line 391, _components.scss */
591 594 .feature-test .fail {
592 595 color: #f55; }
593 596
594   -/* line 393, _components.scss */
  597 +/* line 396, _components.scss */
595 598 .intro-copy {
596 599 display: none; }
2  www/unmin.html
@@ -20,6 +20,8 @@ <h1 class="cow-logo">Sprite Cow</h1>
20 20 <div class="canvas-inner"></div>
21 21 </div>
22 22 </div>
  23 + <div class="toolbar-bottom-container">
  24 + </div>
23 25 <div class="further-detail">
24 26 <div class="code-container"></div>
25 27 <div class="intro-copy">

0 comments on commit d6687fe

Please sign in to comment.
Something went wrong with that request. Please try again.