Chromium Code Reviews Chromium Code Reviews
Issue 10010009:
Calculator App for ChromeOS with fixes for templates/CSS to support this application. (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart| OLD | NEW |
|---|---|
| (Empty) | |
| 1 /* Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | |
| 2 * for details. All rights reserved. Use of this source code is governed by a | |
| 3 * BSD-style license that can be found in the LICENSE file. | |
| 4 */ | |
| 5 | |
| 6 /* Flat UI Calculator key theme. */ | |
| 7 template FlatPadUI() { | |
| 8 css { | |
| 9 .calc-pad { | |
| 10 background-color: #222; | |
| 11 width: 241px; | |
| 12 height: 168px; | |
| 13 padding-top: 4px; | |
| 14 padding-bottom: 4px; | |
| 15 cursor: default; | |
| 16 } | |
| 17 | |
| 18 .calc-row { | |
| 19 color:white; | |
| 20 font-size: 25pt; | |
| 21 font-family: arial; | |
| 22 font-weight: bold; | |
| 23 padding-top: 2px; | |
| 24 padding-left: 12px; | |
| 25 } | |
| 26 | |
| 27 .calc-num { | |
| 28 padding-left: 8px; | |
| 29 padding-right: 8px; | |
| 30 margin-right: 11px; | |
| 31 cursor: pointer; | |
| 32 } | |
| 33 | |
| 34 .calc-period { | |
| 35 padding-left: 7px; | |
| 36 padding-right: 7px; | |
| 37 margin-right: 11px; | |
| 38 cursor: pointer; | |
| 39 font-size: 24pt; | |
| 40 } | |
| 41 | |
| 42 .calc-op-button { | |
| 43 padding-left: 12px; | |
| 44 padding-right: 19px; | |
| 45 color: gray; | |
| 46 font-size: 20pt; | |
| 47 vertical-align: middle; | |
| 48 } | |
| 49 | |
| 50 .calc-num:hover { | |
| 51 width: 100px; | |
| 52 height: 100px; | |
| 53 background: lightgray; | |
| 54 -moz-border-radius: 50px; | |
| 55 -webkit-border-radius: 50px; | |
| 56 border-radius: 50px; | |
| 57 color: black; | |
| 58 } | |
| 59 | |
| 60 .calc-num-hover { | |
| 61 width: 100px; | |
| 62 height: 100px; | |
| 63 background: lightgray; | |
| 64 -moz-border-radius: 50px; | |
| 65 -webkit-border-radius: 50px; | |
| 66 border-radius: 50px; | |
| 67 color: black; | |
| 68 } | |
| 69 | |
| 70 .calc-num:active { | |
| 71 width: 100px; | |
| 72 height: 100px; | |
| 73 background: lightslategrey; | |
| 74 -moz-border-radius: 50px; | |
| 75 -webkit-border-radius: 50px; | |
| 76 border-radius: 50px; | |
| 77 color: white; | |
| 78 } | |
| 79 | |
| 80 .calc-num-active { | |
| 81 width: 100px; | |
| 82 height: 100px; | |
| 83 background: lightslategrey; | |
| 84 -moz-border-radius: 50px; | |
| 85 -webkit-border-radius: 50px; | |
| 86 border-radius: 50px; | |
| 87 color: white; | |
| 88 } | |
| 89 | |
| 90 .calc-period:hover { | |
| 91 width: 100px; | |
| 92 height: 100px; | |
| 93 background: lightgray; | |
| 94 -moz-border-radius: 50px; | |
| 95 -webkit-border-radius: 50px; | |
| 96 border-radius: 50px; | |
| 97 color: black; | |
| 98 } | |
| 99 | |
| 100 .calc-period-hover { | |
| 101 width: 100px; | |
| 102 height: 100px; | |
| 103 background: lightgray; | |
| 104 -moz-border-radius: 50px; | |
| 105 -webkit-border-radius: 50px; | |
| 106 border-radius: 50px; | |
| 107 color: black; | |
| 108 } | |
| 109 | |
| 110 .calc-period:active { | |
| 111 width: 100px; | |
| 112 height: 100px; | |
| 113 background: lightslategrey; | |
| 114 -moz-border-radius: 50px; | |
| 115 -webkit-border-radius: 50px; | |
| 116 border-radius: 50px; | |
| 117 color: white; | |
| 118 } | |
| 119 | |
| 120 .calc-period-active { | |
| 121 width: 100px; | |
| 122 height: 100px; | |
| 123 background: lightslategrey; | |
| 124 -moz-border-radius: 50px; | |
| 125 -webkit-border-radius: 50px; | |
| 126 border-radius: 50px; | |
| 127 color: white; | |
| 128 } | |
| 129 | |
| 130 .calc-period-error { | |
| 131 width: 100px; | |
| 132 height: 100px; | |
| 133 background: IndianRed; | |
| 134 -moz-border-radius: 50px; | |
| 135 -webkit-border-radius: 50px; | |
| 136 border-radius: 50px; | |
| 137 color: firebrick; | |
| 138 } | |
| 139 | |
| 140 .op-plus-base { | |
| 141 width: 35px; | |
| 142 height: 35px; | |
| 143 position: absolute; | |
| 144 top: 185px; | |
| 145 left: 158px; | |
| 146 } | |
| 147 | |
| 148 .op-plus { | |
| 149 background-image: url(plus.png); | |
| 150 background-repeat: no-repeat; | |
| 151 } | |
| 152 | |
| 153 .op-plus:hover { | |
| 154 background-image: url(plus_black.png); | |
| 155 background-repeat: no-repeat; | |
| 156 background-color: lightgray; | |
| 157 -moz-border-radius: 50px; | |
| 158 -webkit-border-radius: 20px; | |
| 159 border-radius: 20px; | |
| 160 background-position: center; | |
| 161 } | |
| 162 | |
| 163 .op-plus-hover { | |
| 164 background-image: url(plus_black.png); | |
| 165 background-repeat: no-repeat; | |
| 166 background-color: lightgray; | |
| 167 -moz-border-radius: 50px; | |
| 168 -webkit-border-radius: 20px; | |
| 169 border-radius: 20px; | |
| 170 background-position: center; | |
| 171 } | |
| 172 | |
| 173 .op-plus:active { | |
| 174 background-image: url(plus_white.png); | |
| 175 background-repeat: no-repeat; | |
| 176 background-color: lightslategrey; | |
| 177 -moz-border-radius: 50px; | |
| 178 -webkit-border-radius: 20px; | |
| 179 border-radius: 20px; | |
| 180 background-position: center; | |
| 181 } | |
| 182 | |
| 183 .op-plus-active { | |
| 184 background-image: url(plus_white.png); | |
| 185 background-repeat: no-repeat; | |
| 186 background-color: lightslategrey; | |
| 187 -moz-border-radius: 50px; | |
| 188 -webkit-border-radius: 20px; | |
| 189 border-radius: 20px; | |
| 190 background-position: center; | |
| 191 } | |
| 192 | |
| 193 .op-minus-base { | |
| 194 width: 35px; | |
| 195 height: 35px; | |
| 196 position: absolute; | |
| 197 top: 185px; | |
| 198 left: 198px; | |
| 199 } | |
| 200 | |
| 201 .op-minus { | |
| 202 background-image: url(minus.png); | |
| 203 background-repeat: no-repeat; | |
| 204 } | |
| 205 | |
| 206 .op-minus:hover { | |
| 207 background-image: url(minus_black.png); | |
| 208 background-repeat: no-repeat; | |
| 209 background-color: lightgray; | |
| 210 -moz-border-radius: 50px; | |
| 211 -webkit-border-radius: 20px; | |
| 212 border-radius: 20px; | |
| 213 background-position: center; | |
| 214 } | |
| 215 | |
| 216 .op-minus-hover { | |
| 217 background-image: url(minus_black.png); | |
| 218 background-repeat: no-repeat; | |
| 219 background-color: lightgray; | |
| 220 -moz-border-radius: 50px; | |
| 221 -webkit-border-radius: 20px; | |
| 222 border-radius: 20px; | |
| 223 background-position: center; | |
| 224 } | |
| 225 | |
| 226 .op-minus:active { | |
| 227 background-image: url(minus_white.png); | |
| 228 background-repeat: no-repeat; | |
| 229 background-color: lightslategrey; | |
| 230 -moz-border-radius: 50px; | |
| 231 -webkit-border-radius: 20px; | |
| 232 border-radius: 20px; | |
| 233 background-position: center; | |
| 234 } | |
| 235 | |
| 236 .op-minus-active { | |
| 237 background-image: url(minus_white.png); | |
| 238 background-repeat: no-repeat; | |
| 239 background-color: lightslategrey; | |
| 240 -moz-border-radius: 50px; | |
| 241 -webkit-border-radius: 20px; | |
| 242 border-radius: 20px; | |
| 243 background-position: center; | |
| 244 } | |
| 245 | |
| 246 .op-mult-base { | |
| 247 width: 35px; | |
| 248 height: 35px; | |
| 249 position: absolute; | |
| 250 top: 228px; | |
| 251 left: 158px; | |
| 252 } | |
| 253 | |
| 254 .op-mult { | |
| 255 background-image: url(mult.png); | |
| 256 background-repeat: no-repeat; | |
| 257 } | |
| 258 | |
| 259 .op-mult:hover { | |
| 260 background-image: url(mult_black.png); | |
| 261 background-repeat: no-repeat; | |
| 262 background-color: lightgray; | |
| 263 -moz-border-radius: 50px; | |
| 264 -webkit-border-radius: 20px; | |
| 265 border-radius: 20px; | |
| 266 background-position: center; | |
| 267 } | |
| 268 | |
| 269 .op-mult-hover { | |
| 270 background-image: url(mult_black.png); | |
| 271 background-repeat: no-repeat; | |
| 272 background-color: lightgray; | |
| 273 -moz-border-radius: 50px; | |
| 274 -webkit-border-radius: 20px; | |
| 275 border-radius: 20px; | |
| 276 background-position: center; | |
| 277 } | |
| 278 | |
| 279 .op-mult:active { | |
| 280 background-image: url(mult_white.png); | |
| 281 background-repeat: no-repeat; | |
| 282 background-color: lightslategrey; | |
| 283 -moz-border-radius: 50px; | |
| 284 -webkit-border-radius: 20px; | |
| 285 border-radius: 20px; | |
| 286 background-position: center; | |
| 287 } | |
| 288 | |
| 289 .op-mult-active { | |
| 290 background-image: url(mult_white.png); | |
| 291 background-repeat: no-repeat; | |
| 292 background-color: lightslategrey; | |
| 293 -moz-border-radius: 50px; | |
| 294 -webkit-border-radius: 20px; | |
| 295 border-radius: 20px; | |
| 296 background-position: center; | |
| 297 } | |
| 298 | |
| 299 .op-div-base { | |
| 300 width: 35px; | |
| 301 height: 35px; | |
| 302 position: absolute; | |
| 303 top: 228px; | |
| 304 left: 198px; | |
| 305 } | |
| 306 | |
| 307 .op-div { | |
| 308 background-image: url(div.png); | |
| 309 background-repeat: no-repeat; | |
| 310 } | |
| 311 | |
| 312 .op-div:hover { | |
| 313 background-image: url(div_black.png); | |
| 314 background-repeat: no-repeat; | |
| 315 background-color: lightgray; | |
| 316 -moz-border-radius: 50px; | |
| 317 -webkit-border-radius: 20px; | |
| 318 border-radius: 20px; | |
| 319 background-position: center; | |
| 320 } | |
| 321 | |
| 322 .op-div-hover { | |
| 323 background-image: url(div_black.png); | |
| 324 background-repeat: no-repeat; | |
| 325 background-color: lightgray; | |
| 326 -moz-border-radius: 50px; | |
| 327 -webkit-border-radius: 20px; | |
| 328 border-radius: 20px; | |
| 329 background-position: center; | |
| 330 } | |
| 331 | |
| 332 .op-div:active { | |
| 333 background-image: url(div_white.png); | |
| 334 background-repeat: no-repeat; | |
| 335 background-color: lightslategrey; | |
| 336 -moz-border-radius: 50px; | |
| 337 -webkit-border-radius: 20px; | |
| 338 border-radius: 20px; | |
| 339 background-position: center; | |
| 340 } | |
| 341 | |
| 342 .op-div-active { | |
| 343 background-image: url(div_white.png); | |
| 344 background-repeat: no-repeat; | |
| 345 background-color: lightslategrey; | |
| 346 -moz-border-radius: 50px; | |
| 347 -webkit-border-radius: 20px; | |
| 348 border-radius: 20px; | |
| 349 background-position: center; | |
| 350 } | |
| 351 | |
| 352 .op-equal-base { | |
| 353 width: 35px; | |
| 354 height: 35px; | |
| 355 position: absolute; | |
| 356 top: 268px; | |
| 357 left: 158px; | |
| 358 } | |
| 359 | |
| 360 .op-equal { | |
| 361 background-image: url(equal.png); | |
| 362 background-repeat: no-repeat; | |
| 363 } | |
| 364 | |
| 365 .op-equal:hover { | |
| 366 background-image: url(equal_black.png); | |
| 367 background-repeat: no-repeat; | |
| 368 background-color: lightgray; | |
| 369 -moz-border-radius: 50px; | |
| 370 -webkit-border-radius: 20px; | |
| 371 border-radius: 20px; | |
| 372 background-position: center; | |
| 373 } | |
| 374 | |
| 375 .op-equal-hover { | |
| 376 background-image: url(equal_black.png); | |
| 377 background-repeat: no-repeat; | |
| 378 background-color: lightgray; | |
| 379 -moz-border-radius: 50px; | |
| 380 -webkit-border-radius: 20px; | |
| 381 border-radius: 20px; | |
| 382 background-position: center; | |
| 383 } | |
| 384 | |
| 385 .op-equal:active { | |
| 386 background-image: url(equal_white.png); | |
| 387 background-repeat: no-repeat; | |
| 388 background-color: lightslategrey; | |
| 389 -moz-border-radius: 50px; | |
| 390 -webkit-border-radius: 20px; | |
| 391 border-radius: 20px; | |
| 392 background-position: center; | |
| 393 } | |
| 394 | |
| 395 .op-equal-active { | |
| 396 background-image: url(equal_white.png); | |
| 397 background-repeat: no-repeat; | |
| 398 background-color: lightslategrey; | |
| 399 -moz-border-radius: 50px; | |
| 400 -webkit-border-radius: 20px; | |
| 401 border-radius: 20px; | |
| 402 background-position: center; | |
| 403 } | |
| 404 | |
| 405 .op-arrow-base { | |
| 406 width: 35px; | |
| 407 height: 35px; | |
| 408 position: absolute; | |
| 409 top: 268px; | |
| 410 left: 198px; | |
| 411 } | |
| 412 | |
| 413 .op-arrow { | |
| 414 background-image: url(arrow.png); | |
| 415 background-repeat: no-repeat; | |
| 416 } | |
| 417 | |
| 418 .op-arrow:hover { | |
| 419 background-image: url(arrow_black.png); | |
| 420 background-repeat: no-repeat; | |
| 421 background-color: lightgray; | |
| 422 -moz-border-radius: 50px; | |
| 423 -webkit-border-radius: 20px; | |
| 424 border-radius: 20px; | |
| 425 background-position: center; | |
| 426 } | |
| 427 | |
| 428 .op-arrow-hover { | |
| 429 background-image: url(arrow_black.png); | |
| 430 background-repeat: no-repeat; | |
| 431 background-color: lightgray; | |
| 432 -moz-border-radius: 50px; | |
| 433 -webkit-border-radius: 20px; | |
| 434 border-radius: 20px; | |
| 435 background-position: center; | |
| 436 } | |
| 437 | |
| 438 .op-arrow:active { | |
| 439 background-image: url(arrow_white.png); | |
| 440 background-repeat: no-repeat; | |
| 441 background-color: lightslategrey; | |
| 442 -moz-border-radius: 50px; | |
| 443 -webkit-border-radius: 20px; | |
| 444 border-radius: 20px; | |
| 445 background-position: center; | |
| 446 } | |
| 447 | |
| 448 .op-arrow-active { | |
| 449 background-image: url(arrow_white.png); | |
| 450 background-repeat: no-repeat; | |
| 451 background-color: lightslategrey; | |
| 452 -moz-border-radius: 50px; | |
| 453 -webkit-border-radius: 20px; | |
| 454 border-radius: 20px; | |
| 455 background-position: center; | |
| 456 } | |
| 457 } | |
| 458 <div class="calc-pad"> | |
| 459 <div class="calc-row"> | |
| 460 <span var=keySeven class="calc-num">7</span> | |
| 461 <span var=keyEight class="calc-num">8</span> | |
| 462 <span var=keyNine class="calc-num">9</span> | |
| 463 <div var=keyPlus class="op-plus-base op-plus"></div> | |
| 464 <div var=keyMinus class="op-minus-base op-minus"></div> | |
| 465 </div> | |
| 466 <div class="calc-row"> | |
| 467 <span var=keyFour class="calc-num">4</span> | |
| 468 <span var=keyFive class="calc-num">5</span> | |
| 469 <span var=keySix class="calc-num">6</span> | |
| 470 <div var=keyStar class="op-mult-base op-mult"></div> | |
| 471 <div var=keySlash class="op-div-base op-div"></div> | |
| 472 </div> | |
| 473 <div class="calc-row"> | |
| 474 <span var=keyOne class="calc-num">1</span> | |
| 475 <span var=keyTwo class="calc-num">2</span> | |
| 476 <span var=keyThree class="calc-num">3</span> | |
| 477 <div var=keyEqual class="op-equal-base op-equal"></div> | |
| 478 <div var=keyClear class="op-arrow-base op-arrow"></div> | |
| 479 </div> | |
| 480 <div class="calc-row"> | |
| 481 <span var=keyZero class="calc-num">0</span> | |
| 482 <span var=keyDot class="calc-period"> | |
| 483 <span style="font-size:9pt;"> </span>.<span style="font-size: 9pt;"> </span> | |
| 484 </span> | |
| 485 </div> | |
| 486 </div> | |
| 487 } | |
| 488 | |
| 489 /* Button UI Calculator key theme. */ | |
| 490 template ButtonPadUI() { | |
| 491 css { | |
| 492 .button-pad { | |
| 493 background-color: #F4F4F4; | |
| 494 width: 241px; | |
| 495 height: 168px; | |
| 496 padding-top: 8px; | |
| 497 padding-bottom: 4px; | |
| 498 cursor: default; | |
| 499 } | |
| 500 | |
| 501 .button-row { | |
| 502 color: #444; | |
| 503 font-size: 16pt; | |
| 504 font-family: arial; | |
| 505 font-weight: bold; | |
| 506 padding-bottom: 10px; | |
| 507 padding-left: 12px; | |
| 508 margin-top: 5px; | |
| 509 } | |
| 510 | |
| 511 .button-num { | |
| 512 padding-left: 12px; | |
| 513 padding-right: 12px; | |
| 514 margin-right: 6px; | |
| 515 cursor: pointer; | |
| 516 border: 1px solid gray; | |
| 517 padding-top: 5px; | |
| 518 padding-bottom: 6px; | |
| 519 background-color: #FCFCFC; | |
| 520 -moz-box-shadow: 1px 1px 1px 1px #ccc; | |
| 521 -webkit-box-shadow: 1px 1px 1px 1px #ccc; | |
| 522 box-shadow: 1px 1px 1px 1px #ccc; | |
| 523 -moz-border-radius: 3px; | |
| 524 -webkit-border-radius: 3px; | |
| 525 border-radius: 3px; | |
| 526 } | |
| 527 | |
| 528 .button-period { | |
| 529 padding-left: 9px; | |
| 530 padding-right: 8px; | |
| 531 margin-right: 6px; | |
| 532 cursor: pointer; | |
| 533 border: 1px solid gray; | |
| 534 padding-top: 5px; | |
| 535 padding-bottom: 6px; | |
| 536 background-color: #FCFCFC; | |
| 537 -moz-box-shadow: 1px 1px 1px 1px #ccc; | |
| 538 -webkit-box-shadow: 1px 1px 1px 1px #ccc; | |
| 539 box-shadow: 1px 1px 1px 1px #ccc; | |
| 540 -moz-border-radius: 3px; | |
| 541 -webkit-border-radius: 3px; | |
| 542 border-radius: 3px; | |
| 543 } | |
| 544 | |
| 545 .button-num:hover { | |
| 546 width: 100px; | |
| 547 height: 100px; | |
| 548 background: lightgray; | |
| 549 color: black; | |
| 550 } | |
| 551 | |
| 552 .button-num-hover { | |
| 553 width: 100px; | |
| 554 height: 100px; | |
| 555 background: lightgray; | |
| 556 color: black; | |
| 557 } | |
| 558 | |
| 559 .button-num:active { | |
| 560 width: 100px; | |
| 561 height: 100px; | |
| 562 background: lightslategrey; | |
| 563 color: white; | |
| 564 } | |
| 565 | |
| 566 .button-num-active { | |
| 567 width: 100px; | |
| 568 height: 100px; | |
| 569 background: lightslategrey; | |
| 570 color: white; | |
| 571 } | |
| 572 | |
| 573 .button-period:hover { | |
| 574 width: 100px; | |
| 575 height: 100px; | |
| 576 background: lightgray; | |
| 577 color: black; | |
| 578 } | |
| 579 | |
| 580 .button-period-hover { | |
| 581 width: 100px; | |
| 582 height: 100px; | |
| 583 background: lightgray; | |
| 584 color: black; | |
| 585 } | |
| 586 | |
| 587 .button-period:active { | |
| 588 width: 100px; | |
| 589 height: 100px; | |
| 590 background: lightslategrey; | |
| 591 color: white; | |
| 592 } | |
| 593 | |
| 594 .button-period-active { | |
| 595 width: 100px; | |
| 596 height: 100px; | |
| 597 background: lightslategrey; | |
| 598 color: white; | |
| 599 } | |
| 600 | |
| 601 .button-period-error { | |
| 602 width: 100px; | |
| 603 height: 100px; | |
| 604 background: IndianRed; | |
| 605 color: firebrick; | |
| 606 } | |
| 607 | |
| 608 .buttonop-plus-base { | |
| 609 width: 35px; | |
| 610 height: 35px; | |
| 611 position: absolute; | |
| 612 top: 185px; | |
| 613 left: 158px; | |
| 614 } | |
| 615 | |
| 616 .buttonop-plus { | |
| 617 background-image: url(plus.png); | |
| 618 background-repeat: no-repeat; | |
| 619 background-color: #DDD; | |
| 620 border: 1px solid gray; | |
| 621 -moz-box-shadow: 1px 1px 1px 1px #CCC; | |
| 622 -webkit-box-shadow: 1px 1px 1px 1px #CCC; | |
| 623 box-shadow: 1px 1px 1px 1px #CCC; | |
| 624 -moz-border-radius: 3px; | |
| 625 -webkit-border-radius: 3px; | |
| 626 border-radius: 3px; | |
| 627 } | |
| 628 | |
| 629 .buttonop-plus:hover { | |
| 630 background-image: url(plus_black.png); | |
| 631 background-repeat: no-repeat; | |
| 632 background-color: #EEE; | |
| 633 background-position: center; | |
| 634 } | |
| 635 | |
| 636 .buttonop-plus-hover { | |
| 637 background-image: url(plus_black.png); | |
| 638 background-repeat: no-repeat; | |
| 639 background-color: #EEE; | |
| 640 background-position: center; | |
| 641 } | |
| 642 | |
| 643 .buttonop-plus:active { | |
| 644 background-image: url(plus_white.png); | |
| 645 background-repeat: no-repeat; | |
| 646 background-color: lightslategrey; | |
| 647 background-position: center; | |
| 648 } | |
| 649 | |
| 650 .buttonop-plus-active { | |
| 651 background-image: url(plus_white.png); | |
| 652 background-repeat: no-repeat; | |
| 653 background-color: lightslategrey; | |
| 654 background-position: center; | |
| 655 } | |
| 656 | |
| 657 .buttonop-minus-base { | |
| 658 width: 35px; | |
| 659 height: 35px; | |
| 660 position: absolute; | |
| 661 top: 185px; | |
| 662 left: 201px; | |
| 663 } | |
| 664 | |
| 665 .buttonop-minus { | |
| 666 background-image: url(minus.png); | |
| 667 background-repeat: no-repeat; | |
| 668 background-color: #DDD; | |
| 669 border: 1px solid gray; | |
| 670 -moz-box-shadow: 1px 1px 1px 1px #CCC; | |
| 671 -webkit-box-shadow: 1px 1px 1px 1px #CCC; | |
| 672 box-shadow: 1px 1px 1px 1px #CCC; | |
| 673 -moz-border-radius: 3px; | |
| 674 -webkit-border-radius: 3px; | |
| 675 border-radius: 3px; | |
| 676 } | |
| 677 | |
| 678 .buttonop-minus:hover { | |
| 679 background-image: url(minus_black.png); | |
| 680 background-repeat: no-repeat; | |
| 681 background-color: #EEE; | |
| 682 background-position: center; | |
| 683 } | |
| 684 | |
| 685 .buttonop-minus-hover { | |
| 686 background-image: url(minus_black.png); | |
| 687 background-repeat: no-repeat; | |
| 688 background-color: #EEE; | |
| 689 background-position: center; | |
| 690 } | |
| 691 | |
| 692 .buttonop-minus:active { | |
| 693 background-image: url(minus_white.png); | |
| 694 background-repeat: no-repeat; | |
| 695 background-color: lightslategrey; | |
| 696 background-position: center; | |
| 697 } | |
| 698 | |
| 699 .buttonop-minus-active { | |
| 700 background-image: url(minus_white.png); | |
| 701 background-repeat: no-repeat; | |
| 702 background-color: lightslategrey; | |
| 703 background-position: center; | |
| 704 } | |
| 705 | |
| 706 .buttonop-mult-base { | |
| 707 width: 35px; | |
| 708 height: 35px; | |
| 709 position: absolute; | |
| 710 top: 225px; | |
| 711 left: 158px; | |
| 712 } | |
| 713 | |
| 714 .buttonop-mult { | |
| 715 background-image: url(mult.png); | |
| 716 background-repeat: no-repeat; | |
| 717 background-color: #DDD; | |
| 718 border: 1px solid gray; | |
| 719 -moz-box-shadow: 1px 1px 1px 1px #CCC; | |
| 720 -webkit-box-shadow: 1px 1px 1px 1px #CCC; | |
| 721 box-shadow: 1px 1px 1px 1px #CCC; | |
| 722 -moz-border-radius: 3px; | |
| 723 -webkit-border-radius: 3px; | |
| 724 border-radius: 3px; | |
| 725 } | |
| 726 | |
| 727 .buttonop-mult:hover { | |
| 728 background-image: url(mult_black.png); | |
| 729 background-repeat: no-repeat; | |
| 730 background-color: #EEE; | |
| 731 background-position: center; | |
| 732 } | |
| 733 | |
| 734 .buttonop-mult-hover { | |
| 735 background-image: url(mult_black.png); | |
| 736 background-repeat: no-repeat; | |
| 737 background-color: #EEE; | |
| 738 background-position: center; | |
| 739 } | |
| 740 | |
| 741 .buttonop-mult:active { | |
| 742 background-image: url(mult_white.png); | |
| 743 background-repeat: no-repeat; | |
| 744 background-color: lightslategrey; | |
| 745 background-position: center; | |
| 746 } | |
| 747 | |
| 748 .buttonop-mult-active { | |
| 749 background-image: url(mult_white.png); | |
| 750 background-repeat: no-repeat; | |
| 751 background-color: lightslategrey; | |
| 752 background-position: center; | |
| 753 } | |
| 754 | |
| 755 .buttonop-div-base { | |
| 756 width: 35px; | |
| 757 height: 35px; | |
| 758 position: absolute; | |
| 759 top: 225px; | |
| 760 left: 201px; | |
| 761 } | |
| 762 | |
| 763 .buttonop-div { | |
| 764 background-image: url(div.png); | |
| 765 background-repeat: no-repeat; | |
| 766 background-color: #DDD; | |
| 767 border: 1px solid gray; | |
| 768 -moz-box-shadow: 1px 1px 1px 1px #CCC; | |
| 769 -webkit-box-shadow: 1px 1px 1px 1px #CCC; | |
| 770 box-shadow: 1px 1px 1px 1px #CCC; | |
| 771 -moz-border-radius: 3px; | |
| 772 -webkit-border-radius: 3px; | |
| 773 border-radius: 3px; | |
| 774 } | |
| 775 | |
| 776 .buttonop-div:hover { | |
| 777 background-image: url(div_black.png); | |
| 778 background-repeat: no-repeat; | |
| 779 background-color: #EEE; | |
| 780 background-position: center; | |
| 781 } | |
| 782 | |
| 783 .buttonop-div-hover { | |
| 784 background-image: url(div_black.png); | |
| 785 background-repeat: no-repeat; | |
| 786 background-color: #EEE; | |
| 787 background-position: center; | |
| 788 } | |
| 789 | |
| 790 .buttonop-div:active { | |
| 791 background-image: url(div_white.png); | |
| 792 background-repeat: no-repeat; | |
| 793 background-color: lightslategrey; | |
| 794 background-position: center; | |
| 795 } | |
| 796 | |
| 797 .buttonop-div-active { | |
| 798 background-image: url(div_white.png); | |
| 799 background-repeat: no-repeat; | |
| 800 background-color: lightslategrey; | |
| 801 background-position: center; | |
| 802 } | |
| 803 | |
| 804 .buttonop-equal-base { | |
| 805 width: 35px; | |
| 806 height: 35px; | |
| 807 position: absolute; | |
| 808 top: 266px; | |
| 809 left: 158px; | |
| 810 } | |
| 811 | |
| 812 .buttonop-equal { | |
| 813 background-image: url(equal.png); | |
| 814 background-repeat: no-repeat; | |
| 815 background-color: #DDD; | |
| 816 border: 1px solid gray; | |
| 817 -moz-box-shadow: 1px 1px 1px 1px #CCC; | |
| 818 -webkit-box-shadow: 1px 1px 1px 1px #CCC; | |
| 819 box-shadow: 1px 1px 1px 1px #CCC; | |
| 820 -moz-border-radius: 3px; | |
| 821 -webkit-border-radius: 3px; | |
| 822 border-radius: 3px; | |
| 823 } | |
| 824 | |
| 825 .buttonop-equal:hover { | |
| 826 background-image: url(equal_black.png); | |
| 827 background-repeat: no-repeat; | |
| 828 background-color: #EEE; | |
| 829 background-position: center; | |
| 830 } | |
| 831 | |
| 832 .buttonop-equal-hover { | |
| 833 background-image: url(equal_black.png); | |
| 834 background-repeat: no-repeat; | |
| 835 background-color: #EEE; | |
| 836 background-position: center; | |
| 837 } | |
| 838 | |
| 839 .buttonop-equal:active { | |
| 840 background-image: url(equal_white.png); | |
| 841 background-repeat: no-repeat; | |
| 842 background-color: lightslategrey; | |
| 843 background-position: center; | |
| 844 } | |
| 845 | |
| 846 .buttonop-equal-active { | |
| 847 background-image: url(equal_white.png); | |
| 848 background-repeat: no-repeat; | |
| 849 background-color: lightslategrey; | |
| 850 background-position: center; | |
| 851 } | |
| 852 | |
| 853 .buttonop-arrow-base { | |
| 854 width: 35px; | |
| 855 height: 35px; | |
| 856 position: absolute; | |
| 857 top: 266px; | |
| 858 left: 201px; | |
| 859 } | |
| 860 | |
| 861 .buttonop-arrow { | |
| 862 background-image: url(arrow.png); | |
| 863 background-repeat: no-repeat; | |
| 864 background-color: #DDD; | |
| 865 border: 1px solid gray; | |
| 866 -moz-box-shadow: 1px 1px 1px 1px #CCC; | |
| 867 -webkit-box-shadow: 1px 1px 1px 1px #CCC; | |
| 868 box-shadow: 1px 1px 1px 1px #CCC; | |
| 869 -moz-border-radius: 3px; | |
| 870 -webkit-border-radius: 3px; | |
| 871 border-radius: 3px; | |
| 872 } | |
| 873 | |
| 874 .buttonop-arrow:hover { | |
| 875 background-image: url(arrow_black.png); | |
| 876 background-repeat: no-repeat; | |
| 877 background-color: #EEE; | |
| 878 background-position: center; | |
| 879 } | |
| 880 | |
| 881 .buttonop-arrow-hover { | |
| 882 background-image: url(arrow_black.png); | |
| 883 background-repeat: no-repeat; | |
| 884 background-color: #EEE; | |
| 885 background-position: center; | |
| 886 } | |
| 887 | |
| 888 .buttonop-arrow:active { | |
| 889 background-image: url(arrow_white.png); | |
| 890 background-repeat: no-repeat; | |
| 891 background-color: lightslategrey; | |
| 892 background-position: center; | |
| 893 } | |
| 894 | |
| 895 .buttonop-arrow-active { | |
| 896 background-image: url(arrow_white.png); | |
| 897 background-repeat: no-repeat; | |
| 898 background-color: lightslategrey; | |
| 899 background-position: center; | |
| 900 } | |
| 901 } | |
| 902 <div class="button-pad"> | |
| 903 <div class="button-row"> | |
| 904 <span var=keySeven class="button-num">7</span> | |
| 905 <span var=keyEight class="button-num">8</span> | |
| 906 <span var=keyNine class="button-num">9</span> | |
| 907 <div var=keyPlus class="buttonop-plus-base buttonop-plus"></div> | |
| 908 <div var=keyMinus class="buttonop-minus-base buttonop-minus"></div> | |
| 909 </div> | |
| 910 <div class="button-row"> | |
| 911 <span var=keyFour class="button-num">4</span> | |
| 912 <span var=keyFive class="button-num">5</span> | |
| 913 <span var=keySix class="button-num">6</span> | |
| 914 <div var=keyStar class="buttonop-mult-base buttonop-mult"></div> | |
| 915 <div var=keySlash class="buttonop-div-base buttonop-div"></div> | |
| 916 </div> | |
| 917 <div class="button-row"> | |
| 918 <span var=keyOne class="button-num">1</span> | |
| 919 <span var=keyTwo class="button-num">2</span> | |
| 920 <span var=keyThree class="button-num">3</span> | |
| 921 <div var=keyEqual class="buttonop-equal-base buttonop-equal"></div> | |
| 922 <div var=keyClear class="buttonop-arrow-base buttonop-arrow"></div> | |
| 923 </div> | |
| 924 <div class="button-row" style="padding-top: 1px;"> | |
| 925 <span var=keyZero class="button-num">0</span> | |
| 926 <span var=keyDot class="button-period"> | |
| 927 <span style="font-size:9pt;"> </span>.<span style="font-size: 9pt;"> </span> | |
| 928 </span> | |
| 929 </div> | |
| 930 </div> | |
| 931 } | |
| 932 | |
| 933 | |
| 934 template SettingsDialog() { | |
| 935 css { | |
| 936 .setting-glyph { | |
| 937 position: absolute; | |
| 938 left: 239px; | |
| 939 top: 10px; | |
| 940 background-image: url(settings.png); | |
| 941 background-repeat: no-repeat; | |
| 942 width: 2px; | |
| 943 height: 20px; | |
| 944 z-index: 1000; | |
| 945 padding-left: 2px; | |
| 946 padding-right: 2px; | |
| 947 background-color: transparent; | |
| 948 border-color: transparent; | |
| 949 border-style: solid; | |
| 950 border-top-width: 1px; | |
| 951 border-left-width: 0px; | |
| 952 border-right-width: 3px; | |
| 953 border-bottom-width: 2px; | |
| 954 cursor: pointer; | |
| 955 } | |
| 956 | |
| 957 .setting-glyph:hover { | |
| 958 background-color: #333 !important; | |
| 959 } | |
| 960 | |
| 961 .dialog { | |
| 962 font-size: 10pt; | |
| 963 font-weight: normal; | |
| 964 margin-top: 26px; | |
| 965 position: absolute; | |
| 966 left: 14px; | |
| 967 background-color: lightgray; | |
| 968 width: 227px; | |
| 969 padding-bottom: 3px; | |
| 970 border: 1px solid black; | |
| 971 } | |
| 972 | |
| 973 .dlg-area { | |
| 974 margin-left: 25px; | |
| 975 } | |
| 976 | |
| 977 .dlg-item { | |
| 978 margin-left: 10px; | |
| 979 cursor: pointer; | |
| 980 } | |
| 981 | |
| 982 .dlg-subtitle { | |
| 983 font-weight: bold; | |
| 984 margin-top: 3px; | |
| 985 } | |
| 986 | |
| 987 .expression-input { | |
| 988 width: 205px; | |
| 989 font-family: arial; | |
|
Jacob
2012/04/05 18:06:01
include fallback font options or remove line
| |
| 990 font-weight: bold; | |
| 991 } } | |
| 992 <div> | |
| 993 <div var=settings class="setting-glyph"></div> | |
| 994 <div var=settingsDialog class="dialog" style="visibility: hidden;"> | |
| 995 <div class="dlg-area"> | |
| 996 <div class="dlg-subtitle">Theme:</div> | |
| 997 <div var="simpleTitle" style="cursor: pointer;"> | |
| 998 <input var="simple" name="theme" type="radio" class="dlg-item"/> | |
| 999 <span>Simple</span> | |
| 1000 </div> | |
| 1001 <div var="buttonTitle" style="cursor: pointer;"> | |
| 1002 <input var="buttons" name="theme" type="radio" class="dlg-item"/> | |
| 1003 <span>Buttons</span> | |
| 1004 </div> | |
| 1005 </div> | |
| 1006 </div> | |
| 1007 </div> | |
| 1008 } | |
| 1009 | |
| 1010 /* Calculator Tape template with HTML snippets for sub totals, totals, operator | |
| 1011 * displayed, errors, clearing calculations, linebreaks, and replace operators | |
| 1012 * and subtotals. | |
| 1013 */ | |
| 1014 template TapeUI() { | |
| 1015 css { | |
| 1016 .calculator-tape { | |
| 1017 height: 7em; | |
| 1018 font-size: 18pt; | |
| 1019 color: black; | |
| 1020 background-color: white; | |
| 1021 width: 229px; | |
| 1022 border: 1px black solid; | |
| 1023 font-family: arial; | |
|
Jacob
2012/04/05 18:06:01
remove or add fallbacks
| |
| 1024 font-weight: bolder; | |
| 1025 padding-right: 2px; | |
| 1026 padding-left: 8px; | |
| 1027 overflow-y: auto; | |
| 1028 } | |
| 1029 | |
| 1030 .calculator-tape::-webkit-scrollbar { | |
| 1031 width: 0px; | |
| 1032 } | |
| 1033 | |
| 1034 .alignleft { | |
| 1035 float: left; | |
| 1036 } | |
| 1037 | |
| 1038 .alignright { | |
| 1039 float: right; | |
| 1040 color: lightgray; | |
| 1041 padding-right: 4px; | |
| 1042 } | |
| 1043 | |
| 1044 .clear-line { | |
| 1045 clear: both; | |
| 1046 } | |
| 1047 | |
| 1048 .clear-calc { | |
| 1049 clear: both; | |
| 1050 border-bottom: 1px solid lightgray; | |
| 1051 margin-bottom: 5px; | |
| 1052 height: 5px; | |
| 1053 } | |
| 1054 | |
| 1055 .error { | |
| 1056 clear: both; | |
| 1057 background-color: red; | |
| 1058 color: white; | |
| 1059 margin-bottom: 5px; | |
| 1060 font-size: 10pt; | |
| 1061 } | |
| 1062 | |
| 1063 .total { | |
| 1064 clear: both; | |
| 1065 border-bottom: 1px solid lightgray; | |
| 1066 margin-bottom: 5px; | |
| 1067 } | |
| 1068 } | |
| 1069 get lineBreak() { | |
| 1070 <div class="clear-line"></div> | |
| 1071 } | |
| 1072 get clearCalculation() { | |
| 1073 <div class="clear-calc"></div> | |
| 1074 } | |
| 1075 get firstOp(displayedOp, number) { | |
| 1076 <span style="font-family: courier;">${displayedOp}</span>${number} | |
| 1077 } | |
| 1078 get displayOpAndNumber(opAsStr, number) { | |
| 1079 <div id="activeInput" class="alignleft"><span style="font-family: courier;"> ${opAsStr}</span>${number}</div> | |
| 1080 } | |
| 1081 get displayOp(opAsStr) { | |
| 1082 <div id="activeInput" class="alignleft"><span style="font-family: courier;"> ${opAsStr}</span></div> | |
| 1083 } | |
| 1084 get displayEqual() { | |
| 1085 <div class="alignleft"><span style="font-family: courier;"> </spa n></div> | |
| 1086 } | |
| 1087 get alignSubTotal() { | |
| 1088 <div class="alignright"></div> | |
| 1089 } | |
| 1090 get displayTotal(formattedTotal) { | |
| 1091 <div class="alignright">= ${formattedTotal}</div> | |
| 1092 } | |
| 1093 get displayActiveTotal() { | |
| 1094 <div id="activeTotal" class="alignright"></div> | |
| 1095 } | |
| 1096 get displayError(err) { | |
| 1097 <div class="error">${err}</div> | |
| 1098 } | |
| 1099 get replaceActiveOp(value) { | |
| 1100 <div class="alignleft">${value}</div> | |
| 1101 } | |
| 1102 get replaceActiveTotal(value) { | |
| 1103 <div class="alignright">${value}</div> | |
| 1104 } | |
| 1105 <div var="tape" class="calculator-tape"></div> | |
| 1106 } | |
| OLD | NEW |
