Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Implement the drag & drop layout manager option #105

Closed
wants to merge 7 commits into
from
View
@@ -0,0 +1,298 @@
+/*-------------------------------------------------------------------------------------------*/
+/* OptionsFramework Admin Styles */
+/*-------------------------------------------------------------------------------------------*/
+
+.updated {
+ max-width:764px;
+ margin-bottom:0px !important;
+}
+#optionsframework {
+ position:relative;
+ z-index: 0;
+ max-width:780px;
+ background:#fff;
+}
+#optionsframework h3 {
+ cursor: default;
+}
+#optionsframework p {
+ margin-bottom:0;
+ padding-bottom:10px;
+ line-height: 1.4em;
+}
+#optionsframework .section {
+ padding:10px 10px 0;
+}
+#optionsframework .group {
+ padding-bottom:40px;
+}
+#optionsframework .section .heading {
+ padding:10px 0px;
+ margin:0 0 15px;
+ border-bottom: 1px solid #dfdfdf;
+}
+#optionsframework .section .controls {
+ float: left;
+ min-width:350px;
+ width: 54%;
+ padding-right:2%;
+}
+#optionsframework .section .explain {
+ max-width:38%;
+ float: left;
+ font-size: 12px;
+ line-height:16px;
+ color: #777;
+}
+#optionsframework .section-checkbox .controls {
+ width: 98%;
+}
+#optionsframework .section-checkbox .explain {
+ max-width:94%;
+}
+#optionsframework .section-color .controls {
+ min-width:125px;
+ width:125px
+}
+#optionsframework .controls input, #optionsframework .controls select, #optionsframework .controls textarea {
+ margin-bottom:10px;
+ width:100%;
+}
+#optionsframework .section-radio label, #optionsframework .section-multicheck label {
+ float:left;
+ max-width:90%;
+ line-height: 16px;
+ margin-bottom: 5px;
+}
+#optionsframework input.checkbox, #optionsframework input.of-radio {
+ width: 30px;
+ margin-top:2px;
+ float:left;
+ clear:both;
+}
+#optionsframework .controls .of-color {
+ float:left;
+ width: 80px;
+ margin-left:5px;
+ margin-right:5px;
+}
+#optionsframework .controls .of-typography-size {
+ width:80px;
+ margin-left:5px;
+ float:left
+}
+#optionsframework .controls .of-typography-unit {
+ width:50px;
+ margin-left:5px;
+ float:left
+}
+#optionsframework .controls .of-typography-face {
+ width:100px;
+ margin-left:5px;
+ float:left
+}
+#optionsframework .controls .of-typography-style {
+ width:80px;
+ margin-left:5px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework .of-background-properties {
+ clear:both;
+ margin-top: 18px;
+}
+#optionsframework .controls .of-background-repeat {
+ width:125px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework .controls .of-background-position {
+ width:125px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework .controls .of-background-attachment {
+ width:125px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework div.section-background .controls input.upload {
+ width:47%;
+}
+#optionsframework .controls .of-radio-img-img {
+ border:3px solid #f9f9f9;
+ margin:0 5px 10px 0;
+ display:none;
+ cursor:pointer;
+ float:left;
+}
+#optionsframework .controls .of-radio-img-selected {
+ border:3px solid #ccc
+}
+#optionsframework .controls .of-radio-img-img:hover {
+ opacity:.8;
+}
+#optionsframework .controls .of-border-width {
+ width:80px;
+ float:left
+}
+#optionsframework .controls .of-border-style {
+ width:120px;
+ float:left
+}
+#optionsframework .hide {
+ display:none;
+}
+#optionsframework .of-option-image {
+ max-width:340px;
+ margin:3px 0 18px 0;
+}
+#optionsframework .mini .controls select, #optionsframework .section .mini .controls {
+ width: 140px;
+}
+#optionsframework .mini .controls input, #optionsframework .mini .controls {
+ min-width:140px;
+ width: 140px;
+}
+#optionsframework .mini .explain {
+ max-width:74%;
+}
+
+/* Editor */
+
+#optionsframework .section-editor .explain {
+ max-width: 98%;
+ float:none;
+ margin-bottom:5px;
+}
+
+/* Image Uploader */
+
+#optionsframework .controls input.upload {
+ width:80%;
+}
+#optionsframework .controls input.upload_button {
+ float:right;
+ width:45px;
+ border-color:#BBBBBB;
+ cursor:pointer;
+ height:16px;
+}
+#optionsframework .controls input.upload_button:hover {
+ border-color:#666666;
+ color:#000;
+}
+#optionsframework .screenshot {
+ float:left;
+ margin-left:1px;
+ position:relative;
+ width:344px;
+ margin-top:3px;
+}
+#optionsframework .screenshot img {
+ background:#FAFAFA;
+ border-color:#ccc #eee #eee #ccc;
+ border-style:solid;
+ border-width:1px;
+ float:left;
+ max-width:334px;
+ padding:4px;
+ margin-bottom:10px;
+}
+#optionsframework .screenshot .mlu_remove {
+ background:url("../images/ico-delete.png") no-repeat;
+ border:medium none;
+ bottom:4px;
+ display:block;
+ float:left;
+ height:16px;
+ padding:0;
+ position:absolute;
+ left:-4px;
+ text-indent:-9999px;
+ width:16px;
+}
+#optionsframework .screenshot .no_image .file_link {
+ margin-left: 20px;
+}
+#optionsframework .screenshot .no_image .mlu_remove {
+ bottom: 0px;
+}
+#optionsframework .reset-button {
+ float:left;
+ cursor:pointer;
+}
+
+/* Sorter */
+
+#optionsframework .sorter {margin-right: -20px;}
+#optionsframework .sorter ul {
+ background: #F9F9F9;
+ border: 1px dashed #E3E3E3;
+ min-height: 40px;
+ padding: 10px 10px 0;
+ width: 175px;
+ float: left;
+ margin: 0 15px 0 0;
+}
+#optionsframework .sorter ul h3 {
+ margin: 0 0 10px;
+ text-align: center;
+ color: #777;
+ text-transform: capitalize;
+}
+#optionsframework .disabled {
+ color: #aaa;
+}
+#optionsframework .sorter ul li {
+ border: 1px solid #DFDFDF;
+ cursor: move;
+ font-weight: bold;
+ margin-bottom:10px;
+ padding:0 10px;
+ height: 40px;
+ line-height: 40px;
+ background-color: #F1F1F1;
+ background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+ background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: linear-gradient(top,#f9f9f9,#ececec);
+ overflow: hidden;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: inset 0 1px 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 #fff;
+ box-shadow: inset 0 1px 0 #fff;
+ text-align:center;
+}
+#optionsframework .section-sorter li.placeholder {
+ background:#f9f9f9;
+ border-width:1px;
+ border-style:dashed;
+ height:40px;
+ }
+
+/* Bottom Section */
+
+#optionsframework-submit {
+ padding: 7px 10px;
+ border-top: 1px solid #ECECEC;
+ background-color: #F1F1F1;
+ background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);
+}
+#optionsframework .button-primary {
+ float:right;
+}
+
+/* Bottom Section */
+
+#optionsframework .section:before, #optionsframework .section:after {
+ content: "";
+ display: table;
+}
+#optionsframework .section:after {
+ clear: both;
+}
View
@@ -223,6 +223,58 @@
cursor:pointer;
}
+/* Sorter */
+
+#optionsframework .sorter {margin-right: -20px;}
+#optionsframework .sorter ul {
+ background: #F9F9F9;
+ border: 1px dashed #E3E3E3;
+ min-height: 40px;
+ padding: 10px 10px 0;
+ width: 175px;
+ float: left;
+ margin: 0 15px 0 0;
+}
+#optionsframework .sorter ul h3 {
+ margin: 0 0 10px;
+ text-align: center;
+ color: #777;
+ text-transform: capitalize;
+}
+#optionsframework .disabled {
+ color: #aaa;
+}
+#optionsframework .sorter ul li {
+ border: 1px solid #DFDFDF;
+ cursor: move;
+ font-weight: bold;
+ margin-bottom:10px;
+ padding:0 10px;
+ height: 40px;
+ line-height: 40px;
+ background-color: #F1F1F1;
+ background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+ background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: linear-gradient(top,#f9f9f9,#ececec);
+ overflow: hidden;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: inset 0 1px 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 #fff;
+ box-shadow: inset 0 1px 0 #fff;
+ text-align:center;
+}
+#optionsframework .section-sorter li.placeholder {
+ background:#f9f9f9;
+ border-width:1px;
+ border-style:dashed;
+ height:40px;
+ }
+
/* Bottom Section */
#optionsframework-submit {
View
@@ -7,6 +7,30 @@ jQuery(document).ready(function($) {
// Fade out the save message
$('.fade').delay(1000).fadeOut(1000);
+
+ // Sorter (Layout Manager)
+ jQuery('.sorter').each( function() {
+ var id = jQuery(this).attr('id');
+ $('#'+ id).find('ul').sortable({
+ items: 'li',
+ placeholder: "placeholder",
+ connectWith: '.sortlist_' + id,
+ opacity: 0.6,
+ update: function() {
+ $(this).find('.position').each( function() {
+
+ var listID = $(this).parent().attr('id');
+ var parentID = $(this).parent().parent().attr('id');
+ parentID = parentID.replace(id + '_', '');
+ var optionID = $(this).parent().parent().parent().attr('id');
+ var nameTheme = $(this).attr('class');
+ nameTheme = nameTheme.replace('position ', '');
+ $(this).prop("name", nameTheme + '[' + optionID + '][' + parentID + '][' + listID + ']');
+
+ });
+ }
+ });
+ });
// Color Picker
$('.colorSelector').each(function(){
Oops, something went wrong.