Add focused styling to the editor

Wirecloud · Mar 13, 2024 · eddcd3b · eddcd3b
1 parent cbbf60e
commit eddcd3b
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 25 deletions.
diff --git a/src/wirecloud/commons/static/js/StyledElements/CodeArea.js b/src/wirecloud/commons/static/js/StyledElements/CodeArea.js
@@ -31,10 +31,14 @@
 
     const onfocus = function onfocus() {
         this.dispatchEvent('focus');
+
+        this.wrapperElement.classList.add('focused');
     };
 
     const onblur = function onblur() {
         this.dispatchEvent('blur');
+
+        this.wrapperElement.classList.remove('focused');
     };
 
     /**

diff --git a/src/wirecloud/defaulttheme/static/css/styledelements/_input_mixins.scss b/src/wirecloud/defaulttheme/static/css/styledelements/_input_mixins.scss
@@ -17,6 +17,13 @@
     transition: border linear 0.2s, box-shadow linear 0.2s;
 }
 
+@mixin input-focus() {
+    outline: 0;
+    z-index: 2;
+    border-color: $input-border-color-focus;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba($input-border-color-focus, 0.6);
+}
+
 @mixin input-variant($color, $border) {
     color: $color;
     border-color: $border;
@@ -39,10 +46,7 @@
     margin: 1px 4px 9px 4px;
 
     &:focus {
-        outline: 0;
-        z-index: 2;
-        border-color: $input-border-color-focus;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba($input-border-color-focus, 0.6);
+        @include input-focus();
     }
 
     &.error {

diff --git a/src/wirecloud/defaulttheme/static/css/styledelements/styled_code_area.scss b/src/wirecloud/defaulttheme/static/css/styledelements/styled_code_area.scss
@@ -7,3 +7,7 @@
     height: 25em;
     width: 100%;
 }
+
+.se-code-area.focused {
+    @include input-focus();
+}
diff --git a/src/wirecloud/defaulttheme/templates/wirecloud/views/base.html b/src/wirecloud/defaulttheme/templates/wirecloud/views/base.html
@@ -76,6 +76,12 @@ <h4>{% trans "Your browser seems to lack some required features" %}</h4>
 <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
 <script type="text/javascript" src="{% static "js/lib/urlify.js" %}"></script>
 {% endcompress %}
+<script>
+  var require = { paths: { vs: '{% static "js/lib/monaco-editor/min/vs" %}' } };
+</script>
+<script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/loader.js" %}"></script>
+<script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.nls.js" %}"></script>
+<script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.js" %}"></script>
 
 <script type="text/javascript" src="{% url "wirecloud.javascript_translation_catalogue" %}?language={{ LANGUAGE_CODE }}&amp;v={{ WIRECLOUD_VERSION_HASH }}"></script>
 
@@ -85,12 +91,6 @@ <h4>{% trans "Your browser seems to lack some required features" %}</h4>
 {% extra_javascripts "classic" %}
 {% endblock %}
 {% endcompress %}
-<script>
-  var require = { paths: { vs: '{% static "js/lib/monaco-editor/min/vs" %}' } };
-</script>
-<script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/loader.js" %}"></script>
-<script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.nls.js" %}"></script>
-<script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.js" %}"></script>
 
 {% block extra_scripts %}{% endblock %}
 

diff --git a/src/wirecloud/defaulttheme/templates/wirecloud/views/base_plain.html b/src/wirecloud/defaulttheme/templates/wirecloud/views/base_plain.html
@@ -30,17 +30,17 @@
     <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
     {% endcompress %}
-
-    {% compress js %}
-    {% wirecloud_bootstrap "classic" %}
-    {% extra_javascripts "classic" %}
-    {% endcompress %}
     <script>
         var require = { paths: { vs: '{% static "js/lib/monaco-editor/min/vs" %}' } };
     </script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/loader.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.nls.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.js" %}"></script>
+
+    {% compress js %}
+    {% wirecloud_bootstrap "classic" %}
+    {% extra_javascripts "classic" %}
+    {% endcompress %}
     {% endblock %}
 
     {% block js %}

diff --git a/src/wirecloud/fiwarelabtheme/templates/wirecloud/views/base_plain.html b/src/wirecloud/fiwarelabtheme/templates/wirecloud/views/base_plain.html
@@ -30,17 +30,17 @@
     <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
     {% endcompress %}
-
-    {% compress js %}
-    {% wirecloud_bootstrap "classic" %}
-    {% extra_javascripts "classic" %}
-    {% endcompress %}
     <script>
         var require = { paths: { vs: '{% static "js/lib/monaco-editor/min/vs" %}' } };
     </script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/loader.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.nls.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.js" %}"></script>
+
+    {% compress js %}
+    {% wirecloud_bootstrap "classic" %}
+    {% extra_javascripts "classic" %}
+    {% endcompress %}
     {% endblock %}
 
     {% block js %}

diff --git a/src/wirecloud/fiwaretheme/templates/wirecloud/views/base_plain.html b/src/wirecloud/fiwaretheme/templates/wirecloud/views/base_plain.html
@@ -27,17 +27,17 @@
     <script type="text/javascript" src="{% static "js/lib/moment-with-locales.min.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/moment-timezone-with-data.min.js" %}"></script>
     {% endcompress %}
-
-    {% compress js %}
-    {% wirecloud_bootstrap "classic" %}
-    {% extra_javascripts "classic" %}
-    {% endcompress %}
     <script>
         var require = { paths: { vs: '{% static "js/lib/monaco-editor/min/vs" %}' } };
     </script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/loader.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.nls.js" %}"></script>
     <script type="text/javascript" src="{% static "js/lib/monaco-editor/min/vs/editor/editor.main.js" %}"></script>
+
+    {% compress js %}
+    {% wirecloud_bootstrap "classic" %}
+    {% extra_javascripts "classic" %}
+    {% endcompress %}
     {% endblock %}
 
     {% block js %}

diff --git a/src/wirecloud/platform/static/js/WirecloudAPI/StyledElements.js b/src/wirecloud/platform/static/js/WirecloudAPI/StyledElements.js
@@ -37,6 +37,7 @@
             'BorderLayout': platform.StyledElements.BorderLayout,
             'ButtonsGroup': platform.StyledElements.ButtonsGroup,
             'CheckBox': platform.StyledElements.CheckBox,
+            'CodeArea': platform.StyledElements.CodeArea,
             'Container': platform.StyledElements.Container,
             'DynamicMenuItems': platform.StyledElements.DynamicMenuItems,
             'Event': platform.StyledElements.Event,