Author: admitriev Date: 2008-03-07 03:21:02 -0500 (Fri, 07 Mar 2008) New Revision: 6612 Modified: management/design/inplaceInput/design/inplaceInput.html management/design/inplaceSelect/design/inplaceSelect.html Log: Modified: management/design/inplaceInput/design/inplaceInput.html =================================================================== --- management/design/inplaceInput/design/inplaceInput.html 2008-03-06 20:48:48 UTC (rev 6611) +++ management/design/inplaceInput/design/inplaceInput.html 2008-03-07 08:21:02 UTC (rev 6612) @@ -23,12 +23,6 @@ .is_strut{width : 100px; height : 1px} -.is_view_block{position : relative; width : 100%;; padding : 0px 0px 0px 0px; border : 0px; margin : 0px;} -.is_edit_state_block{background : #FBFF8E/*editBackgroundColor*/; position : relative; width : 100%;; padding : 0px 0px 0px 0px; border : 0px; margin : 0px;} -.is_field_block{background : #FBFF8E/*editBackgroundColor*/; padding : 0px 0px 0px 0px; border : 0px; margin : 0px; width : 100%;} - - - .is_edit_state_block_div{position : relative;} .is_view_block_div{position : relative; padding : 2px 2px 2px 5px; border : 0px; margin :0px;} .is_edit_block_div{background : #FBFF8E/*editBackgroundColor*/; position : relative; padding : 0px; border : 0px; margin : 2px 2px 2px 5px;} @@ -124,63 +118,8 @@ </fieldset> -<fieldset><legend>Edit State (block variant 1)</legend><br><br> -<Table class="tab_example" border="0" cellpadding="0" cellspacing="0"> - <tr> - <td> - <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> - </td> - <td> - <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> - </td> - </tr> - <tr> - <td> - <div class="is_edit_state_block"> - <input type="Text" value="Edit mode" class="is_field_block"><div class="is_btn_set_block"> - <div class="is_shadow"> - <table cellpadding="0" cellspacing="0" border="0" class="is_shadow_size"> - <tr> - <td class="is_shadow_tl"> - <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> - </td> - <td class="is_shadow_tr"> - <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> - </td> - </tr> - <tr> - <td class="is_shadow_bl"> - <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> - </td> - <td class="is_shadow_br"> - <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> - </td> - </tr> - </table> - </div> - <div style="position : relative"> - <input type="image" src="images/ico_ok.gif" class="is_btn" onmousedown="this.className='is_btn_press'" onmouseout="this.className='is_btn'" onmouseup="this.className='is_btn'"><input type="image" src="images/ico_cancel.gif" class="is_btn" onmousedown="this.className='is_btn_press'" onmouseout="this.className='is_btn'" onmouseup="this.className='is_btn'"> - </div> - </div> - </div> - </td> - <td> - <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> - </td> - </tr> - <tr> - <td> - <input type="Text" class="is_view_block" readonly="readonly" value="View mode"> - </td> - <td> - <input type="Text" class="is_view_block is_changed_state" readonly="readonly" value="View mode"> - </td> - </tr> -</table> -</fieldset> - -<fieldset><legend>Edit State (variant 2)</legend><br><br> +<fieldset><legend>Edit State (block)</legend><br><br> <Table class="tab_example" border="0" cellpadding="0" cellspacing="0"> <tr> <td> @@ -229,7 +168,7 @@ <div class="is_view_block_div">View mode</div> </td> <td> - <div class="is_view_block_div">View mode</div> + <div class="is_view_block_div is_changed_state">View mode</div> </td> </tr> </table> Modified: management/design/inplaceSelect/design/inplaceSelect.html =================================================================== --- management/design/inplaceSelect/design/inplaceSelect.html 2008-03-06 20:48:48 UTC (rev 6611) +++ management/design/inplaceSelect/design/inplaceSelect.html 2008-03-07 08:21:02 UTC (rev 6612) @@ -8,6 +8,8 @@ body{padding : 30px;} fieldset{padding : 30px; border : 1px solid #c0c0c0;} legend{font-weight : bold} +.tab_example {width : 700px; border-top:1px solid #c0c0c0; border-left:1px solid #c0c0c0;} +.tab_example td{width : 350px; border-bottom:1px solid #c0c0c0; border-right:1px solid #c0c0c0;} .insel_default_state{white-space : nowrap; background-color : #f1f1f1/*editorBackgroundColor*/; border-bottom : 1px dashed #000000/*generalTextColor*/; padding-left : 3px; padding-right : 3px;} @@ -28,14 +30,16 @@ padding : 0px; margin : 0px;} +.insel_arrow_block{background : #FEFFDA/*editBackgroundColor*/; padding : 0px 0px 0px 0px; border : 0px; margin : 0px; width : 12px; position : absolute; top:1px; right : 0px;background-image:url(images/mark_list.gif); background-position : center right; background-repeat : no-repeat;} +.insel_btn_set_block{ position : absolute; top:0px; right : -13px; white-space : nowrap} -.insel_btn_set{ position : absolute; top:0px; left : 114px; white-space : nowrap} +.insel_btn_set{ position : absolute; top:0px; left : 114px; white-space : nowrap} .insel_shadow{ top:0; left:0; position : absolute;} .insel_shadow_size{ width : 34px; height : 16px;} -.insel_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} -.insel_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} -.insel_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} -.insel_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} +.insel_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left; border : 0px !important} +.insel_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right; border : 0px !important} +.insel_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left; border : 0px !important} +.insel_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right; border : 0px !important} .cb_list_cord{ position : relative; font-size : 0px;d!isplay : none}/*DDL is hidden!!!!!*/ .cb_list_scroll{ overflow : auto; height : 100px;} .cb_list_position{ position : absolute; top:1px; left:0px;} @@ -45,13 +49,19 @@ .cb_font{ font-size : 11px/*generalSizeFont*/; font-family : arial/*generalFamilyFont*/; color : #000000/*generalTextColor*/} .cb_select{ padding : 1px; background-color: #4a75b5; border : 1px dotted #4a75b5; color: white;/*generalTextColor*/} -.cb_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} -.cb_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} -.cb_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} -.cb_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} +.cb_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left; border : 0px !important} +.cb_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right; border : 0px !important} +.cb_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left; border : 0px !important} +.cb_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right; border : 0px !important} - +.insel_edit_state_block_div{position : relative;} +.insel_view_block_div{position : relative; padding : 2px 2px 2px 5px; border : 0px; margin :0px;} +.insel_edit_block_div{background : #FEFFDA/*editBackgroundColor*/; position : relative; padding : 0px; border : 0px; margin : 2px 2px 2px 5px;} +.insel_field_block_div{background : #FEFFDA/*editBackgroundColor*/;padding :0px; border : 0px; margin : 0px 0px 0px 0px; width : 344px;} +.insel_edit_block_bg_div{ position : absolute; top:0px; left : 0px; background : #FEFFDA/*editBackgroundColor*/; width : 349px; height : 17px; text-align : right} + + </style> </head> @@ -157,5 +167,106 @@ </fieldset> +<fieldset><legend>Edit State (block)</legend><br><br> +<Table class="tab_example" border="0" cellpadding="0" cellspacing="0"> + <tr> + <td> + <div class="insel_view_block_div">View mode</div> + </td> + <td> + <div class="insel_view_block_div">View mode</div> + </td> + </tr> + <tr> + <td> + <div class="insel_edit_state_block_div"> + <div class="insel_view_block_div">View mode</div><div class="insel_edit_block_bg_div"><input type="Text" value="Edit mode" class="insel_field_block_div"></div><div class="insel_btn_set_block"> + <div class="insel_btn_set_block"> + <div class="insel_shadow"> + <table cellpadding="0" cellspacing="0" border="0" class="insel_shadow_size"> + <tr> + <td class="insel_shadow_tl"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + <td class="insel_shadow_tr"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + </tr> + <tr> + <td class="insel_shadow_bl"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + <td class="insel_shadow_br"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + </tr> + </table> + </div> + <div style="position : relative"> + <input type="image" src="images/ico_ok.gif" class="insel_btn" onmousedown="this.className='insel_btn_press'" onmouseout="this.className='insel_btn'" onmouseup="this.className='insel_btn'"><input type="image" src="images/ico_cancel.gif" class="insel_btn" onmousedown="this.className='insel_btn_press'" onmouseout="this.className='insel_btn'" onmouseup="this.className='insel_btn'"> + </div> + </div> + </div> + <input readonly="readonly" type="Text" value="" class="insel_arrow_block"> + <div style="position : relative"> + <div class="cb_width_list" style="position : absolute; height : 100px; left : -1px; top: -1px"> + <iframe class="cb_width_list cb_list_scroll cb_list_position" frameborder="0"></iframe> + <div class="cb_shadow"> + <table cellpadding="0" cellspacing="0" border="0" width="257" height="109"> + <tr> + <td class="cb_shadow_tl"> + <img src="images/spacer.gif" width="10" height="1" alt="" border="0"><br> + </td> + <td class="cb_shadow_tr"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + </tr> + <tr> + <td class="cb_shadow_bl"> + <img src="images/spacer.gif" width="1" height="10" alt="" border="0"><br> + </td> + <td class="cb_shadow_br"> + <img src="images/spacer.gif" width="10" height="10" alt="" border="0"><br> + </td> + </tr> + </table> + </div> + <div class="cb_list_position"> + <div class="cb_list_decoration"> + <div class="cb_list_scroll cb_width_list"> + <div class="cb_option cb_font">Option 1</div> + <div class="cb_option cb_font">Option 2</div> + <div class="cb_option cb_font">Option 3</div> + <div class="cb_option cb_font">Option 4</div> + <div class="cb_option cb_font cb_select">Opt</div> + <div class="cb_option cb_font">Option 6</div> + <div class="cb_option cb_font">Option 7</div> + <div class="cb_option cb_font">Option 8</div> + <div class="cb_option cb_font">Option 9</div> + <div class="cb_option cb_font">Option 0</div> + </div> + </div> + </div> + + </div> + </div> + </div> + </td> + <td> + <div class="insel_view_block_div">View mode</div> + </td> + </tr> + <tr> + <td> + <div class="insel_view_block_div">View mode</div> + </td> + <td> + <div class="insel_view_block_div insel_changed_state">View mode</div> + </td> + </tr> +</table> +</fieldset> + + </body> </html>