Make django-ace (toolbar) support dark mode better

.gitignore

@@ -10,6 +10,7 @@ dmoj/local_settings.py
 resources/dark
 resources/martor-description.css
 resources/select2-dmoj.css
+resources/ace-dmoj.css
 resources/style.css
 resources/vars.scss
 sass_processed

django_ace/widgets.py

@@ -25,10 +25,7 @@ def __init__(self, mode=None, theme=None, wordwrap=False, width='100%', height='
     def media(self):
         js = [urljoin(settings.ACE_URL, 'ace.js')] if self.ace_media else []
         js.append('django_ace/widget.js')
-        css = {
-            'screen': ['django_ace/widget.css'],
-        }
-        return forms.Media(js=js, css=css)
+        return forms.Media(js=js)
 
     def render(self, name, value, attrs=None, renderer=None):
         attrs = attrs or {}

judge/admin/contest.py

@@ -14,12 +14,11 @@
 from django.views.decorators.http import require_POST
 from reversion.admin import VersionAdmin
 
-from django_ace import AceWidget
 from judge.models import Class, Contest, ContestProblem, ContestSubmission, Profile, Rating, Submission
 from judge.ratings import rate_contest
 from judge.utils.views import NoBatchDeleteMixin
-from judge.widgets import AdminHeavySelect2MultipleWidget, AdminHeavySelect2Widget, AdminMartorWidget, \
-    AdminSelect2MultipleWidget, AdminSelect2Widget
+from judge.widgets import AdminAceWidget, AdminHeavySelect2MultipleWidget, AdminHeavySelect2Widget, \
+    AdminMartorWidget, AdminSelect2MultipleWidget, AdminSelect2Widget
 
 
 class AdminHeavySelect2Widget(AdminHeavySelect2Widget):
@@ -316,7 +315,7 @@ def get_form(self, request, obj=None, **kwargs):
         if 'problem_label_script' in form.base_fields:
             # form.base_fields['problem_label_script'] does not exist when the user has only view permission
             # on the model.
-            form.base_fields['problem_label_script'].widget = AceWidget(
+            form.base_fields['problem_label_script'].widget = AdminAceWidget(
                 mode='lua', theme=request.profile.resolved_ace_theme,
             )
 

judge/admin/profile.py

@@ -6,10 +6,9 @@
 from django.utils.translation import gettext, gettext_lazy as _, ngettext
 from reversion.admin import VersionAdmin
 
-from django_ace import AceWidget
 from judge.models import Profile, WebAuthnCredential
 from judge.utils.views import NoBatchDeleteMixin
-from judge.widgets import AdminMartorWidget, AdminSelect2Widget
+from judge.widgets import AdminAceWidget, AdminMartorWidget, AdminSelect2Widget
 
 
 class ProfileForm(ModelForm):
@@ -134,7 +133,7 @@ def get_form(self, request, obj=None, **kwargs):
         form = super(ProfileAdmin, self).get_form(request, obj, **kwargs)
         if 'user_script' in form.base_fields:
             # form.base_fields['user_script'] does not exist when the user has only view permission on the model.
-            form.base_fields['user_script'].widget = AceWidget(
+            form.base_fields['user_script'].widget = AdminAceWidget(
                 mode='javascript', theme=request.profile.resolved_ace_theme,
             )
         return form

judge/admin/runtime.py

@@ -11,9 +11,8 @@
 from django.views.decorators.http import require_POST
 from reversion.admin import VersionAdmin
 
-from django_ace import AceWidget
 from judge.models import Judge
-from judge.widgets import AdminMartorWidget
+from judge.widgets import AdminAceWidget, AdminMartorWidget
 
 
 class LanguageForm(ModelForm):
@@ -30,7 +29,7 @@ class LanguageAdmin(VersionAdmin):
     def get_form(self, request, obj=None, **kwargs):
         form = super(LanguageAdmin, self).get_form(request, obj, **kwargs)
         if obj is not None:
-            form.base_fields['template'].widget = AceWidget(
+            form.base_fields['template'].widget = AdminAceWidget(
                 mode=obj.ace, theme=request.profile.resolved_ace_theme,
             )
         return form

judge/admin/submission.py

@@ -15,10 +15,10 @@
 from django.views.decorators.http import require_POST
 from reversion.admin import VersionAdmin
 
-from django_ace import AceWidget
 from judge.models import ContestParticipation, ContestProblem, ContestSubmission, Profile, Submission, \
     SubmissionSource, SubmissionTestCase
 from judge.utils.raw_sql import use_straight_join
+from judge.widgets import AdminAceWidget
 
 
 class SubmissionStatusFilter(admin.SimpleListFilter):
@@ -112,7 +112,7 @@ class SubmissionSourceInline(admin.StackedInline):
     extra = 0
 
     def get_formset(self, request, obj=None, **kwargs):
-        kwargs.setdefault('widgets', {})['source'] = AceWidget(
+        kwargs.setdefault('widgets', {})['source'] = AdminAceWidget(
             mode=obj and obj.language.ace, theme=request.profile.resolved_ace_theme,
         )
         return super().get_formset(request, obj, **kwargs)

judge/forms.py

@@ -15,12 +15,11 @@
 from django.utils.text import format_lazy
 from django.utils.translation import gettext_lazy as _, ngettext_lazy
 
-from django_ace import AceWidget
 from judge.models import Contest, Language, Organization, Problem, ProblemPointsVote, Profile, Submission, \
     WebAuthnCredential
 from judge.utils.mail import validate_email_domain
 from judge.utils.subscription import newsletter_id
-from judge.widgets import MartorWidget, Select2MultipleWidget, Select2Widget
+from judge.widgets import AceWidget, MartorWidget, Select2MultipleWidget, Select2Widget
 
 TOTP_CODE_LENGTH = 6
 

judge/widgets/__init__.py

@@ -1,3 +1,4 @@
+from judge.widgets.ace import *
 from judge.widgets.checkbox import CheckboxSelectMultipleWithSelectAll
 from judge.widgets.martor import *
 from judge.widgets.mixins import CompressorWidgetMixin

judge/widgets/ace.py

@@ -0,0 +1,14 @@
+from django_ace.widgets import AceWidget as OldAceWidget
+
+__all__ = ['AceWidget', 'AdminAceWidget']
+
+
+class AceWidget(OldAceWidget):
+    pass
+
+
+class AdminAceWidget(OldAceWidget):
+    class Media:
+        css = {
+            'all': ['ace-dmoj.css'],
+        }

make_style.sh

@@ -20,7 +20,12 @@ build_style() {
   echo "Creating $1 style..."
   cp resources/vars-$1.scss resources/vars.scss
   sass resources:sass_processed
-  postcss sass_processed/style.css sass_processed/martor-description.css sass_processed/select2-dmoj.css --verbose --use autoprefixer -d $2
+  postcss \
+      sass_processed/style.css \
+      sass_processed/martor-description.css \
+      sass_processed/select2-dmoj.css \
+      sass_processed/ace-dmoj.css \
+      --verbose --use autoprefixer -d "$2"
   rm resources/vars.scss
 }
 

resources/ace-dmoj.scss

@@ -0,0 +1,60 @@
+@use "vars" as *;
+
+.django-ace-widget {
+    display: inline-block;
+    position: relative;
+    > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.django-ace-widget.loading {
+    display: none;
+}
+
+.django-ace-toolbar {
+    font-size: 12px;
+    text-align: left;
+    color: $color_primary66;
+    text-shadow: 0 1px 0 $color_primary0;
+    border-bottom: 1px solid $color_primary25;
+    background-image: -moz-linear-gradient(rgba(0,0,0,0), $color_primary10);
+    background-image: -webkit-linear-gradient(rgba(0,0,0,0), $color_primary10);
+    background-image: linear-gradient(rgba(0,0,0,0), $color_primary10);
+    background-repeat: repeat-x;
+    clear: both;
+    overflow: hidden;
+}
+
+.django-ace-max_min {
+    float: right;
+    padding: 5px;
+
+    background: url($path_to_root + '/ace/img/expand.png') no-repeat 5px 5px;
+    @include vars-img;
+    display: block;
+    height: 16px;
+    width: 16px;
+}
+
+.django-ace-editor {
+    position: relative;
+}
+
+.django-ace-editor-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1000;
+
+    .django-ace-max_min {
+        background-image: url($path_to_root + '/ace/img/contract.png');
+        @include vars-img;
+    }
+}

resources/style.scss

@@ -19,3 +19,4 @@
 @use "contest";
 @use "misc";
 @use "select2-dmoj";
+@use "ace-dmoj";