](https://github.com/lucaorio/sketch-styles-generator)
21 | [
](https://github.com/lucaorio/sketch-reverse)
22 |
23 | ## Contents
24 |
25 | - [Installation](#installation)
26 | - [Usage](#usage)
27 | - [Integrations](#integrations)
28 | - [License](#license)
29 | - [Contacts](#contacts)
30 |
31 | ## Installation
32 |
33 | #### Manual
34 |
35 | - [Download](https://github.com/lucaorio/sketch-resize/releases/latest) the latest release of the plugin [`sketch-resize.zip`](https://github.com/lucaorio/sketch-resize/releases/latest)
36 | - Uncompress the downloaded file
37 | - Double-click `Sketch Resize.sketchplugin` to install
38 |
39 | #### Via Sketch Runner
40 |
41 | - Trigger [Sketch Runner](http://bit.ly/SketchRunnerWebsite) (`cmd+'`)
42 | - Move to the _Install_ tab
43 | - Search for _Resize_, and install
44 |
45 | ## Usage
46 |
47 | - **Select** layer(s)
48 | - **Run** the plugin by clicking `Plugins->Resize->Resize Elements`, or by using the `ctrl+cmd+k` shortcut
49 | - Specify the new **dimension(s)**, and press `enter` to confirm
50 |
51 | #### Some additional notes
52 |
53 | - The plugin can be used on _single layers_, too
54 | - Width/height can be both _declared at once_. Leaving a field empty, or in its default state (%w/%h) will _skip_ the related dimension
55 | - Width/height input fields accepts _basic math operations_ (ie.`%w+%h+(10+20)-8/4*2`), where %w/%h are references to the _original size of each layer_
56 | - Press `tab` to _focus_ between the width/height input fields, and cancel/confirm buttons
57 | - Press `esc` to _close the panel_ and leave the dimensions unchanged
58 | - Pressing `enter` will always trigger the _confirm_ button, no matter the focused element
59 |
60 | 
61 |
62 | ## Integrations
63 |
64 | _Sketch Resize_ is fully integrated with [Sketch Runner](http://bit.ly/SketchRunnerWebsite), the ultimate tool to speed up your Sketch workflow. You can trigger the plugin by simply typing its name.
65 |
66 | 
67 |
68 |
69 | 
70 |
71 |
72 |
73 | 
74 |
75 |
76 | ## License
77 |
78 | 
79 |
80 | ---
81 |
82 | ## Contacts
83 |
84 | - 🐦 Twitter [@lucaorio\_](http://twitter.com/@lucaorio_)
85 | - 🕸 Website [lucaorio.com](http://lucaorio.com)
86 | - 📬 Email [luca.o@me.com](mailto:luca.o@me.com)
87 |
--------------------------------------------------------------------------------
/resources/webview/script.js:
--------------------------------------------------------------------------------
1 | // disable context menu
2 | document.addEventListener('contextmenu', event => {
3 | event.preventDefault();
4 | });
5 |
6 | // cancel button
7 | document.getElementById('cancel').addEventListener('click', event => {
8 | event.preventDefault();
9 | window.postMessage('cancel');
10 | });
11 |
12 | // submit on enter
13 | document.addEventListener('keypress', event => {
14 | if (event.keyCode !== 13) return;
15 | event.preventDefault();
16 | window.postMessage('submit', getValues());
17 | });
18 |
19 | // submit button
20 | document.getElementById('submit').addEventListener('click', event => {
21 | event.preventDefault();
22 | window.postMessage('submit', getValues());
23 | });
24 |
25 | // get inputs value
26 | const getValues = () => ({
27 | width: document.getElementById('width').value,
28 | height: document.getElementById('height').value
29 | });
30 |
--------------------------------------------------------------------------------
/resources/webview/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | overflow: hidden;
4 | padding: 1px;
5 | color: #9c9c9c;
6 | background: #171717;
7 | font-family: -apple-system;
8 | font-size: 13px;
9 | line-height: 20px;
10 | cursor: default;
11 | }
12 |
13 | *,
14 | *:before,
15 | *:after {
16 | position: relative;
17 | box-sizing: inherit;
18 | margin: 0;
19 | padding: 0;
20 | -webkit-user-select: none;
21 | user-select: none;
22 | }
23 |
24 | input,
25 | textarea {
26 | -webkit-user-select: auto;
27 | user-select: auto;
28 | }
29 |
30 | /* -------------------------------- */
31 | /* header/menubar */
32 | /* -------------------------------- */
33 |
34 | header {
35 | border-bottom: 1px solid #000000;
36 | height: 37px;
37 | color: rgba(255, 255, 255, 0.7);
38 | background-color: #242424;
39 | font-weight: 600;
40 | line-height: 37px;
41 | text-align: center;
42 | }
43 |
44 | /* -------------------------------- */
45 | /* section/content */
46 | /* -------------------------------- */
47 |
48 | section {
49 | padding: 24px;
50 | }
51 |
52 | section > p.info {
53 | margin-bottom: 16px;
54 | font-weight: 400;
55 | color: rgba(255, 255, 255, 0.7);
56 | }
57 |
58 | section > p.info > strong {
59 | color: #ffffff;
60 | }
61 |
62 | section > div {
63 | font-size: 0;
64 | }
65 |
66 | section > div > input {
67 | display: inline-block;
68 | margin-bottom: 16px;
69 | border: 2px solid #242424;
70 | border-radius: 4px;
71 | padding: 12px;
72 | width: calc(50% - 4px);
73 | background-color: #242424;
74 | color: #ffffff;
75 | font-size: 13px;
76 | }
77 |
78 | section > div > input:focus {
79 | outline: 0;
80 | border: 2px solid #1c7ed5;
81 | }
82 |
83 | section > div > input::placeholder {
84 | color: rgba(255, 255, 255, 0.4);
85 | }
86 |
87 | section > div > input#width {
88 | margin-right: 8px;
89 | }
90 |
91 | section > p.tip {
92 | font-size: 12px;
93 | font-weight: 400;
94 | color: rgba(255, 255, 255, 0.4);
95 | }
96 |
97 | /* -------------------------------- */
98 | /* footer/actions */
99 | /* -------------------------------- */
100 |
101 | footer {
102 | border-top: 1px solid rgba(255, 255, 255, 0.1);
103 | padding: 16px 24px;
104 | background-color: #242424;
105 | font-size: 0;
106 | text-align: right;
107 | }
108 |
109 | footer > button {
110 | display: inline-block;
111 | height: 40px;
112 | border: 0;
113 | border-radius: 4px;
114 | padding: 0 12px;
115 | color: #ffffff;
116 | font-size: 13px;
117 | line-height: 16px;
118 | font-weight: 600;
119 | }
120 |
121 | footer > button:focus {
122 | outline: 0;
123 | }
124 |
125 | footer > button:focus:after {
126 | content: '';
127 | display: block;
128 | position: absolute;
129 | top: -5px;
130 | left: -5px;
131 | width: calc(100% + 10px);
132 | height: calc(100% + 10px);
133 | border: 2px solid #1c7ed5;
134 | border-radius: 6px;
135 | }
136 |
137 | footer > button#cancel {
138 | margin-right: 8px;
139 | border: 1px solid rgba(255, 255, 255, 0.4);
140 | background-color: transparent;
141 | }
142 |
143 | footer > button#cancel:hover {
144 | background-color: rgba(255, 255, 255, 0.1);
145 | }
146 |
147 | footer > button#submit {
148 | border: 1px solid #1c7ed5;
149 | background-color: #1c7ed5;
150 | }
151 |
152 | footer > button#submit:hover {
153 | background-color: #186bb5;
154 | }
155 |
--------------------------------------------------------------------------------
/resources/webview/webview.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Enter the new width/height of every selected element.
17 |
18 |
19 |
20 |
21 | 22 | Use %w, and %h as wildcards for math operations (i.e. %w + 24). The resizing is unconstrained, 23 | and doesn't affect any other property like corner radius, border thickness, shadow size, etc. 24 |
25 |