Added button transitions

.todo

@@ -1,7 +1,10 @@
-add transitions
-style live preview
 reference adjusts incorrect
 fix reference update on load
+style live preview
+fix folds
+add transitions to folds
+add default code icon svg based on < > icon
+fix issue with startup
 
 get shiki base theme to class names
 add shiki to fence rendered and codemirror both

src/Internal/Decorating/Rendered/fenced.ts

@@ -12,6 +12,7 @@ import { visitParents } from "unist-util-visit-parents";
 import { parseFenceCodeParameters, referenceAdjustParameters, toDecorateFenceCode } from "../../Parsing/fenced";
 import { convertCommentLinks, getIndentation, getLineClasses } from "../../utils/decorating";
 import { createHeaderElement } from "../elements";
+import { BUTTON_TIMEOUT, BUTTON_TRANSITION } from "src/Internal/constants/interface";
 
 export async function renderedFencedCodeDecorating(
 	element: HTMLElement,
@@ -229,6 +230,28 @@ function markupFencePreElement(
 
 	fencePreElement.classList.add(...classList);
 
+	const copyCodeButton: HTMLElement | null = fencePreElement.querySelector("button.copy-code-button")
+	copyCodeButton?.addEventListener(
+		"click",
+		(event: Event) => {
+			copyCodeButton.style.transition = "opacity, background-color"
+			copyCodeButton.style.transitionDuration = `${BUTTON_TRANSITION}ms`
+			setTimeout(
+				() => {
+					copyCodeButton.style.color = ""
+				},
+				BUTTON_TIMEOUT - 1,
+			)
+			setTimeout(
+				() => {
+					copyCodeButton.style.transition = ""
+					copyCodeButton.style.transitionDuration = ""
+				},
+				BUTTON_TIMEOUT,
+			)
+		}
+	)
+
 	if (fenceCodeParameters.fold.enabled !== null)
 		fencePreElement.setAttribute(DEFAULT_FOLD_ATTRIBUTE, fenceCodeParameters.fold.enabled.toString());
 

src/Internal/Decorating/styles.ts

@@ -3,7 +3,7 @@ import { CodeStylerSettings } from "../types/settings";
 import { BODY_CLASS, STYLE_ELEMENT_ID } from "../constants/decoration";
 import { PREFIX } from "../constants/general";
 import { getTheme } from "../utils/themes";
-import { convertStylesToVars } from "../utils/settings";
+import { addExtraVars, convertStylesToVars } from "../utils/settings";
 import { BASE_THEME_MODE_STYLES } from "../constants/settings";
 
 const BODY_CLASSES = [
@@ -44,10 +44,9 @@ function getStyleText(
 	let styleString = ""
 
 	styleString += convertStylesToVars(BASE_THEME_MODE_STYLES)
-
+	styleString += addExtraVars()
 
 	// TODO:
-	console.log(styleString)
 	// styleThemeColours(plugin.settings.currentTheme.colours) + styleThemeSettings(plugin.settings.currentTheme.settings, obsidianTheme) + styleLanguageColours(plugin.settings.currentTheme.settings, plugin.settings.redirectLanguages, obsidianTheme)
 
 	return styleString

src/Internal/constants/interface.ts

@@ -10,3 +10,4 @@ export const EXAMPLE_INLINE_CODE_CONTENT = "print(\"This is true\" if x > 1 else
 export const EXAMPLE_INLINE_CODE_PARAMETERS = "python icon title:foo";
 
 export const BUTTON_TIMEOUT = 1000
+export const BUTTON_TRANSITION = 200

src/Internal/types/parsing.ts

@@ -10,7 +10,7 @@ export interface LinkInfo {
 }
 
 export class CodeParameters {
-	language: string | null = null;
+	language: string | null = "code";
 	title: string | null = null;
 	reference: string | null = null;
 	theme: string | null = null;

src/Internal/utils/settings.ts

@@ -1,6 +1,7 @@
 // TODO: Update
 
 import { PREFIX } from "../constants/general";
+import { BUTTON_TRANSITION } from "../constants/interface";
 import { DEFAULT_SETTINGS, THEME_DEFAULT_SETTINGS } from "../constants/settings";
 import { convertColoursToTheme } from "../constants/themes";
 import { Colour } from "../types/decoration";
@@ -25,6 +26,18 @@ export function convertStylesToVars(
 	return styleString
 }
 
+export function addExtraVars(): string {
+	let styleString = ""
+
+	styleString += "body.cs-plugin{\n";
+
+	styleString += `--cs-transition-length-button: ${BUTTON_TRANSITION}ms;\n`
+
+	styleString += "}\n"
+
+	return styleString
+}
+
 export function convertSettings(
 	settings: CodeStylerSettings
 ): CodeStylerSettings {

src/css/_old_variables.scss

@@ -1,4 +1,7 @@
+//TODO: To remove
+
 body.cs-plugin {
+	//TODO: To convert to code
 	--cs-language-border-header-colour: var(--cs-fence-header-language-title-background-colour);
 	--cs-language-border-separator-colour: var(--cs-fence-header-separator-background-colour);
 	--cs-language-border-gutter-colour: var(--cs-fence-gutter-background-colour);
@@ -6,6 +9,7 @@ body.cs-plugin {
 
 
 body.cs-plugin{
+	//TODO: To add directly
 	--cs-fence-gutter-active-text-colour: var(--code-normal);
 
 	--cs-fence-highlights-active-line-colour: var(--background-modifier-hover);

src/css/fence.scss

@@ -66,6 +66,10 @@ body.cs-plugin {
 					box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-border-separator-colour);
 				}
 
+				&:hover button{
+					opacity: 1 !important;
+				}
+
 				> div {
 					display: flex;
 					flex-direction: row;
@@ -74,9 +78,7 @@ body.cs-plugin {
 					white-space: nowrap;
 					z-index: inherit;
 
-					&:not(:first-child):not(.cs-separator) {
-						margin-left: var(--size-4-3);
-					}
+					margin-right: var(--size-4-3);
 				}
 
 				> div.cs-icon-container {
@@ -135,6 +137,7 @@ body.cs-plugin {
 
 					overflow-x: auto;
 					flex: 0 1 auto;
+					margin-right: var(--size-4-1);
 
 					&::before {
 						content: "";
@@ -156,10 +159,6 @@ body.cs-plugin {
 						height: 100%;
 					}
 
-					&:not(:first-child) {
-						margin-left: var(--size-4-1);
-					}
-
 					&::-webkit-scrollbar {
 						display: none;
 					}
@@ -184,6 +183,7 @@ body.cs-plugin {
 
 					overflow-x: auto;
 					flex: 0 1 auto;
+					margin-right: var(--size-4-1);
 
 					> div {
 						padding-left: var(--size-4-2);
@@ -210,9 +210,10 @@ body.cs-plugin {
 					}
 
 					button {
+						opacity: 0;
 						box-shadow: none;
 						height: 100%;
-						margin-left: var(--size-4-1);
+						margin-left: var(--size-4-2);
 						padding-left: var(--size-4-2);
 						padding-right: var(--size-4-2);
 
@@ -249,10 +250,6 @@ body.cs-plugin {
 						min-width: var(--size-4-3);
 						height: 100%;
 					}
-
-					&:not(:first-child) {
-						margin-left: var(--size-4-1);
-					}
 				}
 
 				> div.cs-execute-code-title {
@@ -374,6 +371,8 @@ body.cs-plugin {
 				margin-left: var(--size-4-4);
 				margin-bottom: var(--size-4-2);
 				z-index: 4;
+				display: block;
+				opacity: 0;
 
 				background-color: var(--cs-fence-button-inactive-background-colour);
 				color: var(--cs-fence-button-inactive-colour);
@@ -395,6 +394,14 @@ body.cs-plugin {
 				}
 			}
 		}
+		pre.cs-pre button {
+			transition: opacity, background-color, color;
+			transition-duration: var(--cs-transition-length-button);
+		}
+
+		pre.cs-pre:hover button {
+			opacity: 1;
+		}
 	}
 }
 

src/styles.scss

@@ -1,7 +1,5 @@
 /** Import stylesheets */
 @import url("./css/_settings.scss");
-@import url("./css/_variables.scss");
-
 @import url("./css/_style_settings.css");
 
 @import url("./css/fence.scss");
@@ -13,3 +11,6 @@
 // @import url("./css/pluginCompatibility.scss");
 
 @import url("./css/shiki.scss");
+
+//TODO: Remove
+@import url("./css/_old_variables.scss");