binda 0.0.7 → 0.1.0

data/app/assets/javascripts/binda/index.js

@@ -4,17 +4,40 @@
 
 import { _FormItem }         from './components/form_item'
 import { _FormItemRepeater } from './components/form_item_repeater'
-import { _FormItemAsset }    from './components/form_item_asset'
+import { _FormItemImage }    from './components/form_item_image'
 import { _FormItemChoice }   from './components/form_item_choice'
 import { _FormItemEditor }   from './components/form_item_editor'
+import { _FileUpload }       from './components/fileupload'
+import { _Shader }           from './components/login-shader'
+import { _LoginForm }        from './components/login_form'
 import setupSortable         from './components/sortable'
+import setupFieldGroupEditor from './components/field_group_editor'
+import setupBootstrap        from './components/bootstrap'
+import setupSelect2          from './components/select2'
+import setupRadioToggle      from './components/radio-toggle'
 
 $(document).ready( function()
 {
 	if ( _FormItem.isSet() )         { _FormItem.setEvents() }
 	if ( _FormItemRepeater.isSet() ) { _FormItemRepeater.setEvents() }
-	if ( _FormItemAsset.isSet() )    { _FormItemAsset.setEvents() }
+	if ( _FormItemImage.isSet() )    { _FormItemImage.setEvents() }
 	if ( _FormItemChoice.isSet() )   { _FormItemChoice.setEvents() }
 	if ( _FormItemEditor.isSet() )   { _FormItemEditor.setEvents() }
+	if ( _FileUpload.isSet() )       { _FileUpload.setEvents() }
+  if ( _LoginForm.isSet() )        { _LoginForm.setEvents() }
+  if ( _Shader.isSet() ) 
+  {
+		_Shader.setup()
+		_Shader.start()
+  }
+	setupRadioToggle()
 	setupSortable()
-})
+	setupFieldGroupEditor()
+	setupBootstrap()
+	setupSelect2()
+})
+
+// handle event
+window.addEventListener("optimizedResize", function() {
+  if ( _Shader.isSet() ) { _Shader.resize() }
+});

data/app/assets/stylesheets/binda/application.scss

@@ -0,0 +1,6 @@
+@import "bourbon";
+@import "bootstrap/bootstrap";
+@import "bootstrap/bootstrap-select";
+@import "font-awesome/fontawesome";
+@import "select2/select2.min";
+@import "index";

data/app/assets/stylesheets/binda/components/assets_manager.scss

@@ -1,46 +1,56 @@
-#assets-manager-index {
-	display: none;
+#assets-manager-index
+{
+  display: none;
 }
 
-.assets-manager--list {
-	list-style: none;
-	width: 100%;
+.assets-manager--list
+{
+  width: 100%;
+  list-style: none;
 }
 
-.assets-manager--item {
-	position: relative;
-	display: inline-block;
-	padding: $font-size-base / 2;
-	margin-bottom: $font-size-base * 2;
-	@extend .box-shadowed;
-	transition: all 0.3s ease-in-out;
+.assets-manager--item
+{
+  position: relative;
+  display: inline-block;
+  margin-bottom: $font-size-base * 2;
+  padding: $font-size-base / 2;
+  transition: all .3s ease-in-out;
 
-	&:hover {
-		@extend .box-shadowed-up;
-	}
+  @extend .box-shadowed;
+
+  &:hover
+  {
+    @extend .box-shadowed-up;
+  }
 }
 
-.assets-manager--image-buttons {
-	position: absolute;
-	top: 8px;
-	right: 8px;
+.assets-manager--image-buttons
+{
+  position: absolute;
+  top: 8px;
+  right: 8px;
 
-	a {
-		display: block;
-		padding: 3px;
-		margin: 3px;
-		background-color: #FFF;
-		opacity: 0.7;
-		transition: opacity 0.3s ease-in;
-	}
-	a:hover {
-		opacity: 1;
-	}
+  a
+  {
+    display: block;
+    margin: 3px;
+    padding: 3px;
+    transition: opacity .3s ease-in;
+    opacity: .7;
+    background-color: #fff;
+  }
+  a:hover
+  {
+    opacity: 1;
+  }
 }
 
-.assets-manager--selected {
-	background-color: #AAA;
-	img {
-		opacity: 0.7;
-	}
-}
+.assets-manager--selected
+{
+  background-color: #aaa;
+  img
+  {
+    opacity: .7;
+  }
+}

data/app/assets/stylesheets/binda/components/b-btn.scss

@@ -0,0 +1,114 @@
+.b-btn-primary
+{
+  transition: background-color .3s ease-out;
+  color: $color-white;
+  border: 1px solid $color-gray-darker;
+  background-color: #333;
+}
+
+.b-btn-primary
+{
+  &:hover
+  {
+    color: $color-white;
+    border: 1px solid $color-gray;
+    background-color: $color-gray;
+  }
+
+  &:focus
+  {
+    color: $color-white;
+  }
+}
+
+.b-btn-danger
+{
+  transition: background-color .3s ease-out;
+  color: $color-white;
+  background-color: $color-danger;
+}
+
+.b-btn-danger
+{
+  &:hover
+  {
+    color: $color-white;
+    background-color: darken($color-danger, 15%);
+  }
+
+  &:focus
+  {
+    color: $color-white;
+  }
+}
+
+.b-btn-outline-danger
+{
+  transition: color .3s ease, background-color .3s ease;
+  color: $color-danger;
+  border: 1px solid $color-danger;
+  background-color: transparent;
+}
+
+.b-btn-outline-danger
+{
+  &:hover
+  {
+    color: $color-white;
+    background-color: $color-danger;
+  }
+
+  &:focus
+  {
+    color: $color-white;
+    background-color: $color-danger;
+  }
+}
+
+.b-btn-alternative
+{
+  transition: background-color .3s ease-out;
+  color: $text-color;
+  background-color: $color-white;
+}
+
+.b-btn-alternative
+{
+  &:hover
+  {
+    color: $text-color;
+    background-color: $color-gray-light;
+  }
+}
+
+.b-btn
+{
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 0;
+
+  i
+  {
+    padding-right: 6px;
+  }
+}
+
+.b-btn-settings
+{
+  margin-bottom: 12px;
+}
+
+.b-btn-block
+{
+  display: block;
+  float: left;
+  clear: left;
+
+  margin-left: 0px !important;
+}
+
+.b-btn--container {
+  margin-top: 32px;
+  margin-bottom: 40px;
+}

data/app/assets/stylesheets/binda/components/button.scss

@@ -1,7 +1,10 @@
+// what is this?!
+
 .update-form--button {
 	margin-bottom: 20px;
 }
 
 .custom-button--button {
 	color: #337ab7;
-}
+}
+

data/app/assets/stylesheets/binda/components/fileupload.scss

@@ -0,0 +1,134 @@
+// see https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
+.fileupload--preview
+{
+  position: relative;
+  float: left;
+  width: 120px;
+  height: 120px;
+  margin-right: 16px;
+  transition: all .5s ease;
+  border: 1px solid $color-gray-lighter;
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: contain;
+
+  p
+  {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    padding: 8px;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+
+  video {
+    display: none;
+  }
+}
+
+.fileupload--preview--uploaded
+{
+  animation: fadePreview .6s ease-out;
+  border: 0;
+
+  p
+  {
+    display: none;
+  }
+
+  video {
+    display: block
+  }
+}
+
+@keyframes fadePreview
+{
+  from
+  {
+    opacity: .01;
+  }
+  to
+  {
+    opacity: 1;
+  }
+}
+
+.fileupload--dashboard
+{
+  float: left;
+
+  .control-label-wrap
+  {
+    float: left;
+  }
+}
+
+.fileupload input
+{
+  position: absolute;
+  z-index: -1;
+  overflow: hidden;
+  width: 1px; // .1px didn't work so set minimum to 1px
+  height: 1px; // .1px didn't work so set minimum to 1px
+  opacity: 0;
+}
+
+.fileupload label.control-label
+{
+  @extend .b-btn;
+  @extend .p;
+  font-weight: 300;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  cursor: pointer; /* "hand" cursor */
+
+  *
+  {
+    pointer-events: none;
+  }
+
+  // &.control-label--focus {
+  //  outline: 1px dotted #000;
+  //  outline: -webkit-focus-ring-color auto 5px;   
+  // }
+}
+
+// Override the real .from-group containing the input
+.fileupload .form-group
+{
+  padding: 0;
+  border: 0;
+}
+
+.fileupload--remove-image-btn
+{
+  float: left;
+  transition: all .3s ease;
+  opacity: 1;
+}
+
+.fileupload--remove-image-btn--hidden
+{
+  pointer-events: none;
+  opacity: 0;
+}
+
+.fileupload--details
+{
+  float: left;
+  transition: opacity .3s ease-out;
+  opacity: 1;
+}
+
+.fileupload--details--hidden
+{
+  pointer-events: none;
+  opacity: 0;
+  width: 0; // Odd but needed, otherwise it occupies few transparent pixels...
+  display: none;
+}
+
+.standard-form--video .fileupload--dimension {
+  display: none;
+}

data/app/assets/stylesheets/binda/components/form_item.scss

@@ -1,231 +1,296 @@
-.form-item { 
-	@extend .clearfix;
-	display: block;
-	margin-bottom: $font-size-base*1.5;	
-	border-bottom: 1px solid $gray-lighter;
-	transition: all 0.3s linear;
-	transform: scaleY(1);
-
-	.form-group {
-		margin-bottom: $font-size-base;	
-	}
+.form-item
+{
+  display: block;
+  transition: all .3s linear;
+  transform: scaleY(1);
+
+  @extend .clearfix;
+  // .form-group
+  // {
+  //   margin-bottom: 20px;
+  // }
 }
 
+.form-item
+{
+  overflow-y: hidden;
+  transition: max-height .6s ease-out;
+}
 
-.form-section--wide-container {
-
-	.form-item {
-		max-height: 2000px;
-		overflow-y: hidden;
-		transition: max-height 1s ease-out;
-
-		h5 {
-			width: 15%;
-			float: left;
-		}
-
-		a {
-			float: right;
-			margin-top: $font-size-base/2;
-			margin-left: $font-size-base/2;
-		}
-	}
-
-	.form-item--half-size {
-		position: relative;
-		width: 46%;
-		margin-right: 4%;
-		float: left;
+.form-item--half-size
+{
+  position: relative;
+  float: left;
+  width: 50%;
 
-		h5 {
-			width: 100%;
-		}
+  .form-group
+  {
+    border-top: none !important;
+  }
 
-		.form-item--select-input {
-			margin-left: 0;
-		}
-	}
+}
 
-	.form-item--full-size { 
-		position: relative;
-		width: 96%;
-		clear: both;
-	}
+.form-item--full-size
+{
+  position: relative;
+  clear: both;
+  width: 100%;
+}
 
-	.form-item--new {
-		position: absolute;
-		top: 101%;
-		max-height: 0;
-	}
+.form-item--main-actions
+{
+  a
+  {
+    float: right;
+    margin-left: 8px;
+  }
+}
 
-	.form-group {
-		margin-bottom: $font-size-base;	
-	}
+.form-item--new
+{
+  position: absolute;
+  top: 101%;
+  max-height: 0;
 }
 
-.form-item--select-input {
-	display: inline-block;
-	width: 240px;
-	margin-left: 5%;
+.form-item--select-input
+{
+  display: inline-block;
+  width: 240px;
+  margin-left: 5%;
 }
 
-.form-item--textarea {
-	display: inline-block;
-	width: 70%;
-	margin-left: 5%;
+.form-item--textarea
+{
+  display: inline-block;
+  width: 70%;
+  margin-left: 5%;
 }
 
-.form-item--category {
-	padding-bottom: $font-size-base*1.5;	
-	margin-bottom: $font-size-base*1.5;	
+.form-item--category
+{
+  margin-bottom: 20px;
+  padding-bottom: 20px;
 
-	input[type=submit] {
-		width: 20%;
-		float: left;
-	}
+  input[type=submit]
+  {
+    float: left;
+    width: 20%;
+  }
 
-	.form-group {
-		width: 70%;
-		margin: 0;
-		margin-right: 10%;
-		float: left;
-	}
+  .form-group
+  {
+    float: left;
+    width: 70%;
+    margin: 0;
+    margin-right: 10%;
+  }
 }
 
-.form-item--open-button,
-.form-item--close-button {
-	cursor: pointer;
+.form-item--toggle-button
+{
+  cursor: pointer;
+  transition: transform .3s ease;
+  transform: rotate(0deg);
 }
 
-.form-item--open-button {
-	display: none;
+.form-item--toggle-button-closed
+{
+  transform: rotate(180deg);
 }
 
-.form-item--editor {
-	// max-height: is set via javascript in app/assets/javscripts/components/form_item_editor.js;
-	overflow-y: hidden;
-	transition: max-height 0.6s ease-out;
+.form-item--editor
+{
+  overflow-y: hidden;
+  // max-height: is set via javascript in app/assets/javscripts/components/form_item_editor.js;
+  // default is 0
+  max-height: 0;
+  transition: max-height .6s ease-out;
 }
 
-.form-item--editor-close {
-	max-height: 0 !important;
+.form-item--repeater
+{
+  overflow-y: hidden;
+  // inherit transitions from sortable and add max-height
+  transition: box-shadow .3s ease, transform .3s ease, max-height .6s ease-out !important;
 }
 
-.form-item--label-on-top .form-group {
+.standard-form--container .form-item--repeater .control-label
+{
+  @extend .p;
 }
 
-.form-item--label-on-left .form-group {
-	display: inline-block;
-	width: 70%;
-	margin-left: 5%;
+.form-item--repeater-fields
+{
+  overflow-y: hidden;
+  transition: all .6s ease;
 }
 
-.form-item--repeater-fields {
-  padding-left: $font-size-base/2;
-	margin-bottom: $font-size-base;
-	border-bottom: 1px solid $gray-lighter;
-  border-left: 2px solid $gray-lighter;
+.font-item--collapsed .form-item--repeater-fields
+{
+  margin-bottom: 8px;
 }
 
-.form-item--repeater-section {
-	border: none;
-	margin-bottom: 0;
+.form-item--repeater-section
+{
+  overflow-x: hidden; // This ensure that the div doesn't become wider when draggin sortable items to the right
+  margin-bottom: 0;
 
-	> *,
-	ul.sortable li > * {
-		display: block;
-		background-color: $body-bg;
-	}
+  ul.sortable > li
+  {
+    margin-top: -1px; // this solve the issue of a 2px border between 2 repeaters
+    border: 1px solid $color-gray-darker;
+  }
 
-  ul.sortable--disabled li {
-  	cursor: default;
+  ul.sortable > li > *
+  {
+    display: block;
   }
 
-  ul.sortable {
-  	margin-bottom: $font-size-base/2;
+  ul.sortable
+  {
+    margin-bottom: 0px;
+  }
+
+  .sortable--toggle-text:first-child
+  {
+    display: none;
+  }
 
-  	li {
-  		border-bottom: none;
-  		padding-bottom: 0;
-  	}
+  .sortable--toggle
+  {
+    float: right;
+    margin: 0;
   }
-	
-	.sortable--toggle {
-    margin-top: 0;
+
+  .sortable--enabled
+  {
+    .form-item--repeater-fields
+    {
+      margin: 0;
+      padding: 0;
+    }
   }
 
-  .sortable--toggle-text:first-child {
-		display: none;
+  .form-item--new
+  {
+    position: absolute;
+    top: 101%;
+    max-height: 0;
   }
+}
 
-	h5 {
-		width: 15%;
-		float: left;
-	}
+.form-item--repeater-section--add-new
+{
+  float: right;
+  margin-right: 8px;
+}
 
-	h5.form-item--repeater-title {
-		width: 100%;
-		padding: $font-size-base / 2;
-		margin-bottom: $font-size-base / 2;
-		background-color: $gray-lighter;
-		font-weight: normal;
-		float: none;
-	}
+.form-item--repeater-title
+{
+  display: block;
+  margin-bottom: 20px;
+}
 
-	a {
-		float: right;
-		margin-top: $font-size-base/2;
-		margin-left: $font-size-base/2;
-	}
+.form-item--repeater-header
+{
+  padding: 4px 0;
+  background-color: $color-white !important;
+
+  p
+  {
+    margin-top: 8px;
+    margin-left: 8px;
+  }
+}
+.form-item--collapse-btn,
+.form-item--delete-repeater-item
+{
+  float: right;
+  margin-top: 8px;
+  margin-right: 8px;
+}
+
+a.form-item--delete-repeater-item
+{
+  transition: color .2s ease;
+  color: $color-danger;
+  &:hover
+  {
+    color: $color-danger-hover;
+  }
+}
 
-	.form-item--new {
-		position: absolute;
-		top: 101%;
-		max-height: 0;
-	}
+.form-item--collapse-btn
+{
+  span:first-child
+  {
+    display: block;
+  }
+  span:last-child
+  {
+    display: none;
+  }
+}
 
-	.form-group {
-		margin-bottom: $font-size-base;	
-	}
+.form-item--collapsed .form-item--collapse-btn
+{
+  span:first-child
+  {
+    display: none;
+  }
+  span:last-child
+  {
+    display: block;
+  }
 }
 
-.form-item--choices {
-	position: relative;
+.form-item--choices
+{
+  position: relative;
 }
 
-.form-item--editor .form-item--choice {
-	position: relative;
-	clear: left;
+.form-item--editor .form-item--choice
+{
+  position: relative;
+  clear: left;
+
 
-	&:last-child {
-		padding-bottom: $font-size-base/2;
-		border-bottom: 1px solid $gray-lighter;
-		margin-bottom: $font-size-base;		
-	}
+  &:last-child
+  {
+    margin-bottom: $font-size-base;
+    padding-bottom: $font-size-base/2;
+    border-bottom: 1px solid $color-gray-lightest;
+  }
 }
 
-.form-item--new-choice {
-	display: none;
+.form-item--new-choice
+{
+  display: none;
 }
 
 .form-item--choice-label,
-.form-item--choice-content {
-	@extend .form-item--half-size;
+.form-item--choice-value
+{
+  @extend .form-item--half-size;
 }
 
 .form-item--delete-choice,
-.form-item--js-delete-choice {
-	position: absolute;
-	top: 32px;
-	right: 0;
+.form-item--js-delete-choice
+{
+  position: absolute;
+  top: 32px;
+  right: 0;
 }
 
-.form-item--add-choice {
-	position: absolute;
-	top: 0;
-	right: 0;
+.form-item--add-choice
+{
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
-.form-item--new-choice .form-item--delete-choice {
-	display: none;
-}
+.form-item--new-choice .form-item--delete-choice
+{
+  display: none;
+}