From cc3b16ad91f3703c3a0c118db4c77a29edd462b9 Mon Sep 17 00:00:00 2001 From: lrz <1414556676@qq.com> Date: Mon, 28 Sep 2020 17:36:14 +0800 Subject: [PATCH] style(style): style right click menu style --- src/controllers/constant.js | 13 +--- src/controllers/keyboard.js | 11 +++ src/controllers/rowColumnOperation.js | 98 +++++++++++++++++++++++---- src/css/luckysheet-core.css | 2 +- src/global/cursorPos.js | 9 ++- 5 files changed, 107 insertions(+), 26 deletions(-) diff --git a/src/controllers/constant.js b/src/controllers/constant.js index 7901821..2ff7939 100644 --- a/src/controllers/constant.js +++ b/src/controllers/constant.js @@ -287,24 +287,22 @@ function rightclickHTML(){
-
+
${rightclick.to} ${rightclick.left} ${rightclick.add} ${rightclick.column} -
-
+
${rightclick.to} ${rightclick.right} ${rightclick.add} ${rightclick.column} -
@@ -313,13 +311,12 @@ function rightclickHTML(){ ${rightclick.column}
-
+
${rightclick.column} ${rightclick.width} px -
@@ -409,7 +406,6 @@ function rightclickHTML(){ ${rightclick.to}${rightclick.top}${rightclick.add} ${rightclick.row} -
@@ -417,7 +413,6 @@ function rightclickHTML(){ ${rightclick.to}${rightclick.bottom}${rightclick.add} ${rightclick.row} -
@@ -425,7 +420,6 @@ function rightclickHTML(){ ${rightclick.to}${rightclick.left}${rightclick.add} ${rightclick.column} -
@@ -433,7 +427,6 @@ function rightclickHTML(){ ${rightclick.to}${rightclick.right}${rightclick.add} ${rightclick.column} -
diff --git a/src/controllers/keyboard.js b/src/controllers/keyboard.js index 80a5263..a7ad8e9 100644 --- a/src/controllers/keyboard.js +++ b/src/controllers/keyboard.js @@ -907,4 +907,15 @@ export function keyboardInitial(){ }).change(function(){ 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'); + } + + }) } \ No newline at end of file diff --git a/src/controllers/rowColumnOperation.js b/src/controllers/rowColumnOperation.js index 7dd6965..1b2f34a 100644 --- a/src/controllers/rowColumnOperation.js +++ b/src/controllers/rowColumnOperation.js @@ -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(); 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(isEditMode()){ alert(locale_info.tipInputNumber); @@ -977,7 +984,16 @@ export function rowColumnOperationInitial(){ let st_index = Store.luckysheet_select_save[0][Store.luckysheetRightHeadClickIs][0]; 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(); luckysheetContainerFocus(); @@ -996,7 +1012,7 @@ export function rowColumnOperationInitial(){ return; } - let $t = $(this), value = $t.parent().find("input").val(); + let $t = $(this), value = $t.find("input").val(); if (!isRealNum(value)) { if(isEditMode()){ alert(locale_info.tipInputNumber); @@ -1022,8 +1038,24 @@ export function rowColumnOperationInitial(){ let st_index = Store.luckysheet_select_save[0].row[0]; 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(); luckysheetContainerFocus(); @@ -1042,7 +1074,7 @@ export function rowColumnOperationInitial(){ return; } - let $t = $(this), value = $t.parent().find("input").val(); + let $t = $(this), value = $t.find("input").val(); if (!isRealNum(value)) { if(isEditMode()){ alert(locale_info.tipInputNumber); @@ -1068,10 +1100,20 @@ export function rowColumnOperationInitial(){ let st_index = Store.luckysheet_select_save[0].column[0]; 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(); luckysheetContainerFocus(); @@ -1090,7 +1132,7 @@ export function rowColumnOperationInitial(){ return; } - let $t = $(this), value = $t.parent().find("input").val(); + let $t = $(this), value = $t.find("input").val(); if (!isRealNum(value)) { if(isEditMode()){ alert(locale_info.tipInputNumber); @@ -1118,7 +1160,15 @@ export function rowColumnOperationInitial(){ let st_index = Store.luckysheet_select_save[0][Store.luckysheetRightHeadClickIs][1]; 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(); luckysheetContainerFocus(); @@ -1137,7 +1187,7 @@ export function rowColumnOperationInitial(){ return; } - let $t = $(this), value = $t.parent().find("input").val(); + let $t = $(this), value = $t.find("input").val(); if (!isRealNum(value)) { if(isEditMode()){ alert(locale_info.tipInputNumber); @@ -1164,8 +1214,17 @@ export function rowColumnOperationInitial(){ let st_index = Store.luckysheet_select_save[0].row[1]; 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(); luckysheetContainerFocus(); @@ -1184,7 +1243,7 @@ export function rowColumnOperationInitial(){ return; } - let $t = $(this), value = $t.parent().find("input").val(); + let $t = $(this), value = $t.find("input").val(); if (!isRealNum(value)) { if(isEditMode()){ alert(locale_info.tipInputNumber); @@ -1211,6 +1270,9 @@ export function rowColumnOperationInitial(){ let st_index = Store.luckysheet_select_save[0].column[1]; 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(); 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){ const locale_info = locale().info; diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css index f9c6ba1..85325b6 100644 --- a/src/css/luckysheet-core.css +++ b/src/css/luckysheet-core.css @@ -360,7 +360,7 @@ background-color: #0081f9; height: 3px; width: 55%; - left: 25%; + left: 30%; } .luckysheet-toolbar-button-inner-box .luckysheet-icon, diff --git a/src/global/cursorPos.js b/src/global/cursorPos.js index 29fd6a7..74dad30 100644 --- a/src/global/cursorPos.js +++ b/src/global/cursorPos.js @@ -48,11 +48,18 @@ function getCursortPosition(textDom){ } 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) { $("#luckysheet-rightclick-menu").hide(); $("#luckysheet-cols-h-hover").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(); $("body > .luckysheet-filter-menu, body > .luckysheet-filter-submenu, body > .luckysheet-cols-menu").hide(); //$("body > luckysheet-menuButton").hide();