Преглед на файлове

[Docs] Improved design of autosave demo.

Damian Konopka преди 7 години
родител
ревизия
a5fcaadeb2

+ 78 - 14
docs/_snippets/builds/saving-data/autosave.html

@@ -1,32 +1,96 @@
-<p>HTTP sever lag: <input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000"></p>
+<div class="snippet-autosave-header">
+	<div class="snippet-autosave-status">
+		<div class="snippet-autosave-status_label">Status:</div>
+		<div class="snippet-autosave-status_spinner">
+			<span class="snippet-autosave-status_spinner-label"></span>
+			<span class="snippet-autosave-status_spinner-loader"></span>
+		</div>
+	</div>
 
-<p>Status: <span id="snippet-autosave-status"></span></p>
+	<div class="snippet-autosave-server">
+		<div class="snippet-autosave-server_label">HTTP server lag (ms):</div>
+		<input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
+	</div>
+</div>
 
 <div id="snippet-autosave">
 	<p>Test me!</p>
 </div>
 
-<pre id="snippet-autosave-console"></pre>
+<p>Server data:</p>
+
+<pre>
+	<code id="snippet-autosave-console"></code>
+</pre>
 
 <style>
-	#snippet-autosave-status {
+	.snippet-autosave-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: var(--ck-color-toolbar-background);
+		border: 1px solid var(--ck-color-toolbar-border);
+		padding: 10px;
+		border-radius: var(--ck-border-radius);
+		margin-top: 1.5em;
+	}
+
+	.snippet-autosave-status_spinner{
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+	.snippet-autosave-status_spinner-label {
+		position: relative;
+	}
+
+	.snippet-autosave-status_spinner-label::after {
+		content: 'Saved!';
+		color: green;
 		display: inline-block;
-		width: 20px;
-		height: 20px;
-		background-color: green;
+		margin-right: var(--ck-spacing-large);
+	}
+
+	/* During "Saving" display spinner and change content of label. */
+	.snippet-autosave-status.busy .snippet-autosave-status_spinner-label::after  {
+		content: 'Saving...';
+		color: red;
+	}
+
+	.snippet-autosave-status.busy .snippet-autosave-status_spinner-loader {
+		display: block;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		border-top: 3px solid hsl(0, 0%, 70%);
+		border-right: 2px solid transparent;
+		animation: autosave-status-spinner 1s linear infinite;
+	}
+
+	.snippet-autosave-status,
+	.snippet-autosave-server {
+		display: flex;
+		align-items: center;
+	}
+
+	.snippet-autosave-server_label,
+	.snippet-autosave-status_label {
+		font-weight: bold;
+		margin-right: var(--ck-spacing-large);
 	}
 
-	#snippet-autosave-status.busy {
-		background-color: red;
+	#snippet-autosave-lag {
+		padding: 4px;
 	}
 
 	#snippet-autosave-console {
-		height: 300px;
+		/* Lets wrap content. */
+		max-height: 300px;
 		overflow: auto;
+		white-space: normal;
+	}
 
-		/* Similar to code blocks. */
-		background: #2b2c26;
-		padding: 1.333em;
-		color: #FFF;
+	@keyframes autosave-status-spinner {
+		to { transform: rotate( 360deg ); }
 	}
 </style>

+ 3 - 5
docs/_snippets/builds/saving-data/autosave.js

@@ -36,11 +36,9 @@ ClassicEditor
 
 function saveData( data ) {
 	return new Promise( resolve => {
-		log( `Saving... (${ data })` );
-
 		// Fake HTTP server's lag.
 		setTimeout( () => {
-			log( 'Saved.' );
+			log( data );
 
 			resolve();
 		}, HTTP_SERVER_LAG );
@@ -49,7 +47,7 @@ function saveData( data ) {
 
 function displayStatus( editor ) {
 	const pendingActions = editor.plugins.get( 'PendingActions' );
-	const statusIndicator = document.querySelector( '#snippet-autosave-status' );
+	const statusIndicator = document.querySelector( '.snippet-autosave-status' );
 
 	pendingActions.on( 'change:isPending', ( evt, propertyName, newValue ) => {
 		if ( newValue ) {
@@ -63,5 +61,5 @@ function displayStatus( editor ) {
 function log( msg ) {
 	const console = document.querySelector( '#snippet-autosave-console' );
 
-	console.textContent = msg + '\n' + console.textContent;
+	console.textContent = msg;
 }

+ 59 - 13
docs/_snippets/builds/saving-data/manualsave.html

@@ -1,31 +1,77 @@
-<p>HTTP sever lag: <input id="snippet-manual-lag" type="number" value="500" step="100" min="0" max="9000"></p>
+<div class="snippet-manual-save-header">
+	<div class="snippet-manual-save-submit">
+		<input id="snippet-manual-save" type="submit" value="Save">
+	</div>
+	<div class="snippet-manual-save-server">
+		<div class="snippet-manual-save-server_label">HTTP server lag (ms):</div>
+		<input id="snippet-manual-lag" type="number" value="500" step="100" min="0" max="9000">
+	</div>
+</div>
 
 <div id="snippet-manual">
 	<p>Test me!</p>
 </div>
 
-<p><input id="snippet-manual-save" type="submit" value="Submit"></p>
+<p>Server data:</p>
 
-<pre id="snippet-manual-console"></pre>
+<pre>
+	<code id="snippet-manual-save-console"></code>
+</pre>
 
 <style>
+	.snippet-manual-save-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: var(--ck-color-toolbar-background);
+		border: 1px solid var(--ck-color-toolbar-border);
+		padding: 10px;
+		border-radius: var(--ck-border-radius);
+		margin-top: 1.5em;
+	}
+
+	.snippet-manual-save-server,
+	.snippet-manual-save-submit {
+		display: flex;
+		align-items: center;
+	}
+
+	.snippet-manual-save-server_label,
+	.snippet-manual-save-status_label {
+		font-weight: bold;
+		margin-right: var(--ck-spacing-large);
+	}
+
+	#snippet-manual-save-lag {
+		padding: 4px;
+	}
+
 	#snippet-manual-save {
-		color: #999;
+		color: #fff;
+		background: hsl( 161, 74%, 46% );
+		opacity: 0.5;
+		padding: 7px 30px;
+		display: block;
+		border: 0;
+		border-radius: 30px;
+		font-weight: bold;
+		outline: none;
+		transition: 300ms ease background;
 	}
+
 	#snippet-manual-save.active {
-		color: #000;
+		cursor: pointer;
+		opacity: 1;
 	}
+
 	#snippet-manual-save.saving {
-		box-shadow: #3f3 0px 0px 5px;
+		background: hsl( 161, 74%, 36% );
 	}
 
-	#snippet-manual-console {
-		height: 300px;
+	#snippet-manual-save-console {
+		/* Lets wrap content. */
+		max-height: 300px;
 		overflow: auto;
-
-		/* Similar to code blocks. */
-		background: #2b2c26;
-		padding: 1.333em;
-		color: #FFF;
+		white-space: normal;
 	}
 </style>

+ 4 - 6
docs/_snippets/builds/saving-data/manualsave.js

@@ -39,15 +39,13 @@ function handleSaveButton( editor ) {
 
 	saveButton.addEventListener( 'click', evt => {
 		const data = editor.getData();
-		const action = pendingActions.add( 'Saving changes' );
+		const action = pendingActions.add( 'Saving in progress.' );
 
 		evt.preventDefault();
 
-		log( `Saving... (${ data })` );
-
 		// Fake HTTP server's lag.
 		setTimeout( () => {
-			log( 'Saved.' );
+			log( data );
 
 			pendingActions.remove( action );
 
@@ -98,7 +96,7 @@ function updateStatus( editor ) {
 }
 
 function log( msg ) {
-	const console = document.querySelector( '#snippet-manual-console' );
+	const console = document.querySelector( '#snippet-manual-save-console' );
 
-	console.textContent = msg + '\n' + console.textContent;
+	console.textContent = msg;
 }

+ 2 - 5
docs/builds/guides/integration/saving-data.md

@@ -173,10 +173,9 @@ ClassicEditor
 // Save the data to a fake HTTP server.
 function saveData( data ) {
 	return new Promise( resolve => {
-		console.log( `Saving... (${ data })` );
 
 		setTimeout( () => {
-			console.log( 'Saved.' );
+			console.log( data );
 
 			resolve();
 		}, HTTP_SERVER_LAG );
@@ -248,11 +247,9 @@ function handleSaveButton( editor ) {
 
 		evt.preventDefault();
 
-		log( `Saving... (${ data })` );
-
 		// Fake HTTP server's lag.
 		setTimeout( () => {
-			log( 'Saved.' );
+			log( data );
 
 			pendingActions.remove( action );