misc: extend cell size options, use a dedicated widget (#62072)

combo/data/models.py

@@ -60,6 +60,7 @@ from combo.utils import NothingInCacheException
 
 from .fields import RichTextField, TemplatableURLField
 from .library import get_cell_class, get_cell_classes, register_cell_class
+from .widgets import FlexSize
 
 
 class PostException(Exception):
@@ -1173,11 +1174,21 @@ class CellBase(models.Model, metaclass=CellMeta):
                         label=_('Size'),
                         choices=[
                             ('', ''),
-                            ('size--1-1', '1/1'),
-                            ('size--t1-2', '1/2'),
-                            ('size--t1-3', '1/3'),
+                            ('size--1-1', '1'),
+                            ('size--t1-2', '½'),
+                            ('size--t1-3', '⅓'),
+                            ('size--t1-4', '¼'),
+                            ('size--t1-5', '⅕'),
+                            ('size--t1-6', '⅙'),
+                            ('size--t2-3', '⅔'),
+                            ('size--t2-5', '⅖'),
+                            ('size--t3-4', '¾'),
+                            ('size--t3-5', '⅗'),
+                            ('size--t4-5', '⅘'),
+                            ('size--t5-6', '⅚'),
                         ],
                         required=False,
+                        widget=FlexSize,
                     )
                     # move extra_css_class field to be last
                     field_order = list(self.fields.keys())

combo/data/widgets.py

@@ -0,0 +1,21 @@
+# combo - content management system
+# Copyright (C) 2014-2022  Entr'ouvert
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Affero General Public License as published
+# by the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+from django.forms.widgets import Select
+
+
+class FlexSize(Select):
+    template_name = 'combo/widgets/flexsize.html'

combo/manager/static/css/combo.manager.scss

@@ -717,3 +717,52 @@ form .choices {
 .cell.map .pk-tabs-container--content-panels .buttons {
 	margin: 1em 0;
 }
+
+.flex-size-select {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	&::before {
+		display: block;
+		position: absolute;
+		content: "";
+		width: calc(100% - 0.5em);
+		height: 2px;
+		top: -0.6em;
+		background: #386ede;
+	}
+	li {
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+		text-align: center;
+		input {
+			display: block;
+			margin: 0;
+		}
+		label::before {
+			display: block;
+			position: absolute;
+			content: "";
+			background: #386ede;
+			height: 0.9em;
+			width: 2px;
+			top: -1em;
+			right: 0.4em;
+		}
+	}
+	.size--1-1 {
+		right: 0;
+	}
+	@for $i from 1 through 6 {
+		@for $j from 1 through $i {
+			.size--t#{$j}-#{$i} {
+				right: calc(100% - #{100%*$j/$i});
+			}
+		}
+	}
+	[class*="size--"] {
+		position: absolute;
+	}
+}

combo/manager/templates/combo/widgets/flexsize.html

@@ -0,0 +1,10 @@
+{% load i18n %}
+{% with id=widget.attrs.id %}
+<ul{% if id %} id="{{ id }}"{% endif %} class="flex-size-select {{ widget.attrs.class|default:"" }}">{% for group, options, index in widget.optgroups %}
+  {% for option in options %}
+  <li class="{{ option.value|default:"size-auto" }}"><label class="{{ option.value }}"
+          ><input type="radio" name="{{ widget.name }}" value="{{ option.value }}"
+                {% if option.selected %}checked{% endif %}>{{ option.label|default:_("Auto") }}</label></li>
+  {% endfor %}
+{% endfor %}
+</ul>{% endwith %}