fixed style

resources/library/interactivities/Choisir.wgt/config.xml

@@ -3,7 +3,7 @@
 		xmlns:ub="http://uniboard.mnemis.com/widgets"
         id="http://uniboard.mnemis.com/widgets/webbrowser" 
         version="1.1"
-        width="750"
+        width="780"
         height="400" 
 		ub:resizable="true">   
 		     
@@ -11,6 +11,5 @@
 		<author href="http://www.getuniboard.com"
 	            email="info@mnemis.com">Mnemis SA</author>
 		<description>Choisir widget</description> 
-
  		<content src="index.html"/> 
 </widget>

resources/library/interactivities/Choisir.wgt/css/basic.css

@@ -7,204 +7,177 @@ html, body{
 }
 
 body{
-    background-image: url(../img/bg.png);
+    background-image: url(../images/bg.png);
 }
 
-.toggle_mode{
-    width: 100%;
-    height: 25px;
-    border-bottom: 1px solid #666;
-    background-color: #ccc;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2;
+.toggleButton, .addButton{
+    width: 20px;
+    height: 28px;
+    border: none;
+    background-image: url(../images/greySquare.png);
+    font-weight: bold;
+    font-family: Verdana;
+    color: yellow;
+    cursor: pointer;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
 }
 
-#display_img, #edit_img{
-    width: 15px;
-    height: 15px;
-    margin: 5px 10px;
+.buttonDiv, .addButtonDiv{
+    position: fixed;
+    float: right;
+    z-index: 1;
 }
 
-.green_point{
-    background-image: url(../img/green_point.png);
+.addButtonDiv{
+    display: none;
 }
 
-.red_point{
-    background-image: url(../img/red_point.png);
+.leftDiv{
+    width: 50%;
+    height: 100%;
+    float: left;
+    background-color: black;
+    -webkit-border-top-left-radius: 7px;
+    -webkit-border-bottom-left-radius: 7px;
+    border-top-left-radius: 7px;
+    border-bottom-left-radius: 7px;
 }
 
-#display_text, #edit_text{
-    height: 19px;
-    padding: 3px 0 0 0;
+.rightDiv{
+    width: 50%;
+    height: 100%;
+    float: right;
+    background-color: yellow;
+    -webkit-border-top-right-radius: 7px;
+    -webkit-border-bottom-right-radius: 7px;
+    border-top-right-radius: 7px;
+    border-bottom-right-radius: 7px;
 }
 
-.selected{
-    background-color: #666;
+.shadowDiv{
+    width: 100%;
+    display: none;
+    opacity: 0.7;
+    background-color: black;
+    -webkit-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    border-radius: 3px;
+    z-index: 100;
+}
+
+.popupBack{
+    width: 360px;
+    height: 138px;
+    position: absolute;
+    background-image: url(../images/popupBack.png);
+    background-repeat: repeat;
+    -webkit-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    border-radius: 10px;
+    display: none;
+    z-index: 500;
 }
 
-#display:hover, #edit:hover{
-    background-color: #999;
+.popupContainers{
+    float: left;
+    width: 98%;
+    height: 36px;
+    padding: 5px 3px 5px 0;
+    overflow: hidden;
 }
 
-.cont{
-    width: 100%;
-    border-bottom: 1px solid #666;
-    margin: 0;
-    padding: 0;
-    position: relative;
+.popupLabels{
+    color: yellow;
+    margin: 0 5px;
 }
 
-.sub_cont{
-    width: 100%;
-    padding: 0;
-    margin: 20px 0 0 0;
-    min-height: 45px;
+.expresionInput{
+    float: right;
+    width: 70%;
+    border: none;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    background-color: #ffc;
+    -webkit-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border-radius: 5px;
 }
 
-.imgs_cont{
-    min-width: 170px;
-    min-height: 100px;
-    margin: 0;
-    border-top: 2px dashed #ccc;
-    border-bottom: 2px dashed #ccc;
-    margin-bottom: 5px;
+.popupButtons{
+    float: right;
+    width: 74px;
+    height: 28px;
+    margin: 4px 5px;
+    border: none;
+    background-image: url(../images/greySquare2.png);
+    font-family: Verdana;
+    color: yellow;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border-radius: 5px;
 }
 
-.all_imgs{
-    min-width: 170px;
-    min-height: 70px;
-    margin: 0;
-    border-top: 2px dashed #e6f6ff;
-    border-bottom: 2px dashed #e6f6ff;
-    margin-bottom: 5px;
+.readyTask{
+    margin: 2px;
+    padding: 2px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 100;
 }
 
-.number_cont{
-    width: 40px;
-    height: 33px;
-    margin-left: 40px;
-    margin-right: 10px;
-    background-image: url(../img/circle.png);
-    background-repeat: no-repeat;
-    text-align: center;
+.taskContainer{
+    width: 96%;
+    padding: 2px;
     float: left;
-    font-size: 130%;
-    padding-top: 7px;
+    text-align: center;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
     font-weight: bold;
 }
 
-.text_cont{
-    width: 100%;
-    min-height: 20px;
-    display: block;
-    cursor: pointer;
-}
-
-.close_cont{
-    width: 20px;
-    height: 20px;
-    background-image: url(../img/close_cont.png);
-    cursor: pointer;
+.editContainer{
     position: absolute;
-    top: -15px;
-    left: 5px;
-}
-
-.img_block{
-    width: 150px;
-    height: 60px;
-    margin: 10px;
-    display: inline-table;
-    position: relative;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    -webkit-box-shadow: #ccc -1px 0 4px;
-    box-shadow: #ccc -1px 0 4px;
-    background-color: white;
+    border: 5px solid #c7c7c7;
+    -webkit-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border-radius: 5px;
 }
 
-.close_img{
+.closeItem{
     width: 30px;
     height: 30px;
-    background-repeat: no-repeat;
     position: absolute;
+    background-image: url(../images/icon-close.png);
     right: -15px;
-    background-image: url(../img/close_img.png);
     top: -15px;
-    cursor: pointer;
-}
-
-.add_block{
-    margin: 20px 0 0 20px;
-    width: 110px;
-    height: 25px;
-    background-image: url(../img/add_block.png);
-    background-repeat: no-repeat;
-    padding-left: 40px;
-    padding-top: 5px;
-    cursor: pointer;
-    background-color: #ccc;
-    -webkit-border-radius: 15px;
-    border-radius: 15px;    
-}
-
-.add_img{
-    width: 62px;
-    height: 62px;
-    margin: 10px;
-    cursor: pointer;
-    display: inline-table;
-    position: relative;
-    background-image: url(../img/img_plus.png);
-}
-
-.del_category, .add_category{
-    margin: 0 10px;
-    width: 30px;
-    height: 30px;
-    float: right;
-    cursor: pointer;
-    border: none;
-    background-color: transparent;
-}
-
-.del_category{
-    background-image: url(../img/minus.png);
-}
-
-.add_category{
-    background-image: url(../img/plus.png);
 }
 
-.cat_desc{
-    width: 100%;
-    height: 25px;
-    margin-bottom: 5px;
-    text-align: center;
-    border: none;
-    background-color: #c3e9ff;
-}
-
-.dropHere{
-    background-color: #C3E9FF !important;
-}
-
-.dropBack{
-
-}
-
-.def_cont{
-    background-color: #E6F6FF;
-}
-
-.red_cont{
-    background-color: #f99;
+.rightResize{
+    width: 10px;
+    height: 65%;
+    cursor: e-resize;
+    position: absolute;
+    background: none;
+    right: -10px;
+    top: 20%;
 }
 
-.green_cont{
-    background-color: #9f9;
+.bottomResize{
+    width: 65%;
+    height: 10px;
+    cursor: n-resize;
+    position: absolute;
+    background: none;
+    bottom: -10px;
+    left: 20%;
 }
 
 /*new design*/
@@ -215,23 +188,27 @@ body{
     border-spacing: 0;
 }
 
+.selected{
+    
+}
+
 /*top*/
 
 .b_top_left{
     width: 54px;
-    background-image: url(../img/top_left.png);
+    background-image: url(../images/top_left.png);
     background-repeat: no-repeat;
 }
 
 .b_top_right{
     width: 54px;
-    background-image: url(../img/top_right.png);
+    background-image: url(../images/top_right.png);
     background-repeat: no-repeat;
 }
 
 .b_top_center{
     height: 54px;
-    background-image: url(../img/top.png);
+    background-image: url(../images/top.png);
     background-repeat: repeat-x;
 }
 
@@ -239,18 +216,18 @@ body{
 
 .b_bottom_left{
     width: 54px;
-    background-image: url(../img/bottom_left.png);
+    background-image: url(../images/bottom_left.png);
     background-repeat: no-repeat;
 }
 
 .b_bottom_right{
     width: 54px;
-    background-image: url(../img/bottom_right.png);
+    background-image: url(../images/bottom_right.png);
     background-repeat: no-repeat;
 }
 
 .b_bottom_center{
-    background-image: url(../img/bottom.png);
+    background-image: url(../images/bottom.png);
     background-repeat: repeat-x;
 }
 
@@ -258,13 +235,13 @@ body{
 
 .b_center_left{
     width: 54px;
-    background-image: url(../img/left.png);
+    background-image: url(../images/left.png);
     background-repeat: repeat-y;
 }
 
 .b_center_right{
     width: 54px;
-    background-image: url(../img/right.png);
+    background-image: url(../images/right.png);
     background-repeat: repeat-y;
 }
 
@@ -286,9 +263,9 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display,#wgt_add{
     cursor: pointer;
-    width: 80px;
+    width: 95px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -300,7 +277,7 @@ body{
 #wgt_display{
     width: 100px;
     padding-left: 40px;
-    background-image: url(../img/slate-edit.png);
+    background-image: url(../images/slate-edit.png);
     background-repeat: no-repeat;
     background-position: top 0;
     display: none;
@@ -309,18 +286,26 @@ body{
 #wgt_edit{    
     width: 100px;
     padding-left: 40px;
-    background-image: url(../img/slate-edit.png);
+    background-image: url(../images/slate-edit.png);
     background-repeat: no-repeat;
     background-position: top 0;
 }
 
 #wgt_reload{
     padding-left: 40px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background-image: url(../images/slate-toolbar-reload.png);
     background-repeat: no-repeat;
     background-position: top 0;
 }
 
+#wgt_add{
+    padding-left: 40px;
+    background-image: url(../images/plus.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+    display: none;
+}
+
 .style_select{    
     width: 120px;
     /*font-family: "Lobster13Regular";*/
@@ -328,7 +313,7 @@ body{
     float: right;
     margin: 10px 20px 0 0;
     border-radius: 10px;
-    background-image: url(../img/ar_down.png);
+    background-image: url(../images/ar_down.png);
     background-color: #d4aa79;
     color: #8c5730;
     background-position: 105px 11px;
@@ -338,35 +323,35 @@ body{
 }
 
 .btl_pad{
-    background-image: url(../img/pad-top-left.png) !important;
+    background-image: url(../images/pad-top-left.png) !important;
 }
 
 .btc_pad{
-    background-image: url(../img/pad-top.png) !important;
+    background-image: url(../images/pad-top.png) !important;
 }
 
 .btr_pad{
-    background-image: url(../img/pad-top-right.png) !important;
+    background-image: url(../images/pad-top-right.png) !important;
 }
 
 .bcl_pad{
-    background-image: url(../img/pad-left.png) !important;
+    background-image: url(../images/pad-left.png) !important;
 }
 
 .bcr_pad{
-    background-image: url(../img/pad-right.png) !important;
+    background-image: url(../images/pad-right.png) !important;
 }
 
 .bbl_pad{
-    background-image: url(../img/pad-bottom-left.png) !important;
+    background-image: url(../images/pad-bottom-left.png) !important;
 }
 
 .bbc_pad{
-    background-image: url(../img/pad-bottom.png) !important;
+    background-image: url(../images/pad-bottom.png) !important;
 }
 
 .bbr_pad{
-    background-image: url(../img/pad-bottom-right.png) !important;
+    background-image: url(../images/pad-bottom-right.png) !important;
 }
 
 .pad_color{
@@ -374,15 +359,19 @@ body{
 }
 
 .pad_reload{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+    background-image: url(../images/slate-toolbar-reload-white.png) !important;
 }
 
 .pad_edit{
-    background-image: url(../img/slate-display.png) !important;
+    background-image: url(../images/slate-display.png) !important;
+}
+
+.pad_add{
+    background-image: url(../images/plus-white.png) !important;
 }
 
 .pad_select{
     background-color: black !important;
     color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+    background-image: url(../images/ar_down_white.png) !important;
 }