mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-03 16:51:40 +09:00
Merge pull request #1546 from kijin/pr/editor-dark-mode
에디터에서 다크모드 자동 감지
This commit is contained in:
Kijin Sung
GitHub
commit
cfca3a11fd
12 changed files with 126 additions and 22 deletions
|
|
@ -231,6 +231,7 @@ class editorAdminController extends editor
|
|||
$config->content_word_break = $configVars->content_word_break;
|
||||
$config->content_word_break = in_array($config->content_word_break, array('normal', 'keep-all', 'break-all', 'none')) ? $config->content_word_break : 'normal';
|
||||
$config->enable_autosave = $configVars->enable_autosave ?: 'Y';
|
||||
$config->auto_dark_mode = $configVars->auto_dark_mode ?: 'Y';
|
||||
$config->allow_html = $configVars->allow_html ?: 'Y';
|
||||
$config->autoinsert_types = array();
|
||||
foreach ($configVars->autoinsert_types as $type)
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ class editor extends ModuleObject
|
|||
'content_paragraph_spacing' => '0px',
|
||||
'content_word_break' => 'normal',
|
||||
'enable_autosave' => 'Y',
|
||||
'auto_dark_mode' => 'Y',
|
||||
'allow_html' => 'Y',
|
||||
'editor_focus' => 'N',
|
||||
'autoinsert_types' => array('image' => true, 'audio' => true, 'video' => true),
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ class editorController extends editor
|
|||
|
||||
$config->content_font_size = trim($vars->content_font_size);
|
||||
$config->enable_autosave = $vars->enable_autosave ?: 'Y';
|
||||
$config->auto_dark_mode = $vars->auto_dark_mode ?: 'Y';
|
||||
$config->allow_html = $vars->allow_html ?: 'Y';
|
||||
|
||||
// Apply module-specific permissions.
|
||||
|
|
|
|||
|
|
@ -203,6 +203,7 @@ class editorModel extends editor
|
|||
// Set allow html and focus
|
||||
Context::set('allow_html', ($option->allow_html === false || $option->allow_html === 'N') ? false : true);
|
||||
Context::set('editor_focus', toBool($option->editor_focus));
|
||||
Context::set('editor_auto_dark_mode', $option->auto_dark_mode !== 'N');
|
||||
|
||||
// Load editor components.
|
||||
if($option->enable_component)
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ $lang->enable_default_component_grant = 'Permission to use default components';
|
|||
$lang->enable_extra_component_grant = 'Permission to use extra components';
|
||||
$lang->enable_html_grant = 'Permission to edit HTML';
|
||||
$lang->enable_autosave = 'Enable Auto-Save';
|
||||
$lang->editor_auto_dark_mode = 'Automatic dark mode';
|
||||
$lang->allow_html = 'allow HTML';
|
||||
$lang->height_resizable = 'Height Resizable';
|
||||
$lang->editor_height = 'Height of Editor';
|
||||
|
|
@ -83,6 +84,7 @@ $lang->about_default_editor_settings = 'Follow the default settings from the Edi
|
|||
$lang->about_content_font = 'Please use comma for multiple input.';
|
||||
$lang->about_content_font_size = 'Please input units such as px or em.';
|
||||
$lang->about_enable_autosave = 'You may decide whether the auto-save function will be used.';
|
||||
$lang->about_editor_auto_dark_mode = 'Automatically switch to a dark skin if dark mode is used.';
|
||||
$lang->edit['fontname'] = 'Font';
|
||||
$lang->edit['fontsize'] = 'Size';
|
||||
$lang->edit['use_paragraph'] = 'Paragraph Function';
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ $lang->enable_default_component_grant = '기본 컴포넌트 사용 권한';
|
|||
$lang->enable_extra_component_grant = '확장 컴포넌트 사용 권한';
|
||||
$lang->enable_html_grant = 'HTML 편집 권한';
|
||||
$lang->enable_autosave = '자동저장 사용';
|
||||
$lang->editor_auto_dark_mode = '다크모드 자동 감지';
|
||||
$lang->allow_html = 'HTML 허용';
|
||||
$lang->height_resizable = '높이 조절 가능';
|
||||
$lang->editor_height = '에디터 높이';
|
||||
|
|
@ -81,6 +82,7 @@ $lang->about_default_editor_settings = '에디터 모듈의 기본 설정을 따
|
|||
$lang->about_content_font = '콤마(,)로 여러 폰트를 지정할 수 있습니다.';
|
||||
$lang->about_content_font_size = '12px, 1em등 단위까지 포함해서 입력해주세요.';
|
||||
$lang->about_enable_autosave = '글 작성 시 자동 저장 기능을 활성화 시킬 수 있습니다.';
|
||||
$lang->about_editor_auto_dark_mode = '다크모드 사용시 자동으로 어두운 스킨을 사용합니다.';
|
||||
$lang->edit['fontname'] = '글꼴';
|
||||
$lang->edit['fontsize'] = '크기';
|
||||
$lang->edit['use_paragraph'] = '문단기능';
|
||||
|
|
|
|||
|
|
@ -33,18 +33,81 @@
|
|||
}
|
||||
|
||||
.light_dark(@cs) when (@cs = moono-dark) {
|
||||
background-color: #494949;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
.light_dark(@cs) when not (@cs = moono-dark) {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
&.color_scheme_dark {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.light_dark_top(@cs) when (@cs = moono-dark) {
|
||||
border-bottom-color: #1b1b1b;
|
||||
body & {
|
||||
border-color: #555;
|
||||
&.cke_bottom {
|
||||
background: #333;
|
||||
.cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.light_dark_top(@cs) when not (@cs = moono-dark) {
|
||||
.color_scheme_dark & {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
.cke_button_on {
|
||||
background: #000;
|
||||
border-color: #555;
|
||||
}
|
||||
.cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label {
|
||||
filter: invert(1);
|
||||
}
|
||||
&.cke_dialog_body {
|
||||
background: #555;
|
||||
}
|
||||
.cke_dialog_title {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-bottom-color: #555;
|
||||
.cke_dialog_close_button {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.cke_dialog_tabs {
|
||||
background: #555;
|
||||
.cke_dialog_tab {
|
||||
background: #555;
|
||||
color: #999;
|
||||
border-color: #777;
|
||||
}
|
||||
.cke_dialog_tab_selected {
|
||||
background: #777;
|
||||
color: #fff;
|
||||
border-color: #777;
|
||||
}
|
||||
}
|
||||
.cke_dialog_contents {
|
||||
background: #555;
|
||||
border-top-color: #777;
|
||||
label {
|
||||
color: #fff;
|
||||
}
|
||||
select, input, .ImagePreviewBox td {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: #777;
|
||||
}
|
||||
}
|
||||
.cke_dialog_footer {
|
||||
background: #333;
|
||||
border-top-color: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -66,31 +129,36 @@ html {
|
|||
p.editor_autosaved_message.autosave_message {
|
||||
display:none;
|
||||
background: #e0e0e0;
|
||||
color: #000;
|
||||
padding: 10px;
|
||||
margin:0;
|
||||
line-height:1.2;
|
||||
.color_scheme_dark & {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.cke_reset {
|
||||
span {
|
||||
&.cke_top {
|
||||
.light_dark_top(@colorset);
|
||||
a {
|
||||
&:hover, &:focus {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.cke_combo__fontsize {
|
||||
.cke_combo_button {
|
||||
width: 64px;
|
||||
}
|
||||
.cke_combo_text {
|
||||
width: 30px;
|
||||
.cke_top, .cke_bottom {
|
||||
.light_dark_top(@colorset);
|
||||
a {
|
||||
&:hover, &:focus {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cke_combo__fontsize {
|
||||
.cke_combo_button {
|
||||
width: 64px;
|
||||
}
|
||||
.cke_combo_text {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cke_dialog_body {
|
||||
.light_dark_top(@colorset);
|
||||
}
|
||||
|
||||
|
||||
.xe_content.editable, .rhymix_content.editable, .cke_wysiwyg_div {
|
||||
.cont_font(@content_font);
|
||||
|
|
@ -125,4 +193,4 @@ p.editor_autosaved_message.autosave_message {
|
|||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,11 +92,22 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
|
|||
return val + "/" + val + "px";
|
||||
}).join(";");
|
||||
|
||||
// Apply auto dark mode.
|
||||
var editor_skin = '{$colorset}';
|
||||
var editor_color = null;
|
||||
<!--@if($editor_auto_dark_mode)-->
|
||||
if (getColorScheme() === 'dark') {
|
||||
if (editor_skin !== 'moono-lisa' ) {
|
||||
editor_skin = 'moono-dark';
|
||||
}
|
||||
}
|
||||
<!--@endif-->
|
||||
|
||||
// Initialize CKEditor settings.
|
||||
var settings = {
|
||||
ckeconfig: {
|
||||
height: '{$editor_height}',
|
||||
skin: '{$colorset}',
|
||||
skin: editor_skin,
|
||||
contentsCss: {json_encode($css_file_list)},
|
||||
xe_editor_sequence: {$editor_sequence},
|
||||
font_defaultLabel: default_font_name,
|
||||
|
|
@ -106,7 +117,7 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
|
|||
toolbarCanCollapse: true,
|
||||
allowedContent: true,
|
||||
startupFocus: {json_encode($editor_focus)},
|
||||
language: "{str_replace('jp','ja',$lang_type)}"
|
||||
language: "{str_replace('jp','ja',$lang_type)}",
|
||||
},
|
||||
loadXeComponent: true,
|
||||
enableToolbar: true,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
background: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
&.dark {
|
||||
&.dark, .color_scheme_dark & {
|
||||
border-color: #111;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -256,6 +256,14 @@
|
|||
<p class="x_help-block">{$lang->about_enable_autosave}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="x_control-group">
|
||||
<label class="x_control-label">{$lang->editor_auto_dark_mode}</label>
|
||||
<div class="x_controls">
|
||||
<label class="x_inline"><input type="radio" name="auto_dark_mode" value="Y" checked="checked"|cond="$editor_config->auto_dark_mode != 'N'" /> {$lang->cmd_yes}</label>
|
||||
<label class="x_inline"><input type="radio" name="auto_dark_mode" value="N" checked="checked"|cond="$editor_config->auto_dark_mode == 'N'" /> {$lang->cmd_no}</label>
|
||||
<p class="x_help-block">{$lang->about_editor_auto_dark_mode}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="x_control-group">
|
||||
<label class="x_control-label">{$lang->allow_html}</label>
|
||||
<div class="x_controls">
|
||||
|
|
|
|||
|
|
@ -167,6 +167,14 @@
|
|||
<p class="x_help-inline">{$lang->about_enable_autosave}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="editor_skin">
|
||||
<th scope="row" style="text-align:right">{$lang->editor_auto_dark_mode}</th>
|
||||
<td colspan="2">
|
||||
<label class="x_inline"><input type="radio" name="auto_dark_mode" value="Y" checked="checked"|cond="$editor_config->auto_dark_mode != 'N'" /> {$lang->cmd_yes}</label>
|
||||
<label class="x_inline"><input type="radio" name="auto_dark_mode" value="N" checked="checked"|cond="$editor_config->auto_dark_mode == 'N'" /> {$lang->cmd_no}</label>
|
||||
<p class="x_help-inline">{$lang->about_editor_auto_dark_mode}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="editor_skin">
|
||||
<th scope="row" style="text-align:right">{$lang->allow_html}</th>
|
||||
<td colspan="2">
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
|
|||
var fo_obj = getCkFormInstance(editor_sequence);
|
||||
|
||||
this.ckeconfig = $.extend({}, default_ckeconfig, opts.ckeconfig || {});
|
||||
this.ckeconfig.bodyClass = this.ckeconfig.bodyClass + ' color_scheme_' + getColorScheme();
|
||||
|
||||
this.editor_sequence = data.editorSequence;
|
||||
$form.attr('editor_sequence', data.editorSequence);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue