elink-star
/
luckysheet
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style(style): style 

right click menu style
master
lrz 5 years ago
parent
68e9b86e76
commit
cc3b16ad91
5 changed files with 107 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      src/controllers/constant.js
  2. 11
      src/controllers/keyboard.js
  3. 98
      src/controllers/rowColumnOperation.js
  4. 2
      src/css/luckysheet-core.css
  5. 9
      src/global/cursorPos.js

13
src/controllers/constant.js
View File

@ -287,24 +287,22 @@ function rightclickHTML(){
</div> </div>
<div id="luckysheet-cols-rows-add"> <div id="luckysheet-cols-rows-add">
<div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div> <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div id="luckysheet-top-left-add-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
${rightclick.to} ${rightclick.to}
<span class="luckysheet-cols-rows-shift-left">${rightclick.left}</span> <span class="luckysheet-cols-rows-shift-left">${rightclick.left}</span>
${rightclick.add} ${rightclick.add}
<input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align:center;margin-left:5px;"/> <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align:center;margin-left:5px;"/>
<span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span> <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
<button id="luckysheet-add-lefttop" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div id="luckysheet-bottom-right-add-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
${rightclick.to} ${rightclick.to}
<span class="luckysheet-cols-rows-shift-right">${rightclick.right}</span> <span class="luckysheet-cols-rows-shift-right">${rightclick.right}</span>
${rightclick.add} ${rightclick.add}
<input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/> <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
<span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span> <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
<button id="luckysheet-add-rightbottom" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
<div id="luckysheet-del-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div id="luckysheet-del-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
@ -313,13 +311,12 @@ function rightclickHTML(){
<span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span> <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
</div> </div>
</div> </div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div id="luckysheet-column-row-width-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
<span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span> <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
<span class="luckysheet-cols-rows-shift-size luckysheet-mousedown-cancel">${rightclick.width}</span> <span class="luckysheet-cols-rows-shift-size luckysheet-mousedown-cancel">${rightclick.width}</span>
<input type="number" class="luckysheet-mousedown-cancel rcsize" min="0" max="255" placeholder="${rightclick.number}" value="" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"> <input type="number" class="luckysheet-mousedown-cancel rcsize" min="0" max="255" placeholder="${rightclick.number}" value="" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;">
px px
<button id="luckysheet-rows-cols-changesize" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
</div> </div>
@ -409,7 +406,6 @@ function rightclickHTML(){
${rightclick.to}${rightclick.top}${rightclick.add} ${rightclick.to}${rightclick.top}${rightclick.add}
<input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/> <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
<span class="luckysheet-mousedown-cancel">${rightclick.row}</span> <span class="luckysheet-mousedown-cancel">${rightclick.row}</span>
<button id="luckysheet-addTopRows" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
@ -417,7 +413,6 @@ function rightclickHTML(){
${rightclick.to}${rightclick.bottom}${rightclick.add} ${rightclick.to}${rightclick.bottom}${rightclick.add}
<input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/> <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
<span class="luckysheet-mousedown-cancel">${rightclick.row}</span> <span class="luckysheet-mousedown-cancel">${rightclick.row}</span>
<button id="luckysheet-addBottomRows" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
@ -425,7 +420,6 @@ function rightclickHTML(){
${rightclick.to}${rightclick.left}${rightclick.add} ${rightclick.to}${rightclick.left}${rightclick.add}
<input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/> <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
<span class="luckysheet-mousedown-cancel">${rightclick.column}</span> <span class="luckysheet-mousedown-cancel">${rightclick.column}</span>
<button id="luckysheet-addLeftCols" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
@ -433,7 +427,6 @@ function rightclickHTML(){
${rightclick.to}${rightclick.right}${rightclick.add} ${rightclick.to}${rightclick.right}${rightclick.add}
<input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/> <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
<span class="luckysheet-mousedown-cancel">${rightclick.column}</span> <span class="luckysheet-mousedown-cancel">${rightclick.column}</span>
<button id="luckysheet-addRightCols" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div> </div>
</div> </div>
</div> </div>

11
src/controllers/keyboard.js
View File

@ -907,4 +907,15 @@ export function keyboardInitial(){
}).change(function(){ }).change(function(){
server.saveParam("na", null, $(this).val()); server.saveParam("na", null, $(this).val());
}); });
// 右击菜单的input输入框 敲击Enter一样生效
$("#" + Store.container).add("input.luckysheet-mousedown-cancel").keydown(function (event) {
const element = event.target.closest('.luckysheet-cols-menuitem');
if (typeof(element) != 'undefined' && element != null && event.keyCode === 13){
$(element).trigger('click');
}
})
} }

98
src/controllers/rowColumnOperation.js
View File

@ -929,7 +929,14 @@ export function rowColumnOperationInitial(){
}); });
//向左增加列，向上增加行 //向左增加列，向上增加行
$("#luckysheet-add-lefttop, #luckysheet-add-lefttop_t").click(function (event) { // $("#luckysheet-add-lefttop, #luckysheet-add-lefttop_t").click(function (event) {
$("#luckysheet-top-left-add-selected").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
@ -950,7 +957,7 @@ export function rowColumnOperationInitial(){
let $t = $(this), value = $t.parent().find("input").val(); let $t = $(this), value = $t.find("input").val();
if (!isRealNum(value)) { if (!isRealNum(value)) {
if(isEditMode()){ if(isEditMode()){
alert(locale_info.tipInputNumber); alert(locale_info.tipInputNumber);
@ -977,7 +984,16 @@ export function rowColumnOperationInitial(){
let st_index = Store.luckysheet_select_save[0][Store.luckysheetRightHeadClickIs][0]; let st_index = Store.luckysheet_select_save[0][Store.luckysheetRightHeadClickIs][0];
luckysheetextendtable(Store.luckysheetRightHeadClickIs, st_index, value, "lefttop"); luckysheetextendtable(Store.luckysheetRightHeadClickIs, st_index, value, "lefttop");
}); });
$("#luckysheet-addTopRows").click(function (event) {
// Add the row up, and click the text area to trigger the confirmation instead of clicking the confirmation button to enhance the experience
// $("#luckysheet-addTopRows").click(function (event) {
$("#luckysheetColsRowsHandleAdd_sub .luckysheet-cols-menuitem:first-child").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
@ -996,7 +1012,7 @@ export function rowColumnOperationInitial(){
return; return;
} }
let $t = $(this), value = $t.parent().find("input").val(); let $t = $(this), value = $t.find("input").val();
if (!isRealNum(value)) { if (!isRealNum(value)) {
if(isEditMode()){ if(isEditMode()){
alert(locale_info.tipInputNumber); alert(locale_info.tipInputNumber);
@ -1022,8 +1038,24 @@ export function rowColumnOperationInitial(){
let st_index = Store.luckysheet_select_save[0].row[0]; let st_index = Store.luckysheet_select_save[0].row[0];
luckysheetextendtable('row', st_index, value, "lefttop"); luckysheetextendtable('row', st_index, value, "lefttop");
$("#luckysheetColsRowsHandleAdd_sub").hide();
}) })
$("#luckysheet-addLeftCols").click(function (event) {
// // input输入时阻止冒泡，禁止父级元素的确认事件触发
// $("input.luckysheet-mousedown-cancel").click(function(event) {
// event.stopPropagation;
// })
// $("#luckysheet-addLeftCols").click(function (event) {
$("#luckysheetColsRowsHandleAdd_sub .luckysheet-cols-menuitem:nth-child(3)").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
@ -1042,7 +1074,7 @@ export function rowColumnOperationInitial(){
return; return;
} }
let $t = $(this), value = $t.parent().find("input").val(); let $t = $(this), value = $t.find("input").val();
if (!isRealNum(value)) { if (!isRealNum(value)) {
if(isEditMode()){ if(isEditMode()){
alert(locale_info.tipInputNumber); alert(locale_info.tipInputNumber);
@ -1068,10 +1100,20 @@ export function rowColumnOperationInitial(){
let st_index = Store.luckysheet_select_save[0].column[0]; let st_index = Store.luckysheet_select_save[0].column[0];
luckysheetextendtable('column', st_index, value, "lefttop"); luckysheetextendtable('column', st_index, value, "lefttop");
$("#luckysheetColsRowsHandleAdd_sub").hide();
}) })
//向右增加列，向下增加行 //向右增加列，向下增加行
$("#luckysheet-add-rightbottom, #luckysheet-add-rightbottom_t").click(function (event) { // $("#luckysheet-add-rightbottom, #luckysheet-add-rightbottom_t").click(function (event) {
$("#luckysheet-bottom-right-add-selected").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
@ -1090,7 +1132,7 @@ export function rowColumnOperationInitial(){
return; return;
} }
let $t = $(this), value = $t.parent().find("input").val(); let $t = $(this), value = $t.find("input").val();
if (!isRealNum(value)) { if (!isRealNum(value)) {
if(isEditMode()){ if(isEditMode()){
alert(locale_info.tipInputNumber); alert(locale_info.tipInputNumber);
@ -1118,7 +1160,15 @@ export function rowColumnOperationInitial(){
let st_index = Store.luckysheet_select_save[0][Store.luckysheetRightHeadClickIs][1]; let st_index = Store.luckysheet_select_save[0][Store.luckysheetRightHeadClickIs][1];
luckysheetextendtable(Store.luckysheetRightHeadClickIs, st_index, value, "rightbottom"); luckysheetextendtable(Store.luckysheetRightHeadClickIs, st_index, value, "rightbottom");
}); });
$("#luckysheet-addBottomRows").click(function (event) {
// $("#luckysheet-addBottomRows").click(function (event) {
$("#luckysheetColsRowsHandleAdd_sub .luckysheet-cols-menuitem:nth-child(2)").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
@ -1137,7 +1187,7 @@ export function rowColumnOperationInitial(){
return; return;
} }
let $t = $(this), value = $t.parent().find("input").val(); let $t = $(this), value = $t.find("input").val();
if (!isRealNum(value)) { if (!isRealNum(value)) {
if(isEditMode()){ if(isEditMode()){
alert(locale_info.tipInputNumber); alert(locale_info.tipInputNumber);
@ -1164,8 +1214,17 @@ export function rowColumnOperationInitial(){
let st_index = Store.luckysheet_select_save[0].row[1]; let st_index = Store.luckysheet_select_save[0].row[1];
luckysheetextendtable('row', st_index, value, "rightbottom"); luckysheetextendtable('row', st_index, value, "rightbottom");
$("#luckysheetColsRowsHandleAdd_sub").hide();
}); });
$("#luckysheet-addRightCols").click(function (event) { // $("#luckysheet-addRightCols").click(function (event) {
$("#luckysheetColsRowsHandleAdd_sub .luckysheet-cols-menuitem:nth-child(4)").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
@ -1184,7 +1243,7 @@ export function rowColumnOperationInitial(){
return; return;
} }
let $t = $(this), value = $t.parent().find("input").val(); let $t = $(this), value = $t.find("input").val();
if (!isRealNum(value)) { if (!isRealNum(value)) {
if(isEditMode()){ if(isEditMode()){
alert(locale_info.tipInputNumber); alert(locale_info.tipInputNumber);
@ -1211,6 +1270,9 @@ export function rowColumnOperationInitial(){
let st_index = Store.luckysheet_select_save[0].column[1]; let st_index = Store.luckysheet_select_save[0].column[1];
luckysheetextendtable('column', st_index, value, "rightbottom"); luckysheetextendtable('column', st_index, value, "rightbottom");
$("#luckysheetColsRowsHandleAdd_sub").hide();
}); });
//删除选中行列 //删除选中行列
@ -1587,11 +1649,19 @@ export function rowColumnOperationInitial(){
}); });
//行高列宽设置 //行高列宽设置
$("#luckysheet-rows-cols-changesize").click(function(){ // $("#luckysheet-rows-cols-changesize").click(function(){
$("#luckysheet-column-row-width-selected").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
let size = parseInt($(this).siblings("input[type='number']").val().trim()); // let size = parseInt($(this).siblings("input[type='number']").val().trim());
let size = parseInt($(this).closest('.luckysheet-cols-menuitem').find("input[type='number']").val().trim());
if(size < 0 || size > 255){ if(size < 0 || size > 255){
const locale_info = locale().info; const locale_info = locale().info;

2
src/css/luckysheet-core.css
View File

@ -360,7 +360,7 @@
background-color: #0081f9; background-color: #0081f9;
height: 3px; height: 3px;
width: 55%; width: 55%;
left: 25%; left: 30%;
} }
.luckysheet-toolbar-button-inner-box .luckysheet-icon, .luckysheet-toolbar-button-inner-box .luckysheet-icon,

9
src/global/cursorPos.js
View File

@ -48,11 +48,18 @@ function getCursortPosition(textDom){
} }
function hideMenuByCancel(event){ function hideMenuByCancel(event){
// Right-click the menu in the title bar, and click on the elements whose class is luckysheet-cols-rows-shift-left and luckysheet-cols-rows-shift-right will trigger the hiding of the menu bar. It should be prohibited. Exclude these two elements. There may be more Other elements will also jump here for more testing
if(event.target.classList.contains('luckysheet-cols-rows-shift-left') || event.target.classList.contains('luckysheet-cols-rows-shift-right')){
return;
}
if (!$(event.target).hasClass("luckysheet-mousedown-cancel") && $(event.target).filter("[class*='sp-palette']").length == 0 && $(event.target).filter("[class*='sp-thumb']").length == 0 && $(event.target).filter("[class*='sp-']").length == 0) { if (!$(event.target).hasClass("luckysheet-mousedown-cancel") && $(event.target).filter("[class*='sp-palette']").length == 0 && $(event.target).filter("[class*='sp-thumb']").length == 0 && $(event.target).filter("[class*='sp-']").length == 0) {
$("#luckysheet-rightclick-menu").hide(); $("#luckysheet-rightclick-menu").hide();
$("#luckysheet-cols-h-hover").hide(); $("#luckysheet-cols-h-hover").hide();
$("#luckysheet-cols-menu-btn").hide(); $("#luckysheet-cols-menu-btn").hide();
$("#luckysheet-rightclick-menu").hide(); // $("#luckysheet-rightclick-menu").hide();
$("#luckysheet-sheet-list, #luckysheet-rightclick-sheet-menu, #luckysheet-user-menu").hide(); $("#luckysheet-sheet-list, #luckysheet-rightclick-sheet-menu, #luckysheet-user-menu").hide();
$("body > .luckysheet-filter-menu, body > .luckysheet-filter-submenu, body > .luckysheet-cols-menu").hide(); $("body > .luckysheet-filter-menu, body > .luckysheet-filter-submenu, body > .luckysheet-cols-menu").hide();
//$("body > luckysheet-menuButton").hide(); //$("body > luckysheet-menuButton").hide();

Write Preview
Loading…
Cancel
Save