feat: UI overhaul

* Update README.md + new screenshot * Simplify CSS + js * Translations: Add remaining text strings to php for i18n * Update README with new screenshot --------- Co-authored-by: Erik van der Bas <[email protected]>
smithfield-studio · Nov 5, 2024 · c0312c4 · c0312c4
1 parent 1b28f57
commit c0312c4
Show file tree

Hide file tree

Showing 6 changed files with 267 additions and 308 deletions.
diff --git a/README.md b/README.md
@@ -3,11 +3,7 @@
 
 # ACF SVG Icon Picker Field
 
-Forked from [houke/acf-icon-picker](https://github.com/houke/acf-icon-picker) (which is no longer in active dev), updated to work with ACF v6.3 and above.
-
-## Description
-
-Add the svg icons you want to be available in your theme to an acf folder inside an img folder in your theme. The field returns the name of the svg.
+Add an ACF field to your theme that lets users easily select SVG icons from a specified folder. The field returns the SVG's name.
 
 ## Compatibility
 
@@ -18,7 +14,7 @@ This ACF field type is compatible with:
 
 ## Screenshots
 
-![SVG Icon Picker](/screenshots/example.png)
+![SVG Icon Picker Popup](/screenshots/example-popup.jpg)
 
 ## Installation
 
@@ -27,10 +23,10 @@ Run `composer require smithfield-studio/acf-svg-icon-picker` and activate the pl
 
 ### Manually
 1. Copy the `acf-svg-icon-picker` folder into your `wp-content/plugins` folder
-2. Activate the Icon Selector plugin via the plugins admin page
-3. Create a new field via ACF and select the Icon Selector type
+2. Activate the plugin
+3. Create a new ACF field and select the SVG Icon Picker type
 
-## Switch from ACF Icon Picker to ACF SVG Icon Picker
+## Switch from the legacy 'ACF Icon Picker' to 'ACF SVG Icon Picker'
 If you're coming from the original ACF Icon Picker plugin, you can switch to this plugin by following these steps:
 
 1. Deactivate the old *ACF Icon Picker plugin*
@@ -99,6 +95,9 @@ $fields->addField('my_icon', 'svg_icon_picker', [
 ])
 ```
 
+## Originally Forked from [houke/acf-icon-picker](https://github.com/houke/acf-icon-picker)
+Updated to work with ACF v6.3 and above.
+
 ## Changelog
 
 * 3.1.0 - Changed name of field to `svg_icon_picker` to avoid conflicts with vanilla ACF Icon Picker field.

diff --git a/assets/css/input.css b/assets/css/input.css
@@ -1,134 +1,148 @@
-.acf-svg-icon-picker__popup * {
-	box-sizing: border-box;
-}
-
-.acf-svg-icon-picker__svg,
-.acf-svg-icon-picker__popup-svg {
-	position: relative;
-	width: 50px;
-	height: 50px;
-}
-
-.acf-svg-icon-picker__popup-svg {
-	margin: 0 auto;
-}
-
-.acf-svg-icon-picker__popup-svg img,
-.acf-svg-icon-picker__svg img {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	display: block;
-	max-width: 50px;
-	max-height: 50px;
-	transform: translate(-50%, -50%);
+:root {
+  --acfsip-border-radius: 4px;
+  --acfsip-spacing: 10px;
 }
 
-.acf-svg-icon-picker__img {
-	width: 60px;
-	cursor: pointer;
+/* Icon Selector Button */
+.acf-svg-icon-picker__selector {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 50px;
+  background-color: #eee;
+  width: 50px;
+  height: 50px;
+  color: #aaa;
+  font-weight: 300;
+  font-size: 20px;
+  user-select: none;
 }
 
-.acf-svg-icon-picker__popup {
-	overflow: auto;
-	width: 500px;
-	height: 400px;
-	padding: 20px;
-	background-color: #fff;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+.acf-svg-icon-picker__selector:hover {
+  background-color: #ddd;
 }
 
-.acf-svg-icon-picker__popup__title {
-	margin: 0 0 10px;
-	float: left;
+.acf-svg-icon-picker__icon {
+  padding: 15px;
+  width: 100%;
+  text-align: center;
 }
 
-.acf-svg-icon-picker__popup__close {
-	display: inline-block;
-	margin: 0 0 10px;
-	float: right;
+.acf-svg-icon-picker__icon img {
+  width: 100%;
+  height: 100%;
 }
 
-.acf-svg-icon-picker__popup ul {
-	position: relative;
-	margin: 0;
+.acf-svg-icon-picker__remove {
+  display: none;
+  appearance: none;
+  cursor: pointer;
+  margin-top: 5px;
+  border: 1px solid #e1e1e1;
+  border-radius: var(--acfsip-border-radius);
+  background-color: #f4f4f4;
+  padding: 4px;
+  font-size: 11px;
+  line-height: 1;
 }
 
-.acf-svg-icon-picker__popup ul::before,
-.acf-svg-icon-picker__popup ul::after {
-	display: table;
-	width: 100%;
-	content: "";
+.acf-svg-icon-picker__remove:hover {
+  background-color: indianred;
+  color: white;
 }
 
-.acf-svg-icon-picker__popup ul li {
-	position: absolute;
-	width: 25%;
-	padding: 10px;
-	cursor: pointer;
-	float: left;
+.acf-svg-icon-picker__remove--active {
+  display: inline-block;
 }
 
-.acf-svg-icon-picker__popup ul li:nth-child(4n+1) {
-	clear: left;
+/* Popup */
+.acf-svg-icon-picker__popup * {
+  box-sizing: border-box;
+  margin: 0;
 }
 
-.acf-svg-icon-picker__popup ul li:hover {
-	background-color: #eee;
+.acf-svg-icon-picker__popup-overlay {
+  display: grid;
+  position: fixed;
+  place-items: center;
+  z-index: 99999;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
-.acf-svg-icon-picker__popup ul li span {
-	display: block;
-	margin: 10px auto 0;
-	color: #222;
-	font-size: 12px;
-	text-align: center;
-	text-transform: capitalize;
+.acf-svg-icon-picker__popup {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  border-radius: var(--acfsip-border-radius);
+  background-color: #fff;
+  width: min(500px, 98vw);
+  height: 400px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.acf-svg-icon-picker__popup-header {
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--acfsip-spacing);
+  z-index: 1;
+  background-color: #f4f4f4;
+  padding: 20px;
+  line-height: 1;
+}
+
+.acf-svg-icon-picker__popup-close {
+  padding: 0;
+  border: none;
+  background-color: transparent;
 }
 
-.acf-svg-icon-picker__popup-holder {
-	position: fixed;
-	z-index: 99999;
-	inset: 0;
-	display: grid;
-	background-color: rgba(0, 0, 0, 0.8);
-	place-items: center;
+.acf-svg-icon-picker__popup ul {
+  display: grid;
+  position: relative;
+  grid-template-columns: repeat(var(--acfsip-columns, 4), calc(25% - var(--acfsip-spacing)));
+  gap: var(--acfsip-spacing);
+  padding: 20px;
 }
 
-.acf-svg-icon-picker__svg--span {
-	display: inline-block;
-	width: 50px;
-	height: 50px;
-	border-radius: 50px;
-	background-color: #eee;
-	color: #aaa;
-	font-size: 20px;
-	font-weight: 300;
-	line-height: 50px;
-	text-align: center;
+.acf-svg-icon-picker__popup ul li {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: var(--acfsip-border-radius);
+  padding: var(--acfsip-spacing);
 }
 
-.acf-svg-icon-picker__svg--span:hover {
-	background-color: #ddd;
+.acf-svg-icon-picker__popup ul li:hover {
+  background-color: #eee;
 }
 
-.acf-svg-icon-picker__remove {
-	display: none;
-	padding: 2px;
-	border: 1px solid #e1e1e1;
-	margin-top: 5px;
-	background-color: #f4f4f4;
-	cursor: pointer;
-	font-size: 11px;
-	line-height: 1;
+.acf-svg-icon-picker__popup ul li img {
+  max-height: 50px;
+  max-width: 100%;
 }
 
-.acf-svg-icon-picker__remove--active {
-	display: inline-block;
+.acf-svg-icon-picker__popup ul li span {
+  display: block;
+  margin: 10px auto 0;
+  color: #222;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  hyphens: auto;
+  text-transform: capitalize;
 }
 
 .acf-svg-icon-picker__filter {
-	width: 100%;
-	padding: 12px;
-	border-radius: 4px;
-}
+  border-radius: var(--acfsip-border-radius);
+  padding: 12px;
+  width: 100%;
+}