New views prototype

1 files changed, 104 insertions, 47 deletions

diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/views_proto/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/views_proto/index.html.erb
index cf8ec33f0fe..dce06eec3b8 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/views_proto/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/views_proto/index.html.erb
@@ -10,6 +10,8 @@
         </div>
       </div>
       <div class="navigator-results quality-gates-nav">
+        <input type="text" placeholder="Search Views..." style="width: 100%; margin-bottom: 10px;">
+
         <ol class="navigator-results-list">
           <li class="active">
             <div class="line line-nowrap">By License</div>
@@ -38,59 +40,114 @@
           <div class="navigator-header-actions button-group">
             <button id="quality-gate-rename">Edit</button>
             <button id="quality-gate-copy">Add Sub-view</button>
-            <button id="quality-gate-unset-as-default">Associate Projects</button>
             <button id="quality-gate-delete" class="button-red">Delete</button>
           </div>
         </div>
       </div>
 
       <div class="navigator-details">
-        <div class="quality-gate-section-name">Structure</div>
-        <div class="libraries-tree">
-          <ul>
-            <li>
-              <i class="icon-qualifier-svw"></i>
-              <span class="libraries-tree-name">By License</span>
-              <ul>
-                <li class="libraries-tree-with-subtree">
-                  <i class="icon-qualifier-svw"></i>
-                  <a>
-                    <span class="libraries-tree-name">Commercial</span>
-                  </a>
-                  <ul>
-                    <li>
-                      <i class="icon-qualifier-trk"></i>
-                      <span class="libraries-tree-name">All projects matching regular expression "com.*"</span>
-                    </li>
-                  </ul>
-                </li>
-                <li class="libraries-tree-with-subtree">
-                  <i class="icon-qualifier-svw"></i>
-                  <a>
-                    <span class="libraries-tree-name">Open Source</span>
-                  </a>
-                  <ul>
-                    <li>
-                      <i class="icon-qualifier-trk"></i>
-                      <span class="libraries-tree-name">All projects matching regular expression "(org.*)|(hudson.*)"</span>
-                    </li>
-                  </ul>
-                </li>
-                <li class="libraries-tree-with-subtree">
-                  <i class="icon-qualifier-svw"></i>
-                  <a>
-                    <span class="libraries-tree-name">Unclassified</span>
-                  </a>
-                  <ul>
-                    <li>
-                      <i class="icon-qualifier-trk"></i>
-                      <span class="libraries-tree-name">All remaining projects not associated to "BY_LICENSE"</span>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-          </ul>
+        <div class="quality-gate-section">
+          <div class="quality-gate-section-name">Structure</div>
+          <div class="libraries-tree">
+            <ul>
+              <li>
+                <i class="icon-qualifier-svw"></i>
+                <span class="libraries-tree-name">By License</span>
+                <ul>
+                  <li class="libraries-tree-with-subtree">
+                    <i class="icon-qualifier-svw"></i>
+                    <a>
+                      <span class="libraries-tree-name">Commercial</span>
+                    </a>
+                    <ul>
+                      <li>
+                        <i class="icon-qualifier-trk"></i>
+                        <span class="libraries-tree-name">All projects matching regular expression "com.*"</span>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="libraries-tree-with-subtree">
+                    <i class="icon-qualifier-svw"></i>
+                    <a>
+                      <span class="libraries-tree-name">Open Source</span>
+                    </a>
+                    <ul>
+                      <li>
+                        <i class="icon-qualifier-trk"></i>
+                        <span class="libraries-tree-name">All projects matching regular expression "(org.*)|(hudson.*)"</span>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="libraries-tree-with-subtree">
+                    <i class="icon-qualifier-svw"></i>
+                    <a>
+                      <span class="libraries-tree-name">Unclassified</span>
+                    </a>
+                    <ul>
+                      <li>
+                        <i class="icon-qualifier-trk"></i>
+                        <span class="libraries-tree-name">All remaining projects not associated to "BY_LICENSE"</span>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="quality-gate-section">
+          <div class="quality-gate-section-name">Projects</div>
+          <div id="select-list-projects" style="width: 100%;">
+            <div class="select-list-container">
+              <div class="select-list-control">
+                <div class="select-list-check-control">
+                  <a class="select-list-control-button active" name="selected">With</a><a class="select-list-control-button" name="deselected">Without</a><a class="select-list-control-button" name="all">All</a>
+                </div>
+                <div class="select-list-search-control disabled">
+                  <input type="text" placeholder="Search"><a class="select-list-search-control-clear">×</a></div>
+              </div>
+              <div class="select-list-list-container" style="height: 400px; overflow: auto;">
+                <ul class="select-list-list">
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="CSS" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">CSS</div>
+                  </li>
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="EBCDIC to ASCII converter" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">EBCDIC to ASCII converter</div>
+                  </li>
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="Flee" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">Flee</div>
+                  </li>
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="Flex" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">Flex</div>
+                  </li>
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="Fortify for SonarQube" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">Fortify for SonarQube</div>
+                  </li>
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="Infra Jenkins Job Creator" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">Infra Jenkins Job Creator</div>
+                  </li>
+                  <li class="selected">
+                    <input class="select-list-list-checkbox" type="checkbox" name="Issues Density Plugin" title="Click to remove association between this project and the quality gate">
+
+                    <div class="select-list-list-item">Issues Density Plugin</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>