Hours of Operation Widget

.travis.yml

@@ -6,7 +6,7 @@ language:
 
 php:
   - 5.6
-  - 7.0
+  - 7.1
 
 env:
   - WP_VERSION=4.4 WP_MULTISITE=0

Gruntfile.js

@@ -29,9 +29,12 @@ module.exports = function(grunt) {
 				files: [{
 					expand: true,
 					cwd: 'assets/css',
-					src: ['*.css', '!*.min.css'],
+					src: ['*.css', '!*.min.css', '!*.timepicker.css'],
 					dest: 'assets/css',
 					ext: '.min.css'
+				},
+				{
+					'assets/css/jquery.timepicker.min.css': ['assets/css/jquery.timepicker.css']
 				}]
 			}
 		},
@@ -45,8 +48,13 @@ module.exports = function(grunt) {
 				cwd: 'assets/js',
 				dest: 'assets/js',
 				ext: '.min.js',
-				src: ['*.js', '!*.min.js']
-			}
+				src: ['*.js', '!*.min.js', '!*.timepicker.js']
+			},
+			timepicker: {
+				files: {
+					'assets/js/jquery.timepicker.min.js': ['assets/js/jquery.timepicker.js']
+				}
+			},
 		},
 
 		watch: {
@@ -59,7 +67,7 @@ module.exports = function(grunt) {
 				tasks: ['cssmin']
 			},
 			uglify: {
-				files: ['*.js', '!*.js.css'],
+				files: ['*.js', '!*.min.js'],
 				options: {
 					cwd: 'assets/js',
 					nospawn: true

assets/css/admin.css

@@ -2,7 +2,6 @@
  * Form fields
  */
 .wpcw-widget .form {
-	overflow: auto;
 	margin-bottom: 1em;
 }
 .wpcw-widget .title {
@@ -93,3 +92,105 @@
 .wpcw-widget-social .icons a.inactive:not(:hover) {
 	color: #ccc;
 }
+
+/**
+ * Hours of Operation Widget
+ */
+.wpcw-widget-hours .day-row {
+	display: inline-block;
+	width: 100%;
+	padding: 6px 0;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.wpcw-widget-hours [class~='day-row']:last-of-type {
+	margin-bottom: 1em;
+	border-bottom: none;
+}
+
+.wpcw-widget-hours .day-row-top {
+	padding: 6px 0;
+}
+
+.wpcw-widget-hours .day-row-top:hover {
+	cursor: pointer;
+}
+
+.wpcw-widget-hours .day-row-top strong {
+	font-weight: 500;
+}
+
+.wpcw-widget-hours .toggle-icon {
+	float: right;
+	margin-top: -3px;
+}
+
+.wpcw-widget-hours .status-open-label,
+.wpcw-widget-hours .status-closed-label {
+	float: right;
+	width: 40%;
+	margin-right: 5px;
+	font-weight: 500;
+	font-size: 12px;
+	text-transform: uppercase;
+}
+
+.wpcw-widget-hours .status-open-label {
+	color: #59CE45;
+}
+
+.wpcw-widget-hours .status-closed-label {
+	opacity: 0.5;
+}
+
+.wpcw-widget-hours .day-row.status-open .status-open-label,
+.wpcw-widget-hours .day-row.status-closed .status-closed-label {
+	display: block;
+}
+
+.wpcw-widget-hours .day-row.status-open .status-closed-label,
+.wpcw-widget-hours .day-row.status-closed .status-open-label {
+	display: none;
+}
+
+.wpcw-widget-hours .day-row-container {
+	display: none;
+	float: left;
+	width: 100%;
+	margin: 10px 0 6px;
+}
+
+.wpcw-widget-hours .time-block {
+	width: 100%;
+	float: left;
+	margin-bottom: 10px;
+}
+
+.wpcw-widget-hours .day-row-container div:last-of-type {
+	margin-bottom: 15px;
+}
+
+.wpcw-widget-hours .time-block .timeselect {
+	width: calc(40% - 5px);
+	margin-right: 5px;
+	min-height: 28px;
+}
+
+.wpcw-widget-hours .time-block .button {
+	width: calc(19% - 5px);
+	font-size: 18px;
+	text-align: center;
+	line-height: 1.2;
+}
+
+.wpcw-widget-hours .apply-to-all {
+	float: left;
+}
+
+.wpcw-widget-hours .status-closed-checkbox {
+	float: right;
+}
+
+.wpcw-widget-hours .status-closed-checkbox input {
+	margin: 0px 0 0 5px;
+}

assets/css/jquery.timepicker.css

@@ -0,0 +1,72 @@
+.ui-timepicker-wrapper {
+	overflow-y: auto;
+	height: 150px;
+	width: 6.5em;
+	background: #fff;
+	border: 1px solid #ddd;
+	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	outline: none;
+	z-index: 10001;
+	margin: 0;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration {
+	width: 13em;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
+.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
+	width: 11em;
+}
+
+.ui-timepicker-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ui-timepicker-duration {
+	margin-left: 5px; color: #888;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-duration {
+	color: #888;
+}
+
+.ui-timepicker-list li {
+	padding: 3px 0 3px 5px;
+	cursor: pointer;
+	white-space: nowrap;
+	color: #000;
+	list-style: none;
+	margin: 0;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-selected {
+	background: #fff; color: #000;
+}
+
+li.ui-timepicker-selected,
+.ui-timepicker-list li:hover,
+.ui-timepicker-list .ui-timepicker-selected:hover {
+	background: #1980EC; color: #fff;
+}
+
+li.ui-timepicker-selected .ui-timepicker-duration,
+.ui-timepicker-list li:hover .ui-timepicker-duration {
+	color: #ccc;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled,
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	color: #888;
+	cursor: default;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	background: #f2f2f2;
+}

assets/css/style.css

@@ -1,17 +1,21 @@
 .wpcw-widget-contact ul,
-.wpcw-widget-social ul {
+.wpcw-widget-social ul,
+.wpcw-widget-hours ul {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 .wpcw-widget-contact ul li,
-.wpcw-widget-social ul li.has-label {
+.wpcw-widget-social ul li.has-label,
+.wpcw-widget-hours ul li {
 	padding: 10px 0;
 }
 .wpcw-widget-contact ul li:before,
 .wpcw-widget-contact ul li:after,
 .wpcw-widget-social ul li:before,
-.wpcw-widget-social ul li:after {
+.wpcw-widget-social ul li:after,
+.wpcw-widget-hours ul li:before,
+.wpcw-widget-hours ul li:after {
 	display: none;
 }
 .wpcw-widget-contact ul li div {
@@ -22,9 +26,21 @@
 	margin: 0 0.75em 0.75em 0;
 	border: none;
 }
-.wpcw-widget-social ul li.has-label a {
+.wpcw-widget-social ul li.has-label a,
+.wpcw-widget-hours ul li strong.day,
+.wpcw-widget-hours ul li time {
 	display: block;
 }
 .wpcw-widget-social ul li.has-label span {
 	margin-right: 0.25em;
 }
+.wpcw-widget-hours .wpcw-open-sign {
+	font-weight: bold;
+	text-transform: uppercase;
+}
+.wpcw-widget-hours .wpcw-open-sign.open {
+	color: #32cd32;
+}
+.wpcw-widget-hours .wpcw-open-sign.closed {
+	color: #ccc;
+}