alchemy-chimera 0.5.3 → 1.0.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## 1.0.1 (2022-01-28)
+
+* Allow setting a simple menu sidebar in the config
+* Add simple notification after adding/saving
+* Add page & window titles
+* Improve edit buttons
+
+## 1.0.0 (2021-09-12)
+
+* Use widgets to create the interface
+* Release preview version of 1.0.0
+
+## 0.6.0 (2020-07-21)
+
+* Make compatible with Alchemy v1.1.0
+* If no field title is found, use the name instead
+* Fix "empty" still showing html content on client renders
+* Use `display_field_select` model property when querying for related data
+* Also use `display_field_select` when querying for the actionValue
+* Do not html-encode string input values, hawkejs will do that
+* Use `display_field_select` property when editing a record & in habtm requests
+* Fix client-side renders of schema fields
+* If a change is made to a translatable field, send it entirely to the server, not just the changed prefix
+* Use ckeditor 4.13 from now on + fix pasting styled text
+* Go back to index page when clicking on save&close and nothing has changed
+* The chimera editor now queries the document before saving, this fixed subschema saves
+* Add checkbox toggle-switch stylings + some small ui fixes
+* Use Tail datetime picker
+* Use `export` field group for exports + use formatted action values
+* Get model title from the `title` property of the class
+* Allow setting a default page size in the plugin config or on the model
+* Make sure to translate `BelongsTo#actionValue()` responses
+
 ## 0.5.3 (2018-12-06)
 
 * Allow using classic (iframe) mode in ckeditor Text field

package/assets/scripts/chimera/chimera.js

@@ -1,294 +1,19 @@
-hawkejs.scene.on({type: 'set', entry: 'chimera/field_wrappers/_wrapper'}, function applyField(element, variables) {
+hawkejs.scene.after({
+	type     : 'set',
+	name     : 'page-notification',
+}, function onNotification(element, variables, block) {
 
-	// Ignore nested wrappers
-	if (element.classList.contains('chimeraField-is-nested')) {
-		return;
-	}
-
-	hawkejs.require(['chimera/chimera_field_wrapper', 'chimera/chimera_field'], function loaded(err) {
-
-		var options;
-
-		if (err) {
-			throw err;
-		}
-
-		// Create the wrap options
-		options = {
-			variables: variables,
-			container: element,
-			viewname: variables.data.field.viewname
-		};
-
-		new ChimeraFieldWrapper(options);
-	});
-});
-
-hawkejs.scene.on({type: 'rendered'}, function rendered(variables, renderData) {
-
-	var key;
-
-	Object.each(variables.__newFlashes, function eachFlash(flash) {
-		chimeraFlash(flash);
-	});
-});
+	let notification = element.querySelector('.notification');
 
-hawkejs.scene.on({type: 'set', name: 'chimera-cage', template: 'chimera/editor/view'}, applySave);
-hawkejs.scene.on({type: 'set', name: 'chimera-cage', template: 'chimera/editor/edit'}, applySave);
-hawkejs.scene.on({type: 'set', name: 'chimera-cage', template: 'chimera/editor/add'}, applySave);
-
-/**
- * Apply save functionality when clicking on the "save" button
- */
-function applySave(el, variables) {
-
-	var preventDuplicate,
-	    variables,
-	    isDraft,
-	    $editor,
-	    $save_close,
-	    $saves,
-	    $save;
-
-	isDraft = this.filter.template === 'chimera/editor/add';
-
-	$editor = $('.chimera-editor', el).first();
-	$save = $('.action-save', $editor);
-	$save_close = $('.action-saveClose', $editor);
-	$saves = $('.action-save, .action-saveClose', $editor);
-
-	if (variables.__chimeraReadOnly) {
-		$save.remove();
-		$save_close.remove();
+	if (!notification) {
 		return;
 	}
 
-	$saves.click(function onClick(e) {
-
-		var $fieldwrappers,
-		    containers,
-		    $this = $(this),
-		    data,
-		    obj;
-
-		e.preventDefault();
-
-		if (preventDuplicate === true) {
-			//return chimeraFlash('Save ignored:<br>Save already in progress');
-		}
-
-		// Get all the non-nested containers
-		containers = $editor[0].querySelectorAll('.chimeraField-container:not(.chimeraField-is-nested)');
-
-		data = {};
-		obj = {
-			create: isDraft,
-			data: data
-		};
-
-		if (isDraft) {
-			// Set the initial passed-along-by-server values first
-			Object.each(variables.groups, function eachGroup(group, name) {
-				group[0].fields.forEach(function eachField(entry) {
-					return doFieldEntry(entry);
-				});
-			});
-
-			function doFieldEntry(entry, base_path) {
-
-				var subgroup,
-				    subentry,
-				    subpath,
-				    path,
-				    i,
-				    j;
-
-				if (base_path) {
-					path = base_path;
-				}
-
-				if (!path) {
-					path = '';
-				} else {
-					path += '.';
-				}
-
-				path += entry.field.path;
-
-				if (entry.field.fieldType.type_name == 'schema') {
-
-					if (entry.field.fieldType.isArray) {
-						for (i = 0; i < entry.value.length; i++) {
-							subgroup = entry.value[i];
-							subpath = base_path += '.' + i;
-
-							subgroup.fields.forEach(function eachSubField(entry) {
-								return doFieldEntry(entry, subpath);
-							});
-						}
-					} else if (entry.value) {
-
-						subgroup = entry.value[0];
-
-						subgroup.fields.forEach(function eachSubField(entry) {
-							return doFieldEntry(entry, base_path);
-						});
-					}
-				} else if (entry.value != null) {
-					Object.setPath(data, path, entry.value);
-				}
-			}
-		}
-
-		containers.forEach(function eachFieldContainer(container) {
-
-			var instance = container.CFWrapper,
-			    sub_data;
-
-			if (!instance) {
-				console.log('Found no instance on', container);
-				return;
-			}
-
-			// Skip nested wrappers,
-			// this could mess up the data
-			if (instance.nested_in) {
-				return;
-			}
-
-			sub_data = instance.getData(true);
-
-			Object.merge(data, sub_data);
-		});
-
-		if (Object.isEmpty(obj.data)) {
-			return chimeraFlash('Save ignored:<br>No modifications were made');
-		}
-
-		var editurl = document.location.href;
-
-		var save_options = {
-			post    : obj,
-			history : false
-		};
-
-		if (isDraft) {
-			save_options.history = true;
-		}
-
-		hawkejs.scene.openUrl($this.attr('href'), save_options, function saved(err, result) {
-
-			if (err != null && result != null) {
-				preventDuplicate = false;
-				chimeraFlash('Something went wrong: ' + result);
-			}
-
-			// @todo: go to the correct url
-			//hawkejs.scene.reload(editurl);
-		});
-
-		preventDuplicate = true;
-	});
-}
-
-hawkejs.scene.on({type: 'set', template: 'chimera/sidebar'}, sidebarCollapse);
-
-function sidebarCollapse(el) {
-
-	var childclass = '',
-	    $active = $(el.querySelectorAll('.sideNav .active')),
-	    $section = $('.section'),
-	    $links = $('a', el);
-
-	// Open active section
-	toggleMenu($active.parent().parent().prev());
-
-	$links.click(function(e) {
-		var $this = $(this);
-
-		if ($this.hasClass('section')) {
-			return;
-		}
-
-		$links.removeClass('active');
-		$this.addClass('active');
-	});
-	
-	// Open clicked section
-	$section.on('click', function onMenuParentClick(e){
-		e.preventDefault();
-		toggleMenu($(this));
-	}); 
-
-	// Handle opening/closing of sections
-	function toggleMenu(section){
-		childclass = '.'+section.data('childclass');
-
-		if(section.attr('data-after') == '\u25B6'){
-			section.attr('data-after', '\u25BC');
-		} else {
-			section.attr('data-after', '\u25B6');
-		}
-
-		$(childclass).toggleClass('hidden');
-	}
-}
-
-hawkejs.scene.on({type: 'set', template: 'chimera/editor/remove'}, removeRecord);
-
-function removeRecord(el) {
-
-	var url;
-
-	$('.remove-btn').on('click', function(e){
-		e.preventDefault();
-		url = $(this).attr('href');
-
-		hawkejs.scene.openUrl(url, {post: {sure: 'yes'}}, function(result) {
-			
-		});
-	});
-
-}
-
-function chimeraFlash(flash) {
-
-	var chimera_options,
-	    className,
-	    element,
-	    obj;
-
-	if (typeof vex == 'undefined') {
-		console.log('"vex" not found, flash:', flash);
-		return;
-	}
-
-	chimera_options = hawkejs.scene.exposed.chimera_options || {};
-
-	if (typeof flash == 'string') {
-		flash = {
-			message: flash
-		}
-	}
-
-	if (flash.className) {
-		className = ' ' + flash.className;
-	} else {
-		className = '';
-	}
-
-	obj = {
-		className: 'vex-theme-bottom-right-corner vex-chimera-flash' + className,
-		message: flash.message
-	};
-
-	element = vex.dialog.alert(obj);
-
-	setTimeout(function closeVexFlash() {
-		vex.close(element.data('id'))
-	}, flash.timeout || chimera_options.notification_timeout || 2500);
-}
+	setTimeout(() => {
+		notification.classList.add('removing');
 
-// $(document).ready(function() {
-// 	vex.defaultOptions.className = 'vex-theme-flat-attack';
-// });
+		setTimeout(() => {
+			notification.remove();
+		}, 2500);
+	}, 4 * 1000);
+});

package/assets/stylesheets/chimera/chimera.scss

@@ -0,0 +1,273 @@
+@import "reset.scss";
+@import "fonts/roboto.scss";
+
+body {
+	font-family: 'Roboto', sans-serif;
+}
+
+.chimera-wrapper {
+	--sidebar-bg-color: #4a4e58;
+	--text-color: #475466;
+	--main-bg-color: #ebedf0;
+	--main-border-color: #dadee0;
+	--button-bg-color: #F4F5F9;
+	--button-bg-hover-color: #e7e9f2;
+	--button-text-color: #3699FF;
+
+	--notification-bg-color: #4a4e58;
+	--notification-text-color: #f4f5f9;
+	--notification-border-color: #dadee0;
+
+	--color-title: #475466;
+	--color-box-border: #DADEE0;
+	--color-active: #3699FF;
+	--color-text: #475466;
+	--color-input-border: #CCD7E6;
+
+	display: flex;
+	min-height: 100vh;
+	width: 100%;
+	color: var(--text-color);
+}
+
+.btn {
+	background-color: var(--button-bg-color);
+	text-decoration: none;
+	color: var(--button-text-color);
+	line-height: 2rem;
+	min-width: 10rem;
+	text-align: center;
+	border-radius: 2px;
+	font-weight: 500;
+	cursor: pointer;
+	border: 1px solid;
+
+	&:hover {
+		background-color: var(--button-bg-hover-color);
+	}
+}
+
+.chimera-sidebar {
+	background-color: var(--sidebar-bg-color);
+	flex: 0 0 14rem;
+	display: flex;
+	flex-flow: column;
+}
+
+.chimera-content {
+	background-color: var(--main-bg-color);
+	flex: 1 0;
+	display: flex;
+	flex-flow: column;
+
+	.chimera-page-header {
+		border-color: var(--main-border-color);
+		border-style: solid;
+		border-width: 0 0 1px;
+		background-color: white;
+	}
+}
+
+.chimera-page-header {
+	height: 4rem;
+	display: flex;
+	padding: 0.8rem;
+	justify-content: space-between;
+
+	> * {
+		display: flex;
+		align-self: center;
+	}
+
+	.page-title {
+		font-size: 1.1rem;
+		font-weight: bold;
+	}
+
+	.page-actions {
+
+	}
+}
+
+.chimera-main {
+	flex: 1;
+	padding: 0.5rem;
+}
+
+.main-widgets {
+	height: 100%;
+}
+
+.chimera-editor-widgets {
+	padding: 1rem;
+
+	alchemy-widget[type="alchemy_field"] {
+		margin-bottom: 1rem;
+	}
+
+	.form-field-info label,
+	.form-field-info alchemy-label {
+		display: block;
+		font-size: 1.2rem;
+	}
+}
+
+alchemy-widgets-navigation {
+	--border-color: #333333;
+
+	ul {
+		padding-left: 0;
+
+		li {
+			list-style: none;
+			border-bottom: 1px solid var(--border-color);
+		}
+
+		li:first-of-type {
+			border-top: 1px solid var(--border-color);
+		}
+	}
+
+	alchemy-widget[type="link"] {
+		width: 100%;
+		height: 3rem;
+		display: flex;
+
+		a {
+			width: 100%;
+			align-self: stretch;
+			display: flex;
+			align-items: center;
+			padding-left: 1rem;
+			text-decoration: none;
+			color: white;
+
+			&:hover,
+			&.active-link {
+				background-color: rgba(190, 190, 190, 0.5);
+			}
+		}
+	}
+}
+
+.chimera-main[data-he-template="chimera/widgets"] {
+	padding: 1rem;
+}
+
+.chimera-input-field {
+	padding: 0px 12px;
+	border: 1px solid var(--color-input-border);
+	color: var(--text-color);
+	-webkit-appearance: none;
+	height: 2rem;
+}
+
+.page-notification {
+	.notification {
+		border: 1px solid var(--notification-border-color);
+		background: var(--notification-bg-color);
+		color: var(--notification-text-color);
+		border-radius: 5px;
+		padding: 0.5rem 0.8rem;
+	}
+}
+
+.removing {
+	transition: opacity 2s;
+	opacity: 0;
+}
+
+alchemy-table .aft-column-filters input {
+	@extend .chimera-input-field;
+	width: 100%;
+}
+
+alchemy-field {
+	border: 1px solid var(--color-box-border);
+	background-color: white;
+	border-radius: 4px;
+
+	alchemy-label {
+		padding-left: 1rem;
+		line-height: 3rem;
+		font-size: 16px;
+		font-weight: 500;
+		color: var(--color-title);
+		border-bottom: 1px solid var(--color-box-border);
+	}
+
+	alchemy-field-translatable {
+		.prefix-buttons {
+			width: 100%;
+			border-bottom: 1px solid var(--color-box-border);
+			display: flex;
+
+			button {
+				flex: 1;
+				font-size: 16px;
+				font-weight: 500;
+				color: var(--button-text-color);
+				letter-spacing: 0px;
+				background: transparent;
+				border: none;
+				cursor: pointer;
+
+				height: 3rem;
+				display: flex;
+				flex-flow: column;
+				justify-content: center;
+				align-items: center;
+
+				&.active {
+					box-shadow: inset 0 -2px var(--color-active);
+				}
+
+				&:hover {
+					background-color: var(--button-bg-hover-color);
+				}
+			}
+		}
+	}
+
+	.field {
+		display: flex;
+		padding: 1rem;
+
+		> * {
+			flex: 1;
+		}
+
+		> alchemy-widget {
+			border: 1px solid var(--color-input-border);
+			padding: 0 12px;
+		}
+	}
+
+	.field input[type="text"],
+	.field input[type="number"],
+	.field input[type="color"] {
+		@extend .chimera-input-field;
+		height: 3rem;
+	}
+
+	.field input[type="color"] {
+		background-color: transparent;
+		border: none;
+		padding: 0;
+	}
+}
+
+.aft-actions {
+	a {
+		color: var(--button-text-color);
+		background-color: var(--button-bg-color);
+		padding: 0.5rem;
+		border-radius: 6px;
+		margin: 0.2rem;
+		display: inline-block;
+
+		&:hover {
+			background-color: var(--button-bg-hover-color);
+		}
+	}
+}