Skip to content

Commit

Permalink
:IBX-6843: Focus mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasOsti
lucasOsti committed Oct 26, 2023
1 parent 69e8a2c commit 2f91394
Show file tree
Hide file tree
Showing 7 changed files with 265 additions and 3 deletions.
1 change: 1 addition & 0 deletions src/bundle/Resources/encore/ibexa.js.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const layout = [
path.resolve(__dirname, '../public/js/scripts/admin.form.autosubmit.js'),
path.resolve(__dirname, '../public/js/scripts/admin.anchor.navigation'),
path.resolve(__dirname, '../public/js/scripts/admin.context.menu'),
path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
path.resolve(__dirname, '../public/js/scripts/admin.table.js'),
Expand Down
61 changes: 61 additions & 0 deletions src/bundle/Resources/public/js/scripts/admin.focus.mode.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
(function (global, doc, ibexa) {

Check failure on line 1 in src/bundle/Resources/public/js/scripts/admin.focus.mode.js

View workflow job for this annotation

GitHub Actions / Frontend build test 

'ibexa' is defined but never used
let activeFieldEdit = null;
const ENABLE_FOCUS_MODE_EVENT_NAME = 'ibexa-focus-mode:on';
const DISABLE_FOCUS_MODE_EVENT_NAME = 'ibexa-focus-mode:off';
const focusModeEnableBtns = doc.querySelectorAll('.ibexa-field-edit__focus-mode-control-btn--enable');
const focusModeDisbaleBtns = doc.querySelectorAll('.ibexa-field-edit__focus-mode-control-btn--disable');
const changeFocusModeState = (active) => {
if (!activeFieldEdit) {
return;
}

const dispatchEventName = active ? ENABLE_FOCUS_MODE_EVENT_NAME : DISABLE_FOCUS_MODE_EVENT_NAME;
const editorSourceElement = activeFieldEdit.querySelector('.ibexa-data-source__richtext');
const editorInstance = editorSourceElement.ckeditorInstance;

activeFieldEdit.classList.toggle('ibexa-field-edit--focus-mode-active', active);
editorInstance.set('focusModeActive', active);

doc.body.dispatchEvent(
new CustomEvent(dispatchEventName, {
detail: {
activeFieldEdit,
},
}),
);

if (!active) {
activeFieldEdit = null;
}
};
const watchDisableFocusModeByKeyboard = (event) => {
if (event.key === 'Escape' || event.keyCode === 27) {
changeFocusModeState(false);
}
};

focusModeEnableBtns.forEach((btn) => {
btn.addEventListener(
'click',
({ currentTarget }) => {
activeFieldEdit = currentTarget.closest('.ibexa-field-edit');
changeFocusModeState(true);
},
false,
);
});
focusModeDisbaleBtns.forEach((btn) => {
btn.addEventListener('click', () => changeFocusModeState(false), false);
});

doc.body.addEventListener(
ENABLE_FOCUS_MODE_EVENT_NAME,
() => doc.body.addEventListener('keydown', watchDisableFocusModeByKeyboard),
false,
);
doc.body.addEventListener(
DISABLE_FOCUS_MODE_EVENT_NAME,
() => doc.body.removeEventListener('keydown', watchDisableFocusModeByKeyboard),
false,
);
})(window, window.document, window.ibexa);
10 changes: 10 additions & 0 deletions src/bundle/Resources/public/scss/_alerts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,4 +199,14 @@
}
}
}

&--complementary {
color: $ibexa-color-complementary-700;
background-color: $ibexa-color-complementary-100;
border-color: $ibexa-color-complementary;

.ibexa-icon {
fill: $ibexa-color-complementary-700;
}
}
}
131 changes: 131 additions & 0 deletions src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,35 @@
color: $ibexa-color-danger;
}

&__focus-mode {
display: flex;
flex-direction: column;
height: auto;
background: $ibexa-color-white;
border-radius: $ibexa-border-radius $ibexa-border-radius 0 0;
}

&__focus-mode-notice-container {
display: none;
}

&__focus-mode-control-container {
display: flex;
align-self: flex-end;
}

&__focus-mode-control-btn {
align-self: flex-end;

&--enable {
display: inline-flex;
}

&--disable {
display: none;
}
}

.ibexa-input-text-wrapper {
width: auto;
}
Expand Down Expand Up @@ -59,6 +88,108 @@
}
}
}

&--has-focus-mode {
display: flex;
flex-wrap: wrap;

.ibexa-field-edit {
&__focus-mode {
margin: auto 0 0 0;
align-self: baseline;
}

&__label-wrapper {
width: 80%;
}

&__focus-mode {
width: 20%;
}

&__data {
width: 100%;
}
}
}

&--focus-mode-active {
position: fixed;
top: 0;
left: 0;
z-index: 1080;
flex-direction: column;
width: 100vw;
height: 100vh;
padding: calculateRem(16px);
background: $ibexa-color-black;

.ibexa-field-edit {
&__label-wrapper {
display: none;
}

&__focus-mode {
width: 100%;
height: fit-content;
padding: calculateRem(32px) calculateRem(32px) 0 calculateRem(32px);
}

&__focus-mode-notice-container {
display: block;
width: 100%;
}

&__focus-mode-control-container {
height: calculateRem(40px);
}

&__focus-mode-control-btn {
margin: 0;

&--enable {
display: none;
}

&--disable {
display: inline-flex;
}
}

&__data {
width: 100%;
overflow-y: auto;
align-self: stretch;
flex-grow: 1;
padding: calculateRem(8px) calculateRem(32px) calculateRem(32px) calculateRem(32px);
background: $ibexa-color-white;
border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;

.ibexa-data-source {
height: 100%;
}
}
}

.ibexa-alert {
margin-bottom: calculateRem(4px);
}
}

&--focus-mode-active.is-invalid {
.ibexa-field-edit {
&__data {
border-radius: 0;
padding-bottom: 0;
}
}

.ibexa-form-error {
padding: calculateRem(16px) calculateRem(32px);
background: $ibexa-color-white;
border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;
}
}
}

.ibexa-content-edit {
Expand Down
15 changes: 15 additions & 0 deletions src/bundle/Resources/translations/messages.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,21 @@
<target state="new">Show</target>
<note>key: fieldview.toggler.show</note>
</trans-unit>
<trans-unit id="3ed43e39f88eb44efe31d1befa4287bcf0501520" resname="focus_mode.disable.label">
<source>Distraction free mode</source>
<target state="new">Distraction free mode</target>
<note>key: focus_mode.disable.label</note>
</trans-unit>
<trans-unit id="9ccf325057537b909b7b1a20ca8d17faa434124d" resname="focus_mode.disbale_hint">
<source>To exit distraction free mode, click the %icon% or press Esc</source>
<target state="new">To exit distraction free mode, click the %icon% or press Esc</target>
<note>key: focus_mode.disbale_hint</note>
</trans-unit>
<trans-unit id="876c1f3845f42bec6ff26f25c8f2de53a4367539" resname="focus_mode.enable.label">
<source>Focus mode</source>
<target state="new">Focus mode</target>
<note>key: focus_mode.enable.label</note>
</trans-unit>
<trans-unit id="b469507c15ca085ba9753f60ab835f68cda9c725" resname="footer.copyright">
<source><![CDATA[Copyright &copy; %year% Ibexa. All right reserved]]></source>
<target state="new"><![CDATA[Copyright &copy; %year% Ibexa. All right reserved]]></target>
Expand Down
9 changes: 7 additions & 2 deletions src/bundle/Resources/views/themes/admin/content/form_fields.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,10 @@
{% set fieldtype_identifier = fieldtype.vars.value.fieldDefinition.fieldTypeIdentifier %}
{% set translation_mode = fieldtype.vars.mainLanguageCode != fieldtype.vars.languageCode %}
{% set fieldtype_is_not_translatable = translation_mode and not fieldtype.vars.value.fieldDefinition.isTranslatable %}
{% set has_focus_mode = fieldtype_identifier == 'ezrichtext' %}

{% set widget_wrapper_attr = widget_wrapper_attr|default({})|merge({'class': (widget_wrapper_attr.class|default('') ~ ' ibexa-field-edit__data ibexa-field-edit__data')|trim}) %}
{% set wrapper_class = 'ibexa-field-edit ibexa-field-edit--' ~ fieldtype_identifier ~ ' ibexa-field-edit ibexa-field-edit--' ~ fieldtype_identifier %}
{% set wrapper_class = 'ibexa-field-edit ibexa-field-edit--' ~ fieldtype_identifier ~ ' ibexa-field-edit ibexa-field-edit--' ~ fieldtype_identifier ~ (has_focus_mode ? ' ibexa-field-edit--has-focus-mode') %}

{% if fieldtype.vars.disabled %}
{% set wrapper_class = wrapper_class ~ ' ibexa-field-edit--disabled ibexa-field-edit--disabled' %}
Expand Down Expand Up @@ -114,9 +115,13 @@

<div {% with { attr: wrapper_attr } %}{{ block('attributes') }}{% endwith %}>
<div{% with { attr: label_wrapper_attr } %}{{ block('attributes') }}{% endwith %}>
{% with { 'compound': false } %}{{- block('form_label') }}{% endwith %}
{% with { 'compound': false } %}{{ block('form_label') }}{% endwith %}
</div>

{% if has_focus_mode %}
{{- block('focus_mode') }}
{% endif %}

{% if widget_container_block is defined %}
{{ widget_container_block|raw }}
{% else %}
Expand Down
41 changes: 40 additions & 1 deletion src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,6 @@

{%- block richtext_widget -%}
{% set attr = attr|merge({ 'hidden': true }) %}

<div class="ibexa-data-source ibexa-data-source--richtext">
<textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
<div class="hidden" data-udw-config-name="richtext_embed" data-udw-config="{{ ibexa_udw_config('richtext_embed', udw_context) }}"></div>
Expand Down Expand Up @@ -500,3 +499,43 @@
{{- form_errors(form) -}}
</div>
{%- endblock %}

{%- block focus_mode -%}
{%- set title_icon -%}
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('un-focus') }}"></use>
</svg>
{%- endset -%}
{%- set title -%}
{{ 'focus_mode.disbale_hint'|trans({ '%icon%': title_icon|raw })|desc('To exit distraction free mode, click the %icon% or press Esc')|raw }}
{%- endset -%}

<div class="ibexa-field-edit__focus-mode">
<div class="ibexa-field-edit__focus-mode-notice-container">
{% include '@ibexadesign/ui/component/alert/alert.html.twig' with {
type: 'complementary',
title,
icon_path: ibexa_icon_path('system-information'),
show_close_btn: true
} only %}
</div>
<div class="ibexa-field-edit__focus-mode-control-container">
<button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-field-edit__focus-mode-control-btn ibexa-field-edit__focus-mode-control-btn--enable">
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('focus') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'focus_mode.enable.label'|trans|desc('Focus mode') }}
</span>
</button>
<button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-field-edit__focus-mode-control-btn ibexa-field-edit__focus-mode-control-btn--disable">
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('un-focus') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'focus_mode.disable.label'|trans|desc('Distraction free mode') }}
</span>
</button>
</div>
</div>
{%- endblock -%}

0 comments on commit 2f91394

Please sign in to comment.