diff --git a/package.json b/package.json index 92dcbb3..11d7168 100644 --- a/package.json +++ b/package.json @@ -1,37 +1,67 @@ { - "name": "polacode", - "displayName": "Polacode", - "description": "📸 Polaroid for your code", - "version": "0.2.2", - "repository": { - "type": "git", - "url": "https://github.com/octref/polacode.git" - }, - "publisher": "pnp", - "keywords": [ - "polacode", - "polaroid", - "screenshot", - "snippet", - "share" - ], - "galleryBanner": { - "color": "#fbfbfb", - "theme": "light" - }, - "icon": "icon.png", - "categories": ["Other"], - "engines": { - "vscode": "^1.19.0" - }, - "activationEvents": ["onCommand:polacode.activate"], - "main": "./src/extension", - "contributes": { - "commands": [ - { - "command": "polacode.activate", - "title": "Polacode 📸" - } - ] - } + "name": "polacode", + "displayName": "Polacode", + "description": "📸 Polaroid for your code", + "version": "0.2.2", + "repository": { + "type": "git", + "url": "https://github.com/octref/polacode.git" + }, + "publisher": "pnp", + "keywords": [ + "polacode", + "polaroid", + "screenshot", + "snippet", + "share" + ], + "galleryBanner": { + "color": "#fbfbfb", + "theme": "light" + }, + "icon": "icon.png", + "categories": ["Other"], + "engines": { + "vscode": "^1.19.0" + }, + "activationEvents": ["onCommand:polacode.activate"], + "main": "./src/extension", + "contributes": { + "commands": [ + { + "command": "polacode.activate", + "title": "Polacode 📸" + } + ], + "configuration": { + "title": "Polacode Custom Styles", + "properties": { + "polacode.container.paddingLeft": { + "type": "number", + "default": "22", + "description": "Specifies the padding left that will be applied to the container" + }, + "polacode.container.paddingRight": { + "type": "number", + "default": "22", + "description": "Specifies the padding right that will be applied to the container" + }, + "polacode.container.paddingTop": { + "type": "number", + "default": "22", + "description": "Specifies the padding top that will be applied to the container" + }, + "polacode.container.paddingBottom": { + "type": "number", + "default": "22", + "description": "Specifies the padding bottom that will be applied to the container" + }, + "polacode.container.backgroundColor": { + "type": "string", + "default": "#f2f2f2", + "description": "Specifies the background color that will be applied to the container" + } + } + } + } } diff --git a/src/extension.js b/src/extension.js index cd5e357..014733c 100644 --- a/src/extension.js +++ b/src/extension.js @@ -2,6 +2,7 @@ const vscode = require('vscode') const path = require('path') const { writeFileSync } = require('fs') const { homedir } = require('os') +const customizations = vscode.workspace.getConfiguration("polacode").container; const writeSerializedBlobToFile = (serializeBlob, fileName) => { const bytes = new Uint8Array(serializeBlob.split(',')) @@ -40,7 +41,8 @@ function activate(context) { vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, { type: 'init', fontFamily, - bgColor + bgColor, + customizations }) }) }) diff --git a/src/webview/index.js b/src/webview/index.js index 2138e6b..4be2198 100644 --- a/src/webview/index.js +++ b/src/webview/index.js @@ -156,15 +156,16 @@ obturateur.addEventListener('mouseover', () => { window.addEventListener('message', e => { if (e) { if (e.data.type === 'init') { - const { fontFamily, bgColor } = e.data + const { fontFamily, bgColor, customizations } = e.data const initialHtml = getInitialHtml(fontFamily) snippetNode.innerHTML = initialHtml - // update backdrop color, using bgColor from last pasted snippet - // cannot deduce from initialHtml since it's always using Nord color + // update container padding and background color using user settings + snippetContainerNode.style.padding = `${customizations.paddingTop}px ${customizations.paddingRight}px ${customizations.paddingBottom}px ${customizations.paddingLeft}px`; + if (isDark(bgColor)) { - snippetContainerNode.style.backgroundColor = '#f2f2f2' + snippetContainerNode.style.backgroundColor = customizations.backgroundColor } else { snippetContainerNode.style.background = 'none' }