gui/html: Various improvements, including embedded context menu
+ update of jQuery
+ adding jQueryUI extension (not really used yet)
+ adding jQueryContext menu extension
+ displaying file icon based on file extension
Change-Id: Ie9cac5d69c751e010f61c64bbe3734890da0aa2f
diff --git a/gui/html/css/style.css b/gui/html/css/style.css
new file mode 100644
index 0000000..62e640f
--- /dev/null
+++ b/gui/html/css/style.css
@@ -0,0 +1,292 @@
+@import 'reset.css';
+@import 'text.css';
+
+@charset "utf-8";
+
+body {
+ background-color: #ffffff;
+ color: #000000;
+ font-family: sans-serif;
+}
+
+li {
+ margin: 0;
+}
+
+header, nav, article, footer, address {
+ display: block;
+}
+
+header {
+ margin: 20px auto 0;
+ width: 90%;
+}
+
+header h1 {
+ height: 50px;
+ padding-left: 55px;
+ padding-top: 6px;
+ background-image: url("chronoshare.png");
+ background-repeat: no-repeat;
+ background-size: 50px 50px;
+}
+
+article {
+ margin: 20px auto 20px;
+ width: 90%;
+ padding-bottom: 20px;
+}
+
+footer {
+ margin: 20px auto 0;
+ width: 90%;
+
+ padding-bottom: 2px;
+ text-align: right;
+
+ position: fixed;
+ font-height: 10px;
+ bottom: 0;
+ left: 5%;
+}
+
+h1 {
+ font-family: sans-serif;
+}
+
+h3 {
+ font-family: sans-serif;
+}
+
+h5 {
+ font-family: sans-serif;
+ color: #727272;
+}
+
+/* Navigation menu */
+nav {
+ margin: 20px 0;
+ min-width: 587px;
+ width: 100%;
+ height: 40px;
+
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #99CCB2;
+}
+
+nav ul {
+ margin: 13px 0 0 0;
+ padding: 0px;
+}
+
+nav li {
+ list-style-type: none;
+ display: inline;
+ margin: 0px 30px;
+}
+
+nav li a {
+ color: #727272;
+ font-size: 14px;
+ line-height: 14px;
+ font-family: sans-serif;
+ text-decoration: none;
+}
+
+nav li a.active, nav a:hover { color: #2D9A65; }
+
+/* MISC */
+grey {
+ color: #727272;
+ font-weight: 200;
+}
+
+green {
+ color: #2D9A65;
+ font-weight: 200;
+}
+
+red {
+ color: red;
+ font-weight: 200;
+ font-size: 2.4em;
+}
+
+.hidden {
+ display: none;
+}
+
+/* */
+.item-list
+{
+ border-radius: 6px;
+
+ margin-top: 10px;
+ margin-bottom: 10px;
+ /*float: left;*/
+ font-family: sans-serif;
+ font-size: 12px;
+ width: 100%;
+ text-align: left;
+ /* border-collapse: collapse; */
+}
+
+.item-list th
+{
+ /* -moz-border-radius: 10px; */
+ /* border-radius: 10px; */
+ font-size: 14px;
+ font-weight: normal;
+ padding: 8px;
+ background: #EAF4EF;
+ border-top: 1px solid #99CCB2;
+ /* border-bottom: 1px solid #fff; */
+ color: #727272;
+ text-align: left;
+}
+
+.item-list th.border-left {
+ /* -moz-border-radius-topleft:10px; */
+ /* -webkit-border-top-left-radius:10px; */
+ /* border-top-left-radius:10px; */
+}
+
+.item-list td
+{
+ padding: 8px;
+ border-bottom: 1px solid #fff;
+ color: #000;
+ border-top: 1px solid transparent;
+ /* border-right: 1px solid #99CCB2; */
+ /* border-left: 1px solid #99CCB2; */
+}
+
+.border-left {
+ border-left: 1px solid #99CCB2;
+}
+
+.border-right {
+ border-right: 1px solid #99CCB2;
+}
+
+tfoot {
+ border-bottom: 2px solid #99CCB2;
+ background: #EAF4EF;
+}
+.item-list tfoot td {
+ padding: 0;
+}
+
+
+.odd {
+ background-color: #eeeeee;
+}
+
+.highlighted {
+ background-color: #cccccc;
+ cursor: pointer;
+}
+
+.filename {
+ width: 50%;
+}
+
+.filename img {
+ margin-right: 5px;
+}
+
+.highlighted .filename {
+ font-weight: bold;
+}
+
+.delete .filename {
+ color: red;
+}
+
+.version {
+ width: 5%;
+}
+.size {
+ width: 5%;
+ whitespace: nowrap;
+}
+.modified {
+ width: 20%;
+}
+.modified-by {
+ width: 25%;
+}
+
+pre {
+ font-size: 9px;
+}
+
+#loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ /* top: 50%; */
+ /* left: 50%; */
+ /* width: 128px; */
+ /* height: 128px; */
+ /* margin-top: -64px; /\* Half the height *\/ */
+ /* margin-left: -64px; /\* Half the width *\/ */
+}
+#loader img {
+ width: 64px;
+ height: 64px;
+}
+
+userName {
+ display: inline-block;
+ /* ? how format user name? */
+}
+
+seqNo {
+ display: inline-block;
+ margin-left: 5px;
+}
+
+.ajax-action {
+ cursor: pointer;
+}
+
+
+
+/* Navigation menu */
+content-nav {
+ display: inline-block;
+ margin: 0;
+ /* width: 100%; */
+ height: 24px;
+
+ background-color: #EAF4EF;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: 1px solid #99CCB2;
+}
+
+content-nav ul {
+ margin: 0;
+ padding: 0px;
+}
+
+content-nav li {
+ list-style-type: none;
+ display: inline;
+ margin: 0;
+}
+
+content-nav li a {
+ display: inline-block;
+ color: #727272;
+ font-size: 14px;
+ line-height: 14px;
+ font-family: sans-serif;
+ text-decoration: none;
+ padding: 5px 30px 5px 30px;
+}
+
+content-nav li a.active, content-nav a:hover { color: #2D9A65; }