Browse Source

Docs: Improving manual data save demo.

Damian Konopka 7 years ago
parent
commit
8459952383

+ 22 - 7
docs/_snippets/builds/saving-data/autosave.html

@@ -1,3 +1,7 @@
+<div id="snippet-autosave">
+	<p>Test me!</p>
+</div>
+
 <div class="snippet-autosave-header">
 	<div class="snippet-autosave-status">
 		<div class="snippet-autosave-status_label">Status:</div>
@@ -13,10 +17,6 @@
 	</div>
 </div>
 
-<div id="snippet-autosave">
-	<p>Test me!</p>
-</div>
-
 <p>Server data:</p>
 
 <pre>
@@ -32,7 +32,11 @@
 		border: 1px solid var(--ck-color-toolbar-border);
 		padding: 10px;
 		border-radius: var(--ck-border-radius);
-		margin-top: 1.5em;
+		margin-top: -1.5em;
+		margin-bottom: 1.5em;
+		border-top: 0;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 	}
 
 	.snippet-autosave-status_spinner{
@@ -48,7 +52,7 @@
 		content: 'Saved!';
 		color: green;
 		display: inline-block;
-		margin-right: var(--ck-spacing-large);
+		margin-right: var(--ck-spacing-medium);
 	}
 
 	/* During "Saving" display spinner and change content of label. */
@@ -76,7 +80,7 @@
 	.snippet-autosave-server_label,
 	.snippet-autosave-status_label {
 		font-weight: bold;
-		margin-right: var(--ck-spacing-large);
+		margin-right: var(--ck-spacing-medium);
 	}
 
 	#snippet-autosave-lag {
@@ -88,9 +92,20 @@
 		max-height: 300px;
 		overflow: auto;
 		white-space: normal;
+		background: #2b2c26;
+		transition: 300ms;
+	}
+
+	#snippet-autosave-console.received {
+		animation: autosave-received 1s ease 1;
 	}
 
 	@keyframes autosave-status-spinner {
 		to { transform: rotate( 360deg ); }
 	}
+
+	@keyframes autosave-received {
+		from { background: green; }
+		to { background: #2b2c26; }
+	}
 </style>

+ 2 - 0
docs/_snippets/builds/saving-data/autosave.js

@@ -52,6 +52,7 @@ function displayStatus( editor ) {
 	pendingActions.on( 'change:isPending', ( evt, propertyName, newValue ) => {
 		if ( newValue ) {
 			statusIndicator.classList.add( 'busy' );
+			document.querySelector( '#snippet-autosave-console' ).classList.remove( 'received' );
 		} else {
 			statusIndicator.classList.remove( 'busy' );
 		}
@@ -61,5 +62,6 @@ function displayStatus( editor ) {
 function log( msg ) {
 	const console = document.querySelector( '#snippet-autosave-console' );
 
+	console.classList.add( 'received' );
 	console.textContent = msg;
 }

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

@@ -1,15 +1,15 @@
+<div id="snippet-manual">
+	<p>Test me!</p>
+</div>
+
 <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 class="snippet-manual-save-submit">
+		<input id="snippet-manual-save" type="submit" value="Save">
+	</div>
 </div>
 
 <p>Server data:</p>
@@ -27,7 +27,11 @@
 		border: 1px solid var(--ck-color-toolbar-border);
 		padding: 10px;
 		border-radius: var(--ck-border-radius);
-		margin-top: 1.5em;
+		margin-top: -1.5em;
+		margin-bottom: 1.5em;
+		border-top: 0;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 	}
 
 	.snippet-manual-save-server,
@@ -39,7 +43,7 @@
 	.snippet-manual-save-server_label,
 	.snippet-manual-save-status_label {
 		font-weight: bold;
-		margin-right: var(--ck-spacing-large);
+		margin-right: var(--ck-spacing-medium);
 	}
 
 	#snippet-manual-save-lag {
@@ -48,15 +52,16 @@
 
 	#snippet-manual-save {
 		color: #fff;
-		background: hsl( 161, 74%, 46% );
+		background: hsl( 88, 73%, 39% );
 		opacity: 0.5;
-		padding: 7px 30px;
+		padding: 4px 20px;
 		display: block;
 		border: 0;
-		border-radius: 30px;
+		border-radius: 2px;
 		font-weight: bold;
 		outline: none;
 		transition: 300ms ease background;
+		box-shadow: 0 2px 0 rgb(68, 117, 10);
 	}
 
 	#snippet-manual-save.active {
@@ -65,7 +70,7 @@
 	}
 
 	#snippet-manual-save.saving {
-		background: hsl( 161, 74%, 36% );
+		background: hsl( 88, 73%, 34% );
 	}
 
 	#snippet-manual-save-console {
@@ -73,5 +78,15 @@
 		max-height: 300px;
 		overflow: auto;
 		white-space: normal;
+		background: #2b2c26;
+		transition: 300ms;
+	}
+
+	#snippet-manual-save-console.received {
+		animation: autosave-received 1s ease 1;
+	}
+	@keyframes autosave-received {
+		from { background: green; }
+		to { background: #2b2c26; }
 	}
 </style>

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

@@ -89,8 +89,11 @@ function updateStatus( editor ) {
 	}
 
 	if ( editor.plugins.get( 'PendingActions' ).isPending ) {
+		document.querySelector( '#snippet-manual-save-console' ).classList.remove( 'received' );
+		saveButton.value = 'Saving...';
 		saveButton.classList.add( 'saving' );
 	} else {
+		saveButton.value = 'Save';
 		saveButton.classList.remove( 'saving' );
 	}
 }
@@ -98,5 +101,6 @@ function updateStatus( editor ) {
 function log( msg ) {
 	const console = document.querySelector( '#snippet-manual-save-console' );
 
+	console.classList.add( 'received' );
 	console.textContent = msg;
 }