mirror of
https://github.com/Jonnyan404/memos-bber.git
synced 2026-04-24 19:48:37 +09:00
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:
@@ -164,9 +164,6 @@
|
||||
"langKorean": {
|
||||
"message": "한국어"
|
||||
},
|
||||
"fullscreenBtn": {
|
||||
"message": "Fullscreen"
|
||||
},
|
||||
"tipFullscreen": {
|
||||
"message": "Open fullscreen editor"
|
||||
},
|
||||
|
||||
@@ -164,13 +164,10 @@
|
||||
"langKorean": {
|
||||
"message": "한국어"
|
||||
},
|
||||
"fullscreenBtn": {
|
||||
"message": "全画面"
|
||||
},
|
||||
"tipFullscreen": {
|
||||
"message": "全画面で編集"
|
||||
},
|
||||
"tipResize": {
|
||||
"message": "ドラッグで拡大/縮小(最小:初期サイズ)"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -158,19 +158,16 @@
|
||||
"langChineseSimplified": {
|
||||
"message": "简体中文"
|
||||
},
|
||||
"langJapanese": {
|
||||
"langJapanese": {
|
||||
"message": "日本語"
|
||||
},
|
||||
"langKorean": {
|
||||
"message": "한국어"
|
||||
},
|
||||
"fullscreenBtn": {
|
||||
"message": "전체화면"
|
||||
},
|
||||
"tipFullscreen": {
|
||||
"message": "전체화면 편집"
|
||||
},
|
||||
"tipResize": {
|
||||
"message": "드래그로 확대/축소(최소: 기본 크기)"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -164,9 +164,6 @@
|
||||
"langKorean": {
|
||||
"message": "한국어"
|
||||
},
|
||||
"fullscreenBtn": {
|
||||
"message": "全屏"
|
||||
},
|
||||
"tipFullscreen": {
|
||||
"message": "全屏编辑"
|
||||
},
|
||||
|
||||
+29
-8
@@ -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
@@ -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
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user