Using CSS:after instead of computed HTML fragment
authorJaroslav Tulach <jaroslav.tulach@apidesign.org>
Fri, 27 Jun 2014 15:05:03 +0200
changeset 163823630089369
parent 162 898432e8f056
child 164 b56bc5060fac
Using CSS:after instead of computed HTML fragment
minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java
minesweeper/src/main/webapp/pages/index.html
minesweeper/src/main/webapp/pages/mines.css
     1.1 --- a/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Thu Jun 19 09:49:01 2014 +0200
     1.2 +++ b/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Jun 27 15:05:03 2014 +0200
     1.3 @@ -55,17 +55,6 @@
     1.4          @Property(name = "mine", type = boolean.class)
     1.5      })
     1.6      static class SquareModel {
     1.7 -        @ComputedProperty static String html(SquareType state) {
     1.8 -            if (state == null) return "&nbsp;";
     1.9 -            switch (state) {
    1.10 -                case EXPLOSION: return "&#x2717;";
    1.11 -                case UNKNOWN: return "&nbsp;";
    1.12 -                case DISCOVERED: return "&#x2714;";  
    1.13 -                case N_0: return "&nbsp;";
    1.14 -            }
    1.15 -            return "&#x278" + (state.ordinal() - 1);
    1.16 -        }
    1.17 -        
    1.18          @ComputedProperty static String style(SquareType state) {
    1.19              return state == null ? null : state.toString();
    1.20          }
     2.1 --- a/minesweeper/src/main/webapp/pages/index.html	Thu Jun 19 09:49:01 2014 +0200
     2.2 +++ b/minesweeper/src/main/webapp/pages/index.html	Fri Jun 27 15:05:03 2014 +0200
     2.3 @@ -63,7 +63,7 @@
     2.4                  </button>
     2.5              </div>
     2.6          </div>
     2.7 -        
     2.8 +
     2.9  
    2.10          <script type="text/html" id="field">
    2.11            <center>
    2.12 @@ -73,7 +73,7 @@
    2.13                      <tr>
    2.14                          <!-- ko foreach: columns -->
    2.15                          <td data-bind="css: style, click: $parents[1].click" >
    2.16 -                            <div data-bind='html: html'></div>
    2.17 +                            <div></div>
    2.18                          </td>
    2.19                          <!-- /ko -->
    2.20                      </tr>
     3.1 --- a/minesweeper/src/main/webapp/pages/mines.css	Thu Jun 19 09:49:01 2014 +0200
     3.2 +++ b/minesweeper/src/main/webapp/pages/mines.css	Fri Jun 27 15:05:03 2014 +0200
     3.3 @@ -61,6 +61,43 @@
     3.4  table.field td.DISCOVERED {
     3.5      background-color: #9DB2B1;
     3.6  }
     3.7 +
     3.8 +table.field td.UNKNOWN div::after {
     3.9 +    content: " ";
    3.10 +}
    3.11 +table.field td.EXPLOSION div::after {
    3.12 +    content: "\002717";
    3.13 +}
    3.14 +table.field td.DISCOVERED div::after {
    3.15 +    content: "\002714";
    3.16 +}
    3.17 +table.field td.N_0 div::after {
    3.18 +    content: " ";
    3.19 +}
    3.20 +table.field td.N_1 div::after {
    3.21 +    content: "\002780";
    3.22 +}
    3.23 +table.field td.N_2 div::after {
    3.24 +    content: "\002781";
    3.25 +}
    3.26 +table.field td.N_3 div::after {
    3.27 +    content: "\002782";
    3.28 +}
    3.29 +table.field td.N_4 div::after {
    3.30 +    content: "\002783";
    3.31 +}
    3.32 +table.field td.N_5 div::after {
    3.33 +    content: "\002784";
    3.34 +}
    3.35 +table.field td.N_6 div::after {
    3.36 +    content: "\002785";
    3.37 +}
    3.38 +table.field td.N_7 div::after {
    3.39 +    content: "\002786";
    3.40 +}
    3.41 +table.field td.N_8 div::after {
    3.42 +    content: "\002787";
    3.43 +}
    3.44  .but-orientation {
    3.45      margin-top:20px;
    3.46  }