Refactor fullscreen button markup, styles, i18n

Replace the old fullscreen localization key and button implementation with an iconized, accessible button and updated styling. Removed fullscreenBtn entries from locale files and updated js/i18n.js to set the fullscreen button's aria-label using tipFullscreen. popup.html now wraps the button in a header and includes an SVG icon; main.css adjusts layout (overflow, sticky header, button positioning, sizing, and hiding in fullscreen) and tweaks editor input spacing for the new layout.
This commit is contained in:
jonny
2026-03-07 21:18:23 +08:00
parent 85cc964836
commit da150b8788
7 changed files with 41 additions and 25 deletions
-3
View File
@@ -164,9 +164,6 @@
"langKorean": {
"message": "한국어"
},
"fullscreenBtn": {
"message": "Fullscreen"
},
"tipFullscreen": {
"message": "Open fullscreen editor"
},
+1 -4
View File
@@ -164,13 +164,10 @@
"langKorean": {
"message": "한국어"
},
"fullscreenBtn": {
"message": "全画面"
},
"tipFullscreen": {
"message": "全画面で編集"
},
"tipResize": {
"message": "ドラッグで拡大/縮小(最小:初期サイズ)"
}
}
}
+2 -5
View File
@@ -158,19 +158,16 @@
"langChineseSimplified": {
"message": "简体中文"
},
"langJapanese": {
"langJapanese": {
"message": "日本語"
},
"langKorean": {
"message": "한국어"
},
"fullscreenBtn": {
"message": "전체화면"
},
"tipFullscreen": {
"message": "전체화면 편집"
},
"tipResize": {
"message": "드래그로 확대/축소(최소: 기본 크기)"
}
}
}
-3
View File
@@ -164,9 +164,6 @@
"langKorean": {
"message": "한국어"
},
"fullscreenBtn": {
"message": "全屏"
},
"tipFullscreen": {
"message": "全屏编辑"
},
+29 -8
View File
@@ -51,9 +51,17 @@ a{color: #555;}
.memo-editor{
position: relative;
resize: none;
overflow: hidden;
overflow: visible;
box-sizing: border-box;
contain: layout paint;
contain: layout;
}
.memo-editor-header{
position: sticky;
top: .5rem;
z-index: 3;
height: 0;
display: block;
}
#editor-resize-handle{
@@ -79,6 +87,10 @@ a{color: #555;}
.body.fullscreen #editor-resize-handle{
display: none;
}
.body.fullscreen #fullscreen{
display: none;
}
.random-item{
border: 1px solid rgb(229,231,235);
color: #666;
@@ -99,19 +111,26 @@ a{color: #555;}
.btns-container{text-align:right;}
.memo-editor #fullscreen{
position: absolute;
right: .5rem;
top: .5rem;
right: 0;
top: 0;
z-index: 2;
border: 1px solid rgb(229,231,235);
border-radius: .25rem;
background-color: rgb(255,255,255);
color: #666;
font-size: .75rem;
line-height: 1.5rem;
padding: 0 .4rem;
line-height: 1;
padding: .25rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: .9;
}
.memo-editor #fullscreen svg{
display: block;
}
.memo-editor #fullscreen:hover{
opacity: 1;
background-color: rgb(243,244,246);
@@ -132,8 +151,10 @@ a{color: #555;}
}
.common-editor-inputer{
padding-top: 1.8rem;
padding-right: 3.2rem;
padding-right: 1.5rem;
height: auto;
display: block;
box-sizing: border-box;
}
.body.fullscreen{
+2 -1
View File
@@ -86,7 +86,8 @@ function applyStaticI18n() {
setText('lockPublic', 'lockPublic')
setText('content_submit_text', 'submitBtn')
setText('fullscreen', 'fullscreenBtn')
const fullscreen = document.getElementById('fullscreen')
if (fullscreen) fullscreen.setAttribute('aria-label', t('tipFullscreen'))
setPlaceholder('hideInput', 'placeHideInput')
setPlaceholder('showInput', 'placeShowInput')
+7 -1
View File
@@ -51,7 +51,13 @@
</div>
<div class="memo-editor">
<button id="fullscreen" class="action-btn" type="button"></button>
<div class="memo-editor-header">
<button id="fullscreen" class="action-btn" type="button" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen" viewBox="0 0 16 16">
<path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
</svg>
</button>
</div>
<textarea
class="common-editor-inputer"
rows="4"