left: -4px;
}
-#afGuiEditor li a.af-gui-field-select-in-dropdown {
- padding-top: 2px;
- padding-bottom: 2px;
- background-color: white !important;
+#afGuiEditor .dropdown-menu li {
cursor: default;
}
+#afGuiEditor .dropdown-menu li .af-gui-field-select-in-dropdown {
+ padding: 2px 19px 2px 21px;
+ clear: both;
+ font-weight: 400;
+ line-height: 1.5384615385;
+ color: #4d4d69;
+ white-space: nowrap;
+}
+
+#afGuiEditor .dropdown-menu li > * > label {
+ font-weight: normal;
+}
+
+#afGuiEditor .dropdown-menu li .af-gui-field-select-in-dropdown > select {
+ max-width: 120px;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+
+/* For editing field placeholder text */
#afGuiEditor .af-gui-field-input input[type=text].form-control {
color: #9a9a9a;
}
--- /dev/null
+<li><a href ng-click="addBlock('div.af-block')">{{ ts('Add block') }}</a></li>
+<li><a href ng-click="addBlock('p.af-text')">{{ ts('Add text box') }}</a></li>
+<li><a href ng-click="addBlock('button.af-button.btn-primary', {'crm-icon': 'fa-check', 'ng-click': 'modelListCtrl.submit()'})">{{ ts('Add button') }}</a></li>
+<li role="separator" class="divider"></li>
+<li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this block') }}</span></a></li>
<button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Add block') }}">
<span><i class="crm-i fa-plus"></i></span>
</button>
- <ul class="dropdown-menu" ng-if="menu.open">
- <li><a href ng-click="addBlock('div.af-block')">{{ ts('Add block') }}</a></li>
- <li><a href ng-click="addBlock('p.af-text')">{{ ts('Add text box') }}</a></li>
- <li><a href ng-click="addBlock('button.af-button.btn-primary', {'crm-icon': 'fa-check', 'ng-click': 'modelListCtrl.submit()'})">{{ ts('Add button') }}</a></li>
- <li role="separator" class="divider"></li>
- <li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this block') }}</span></a></li>
- </ul>
+ <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/block-menu.html'"></ul>
</div>
</div>
<div class="af-gui-bar" ng-if="node['#tag'] === 'af-form'" >
--- /dev/null
+<li>
+ <div ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown form-inline" >
+ <label>{{ ts('Style:') }}</label>
+ <select class="form-control {{ getSetStyle().replace('btn', 'text') }}" ng-model="getSetStyle" ng-model-options="{getterSetter: true}" title="{{ ts('Button style') }}">
+ <option ng-repeat="(style, label) in styles" class="{{ style.replace('btn', 'bg') }}" value="{{ style }}">{{ label }}</option>
+ </select>
+ </div>
+</li>
+<li role="separator" class="divider"></li>
+<li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this button') }}</span></a></li>
<button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Configure') }}">
<span><i class="crm-i fa-gear"></i></span>
</button>
- <ul class="dropdown-menu" ng-if="menu.open">
- <li title="{{ ts('Button style') }}">
- <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown" >
- <select class="form-control {{ getSetStyle().replace('btn', 'text') }}" ng-model="getSetStyle" ng-model-options="{getterSetter: true}">
- <option ng-repeat="(style, label) in styles" class="{{ style.replace('btn', 'bg') }}" value="{{ style }}">{{ ts('Color: %1', {1: label}) }}</option>
- </select>
- </a>
- </li>
- <li role="separator" class="divider"></li>
- <li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this button') }}</span></a></li>
- </ul>
+ <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/button-menu.html'"></ul>
</div>
</div>
</div>
--- /dev/null
+<li>
+ <div href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
+ <label>{{ ts('Type:') }}</label>
+ <select class="form-control" ng-model="getSet('input_type')" ng-model-options="{getterSetter: true}" title="{{ ts('Field type') }}">
+ <option ng-repeat="(type, label) in editor.meta.inputType" value="{{ type }}" ng-if="inputTypeCanBe(type)">{{ label }}</option>
+ </select>
+ </div>
+</li>
+<li>
+ <a href ng-click="toggleRequired(); $event.stopPropagation();" title="{{ ts('Require this field') }}">
+ <i class="crm-i" ng-class="{'fa-square-o': !getProp('required'), 'fa-check-square-o': getProp('required')}"></i>
+ {{ ts('Required') }}
+ </a>
+</li>
+<li>
+ <a href ng-click="toggleHelp('pre'); $event.stopPropagation();" title="{{ ts('Show help text above this field') }}">
+ <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_pre'), 'fa-check-square-o': propIsset('help_pre')}"></i>
+ {{ ts('Pre help text') }}
+ </a>
+</li>
+<li>
+ <a href ng-click="toggleHelp('post'); $event.stopPropagation();" title="{{ ts('Show help text below this field') }}">
+ <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_post'), 'fa-check-square-o': propIsset('help_post')}"></i>
+ {{ ts('Post help text') }}
+ </a>
+</li>
+<li role="separator" class="divider" ng-if="hasOptions()"></li>
+<li ng-if="hasOptions()" ng-click="$event.stopPropagation()">
+ <a href ng-click="resetOptions()" title="{{ ts('Reset the option list for this field') }}">
+ <i class="crm-i fa-{{ node.defn.options ? '' : 'check-' }}circle-o"></i>
+ {{ ts('Use default option list') }}
+ </a>
+</li>
+<li ng-if="hasOptions()">
+ <a href ng-click="editOptions()" title="{{ ts('Customize the option list for this field') }}">
+ <i class="crm-i fa-{{ !node.defn.options ? '' : 'check-' }}circle-o"></i>
+ {{ ts('Customize field options') }}
+ </a>
+</li>
+<li role="separator" class="divider"></li>
+<li>
+ <a href ng-click="block.removeBlock(node)" title="{{ ts('Remove field from form') }}">
+ <span class="text-danger">{{ ts('Delete this field') }}</span>
+ </a>
+</li>
<button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Configure') }}">
<span><i class="crm-i fa-gear"></i></span>
</button>
- <ul class="dropdown-menu dropdown-menu-right" ng-if="menu.open">
- <li title="{{ ts('Field type') }}">
- <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
- <select class="form-control" ng-model="getSet('input_type')" ng-model-options="{getterSetter: true}">
- <option ng-repeat="(type, label) in editor.meta.inputType" value="{{ type }}" ng-if="inputTypeCanBe(type)">{{ label }}</option>
- </select>
- </a>
- </li>
- <li title="{{ ts('Require this field') }}">
- <a href ng-click="toggleRequired(); $event.stopPropagation();">
- <i class="crm-i" ng-class="{'fa-square-o': !getProp('required'), 'fa-check-square-o': getProp('required')}"></i>
- {{ ts('Required') }}
- </a>
- </li>
- <li title="{{ ts('Show help text above this field') }}">
- <a href ng-click="toggleHelp('pre'); $event.stopPropagation();">
- <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_pre'), 'fa-check-square-o': propIsset('help_pre')}"></i>
- {{ ts('Pre help text') }}
- </a>
- </li>
- <li title="{{ ts('Show help text below this field') }}">
- <a href ng-click="toggleHelp('post'); $event.stopPropagation();">
- <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_post'), 'fa-check-square-o': propIsset('help_post')}"></i>
- {{ ts('Post help text') }}
- </a>
- </li>
- <li role="separator" class="divider" ng-if="hasOptions()"></li>
- <li title="{{ ts('Reset the option list for this field') }}" ng-if="hasOptions()" ng-click="$event.stopPropagation()">
- <a href ng-click="resetOptions()">
- <i class="crm-i fa-{{ node.defn.options ? '' : 'check-' }}circle-o"></i>
- {{ ts('Use default option list') }}
- </a>
- </li>
- <li title="{{ ts('Customize the option list for this field') }}" ng-if="hasOptions()">
- <a href ng-click="editOptions()">
- <i class="crm-i fa-{{ !node.defn.options ? '' : 'check-' }}circle-o"></i>
- {{ ts('Customize field options') }}
- </a>
- </li>
- <li role="separator" class="divider"></li>
- <li title="{{ ts('Remove field from form') }}">
- <a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this field') }}</span></a>
- </li>
- </ul>
+ <ul class="dropdown-menu dropdown-menu-right" ng-if="menu.open" ng-include="'~/afGuiEditor/field-menu.html'"></ul>
</div>
</div>
</div>
--- /dev/null
+<li>
+ <div class="af-gui-field-select-in-dropdown" ng-click="$event.stopPropagation()">
+ <label>{{ ts('Style:') }}</label>
+ <select class="form-control" ng-model="node['#tag']" title="{{ ts('Text style') }}">
+ <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
+ </select>
+ </div>
+</li>
+<li>
+ <div class="af-gui-field-select-in-dropdown" ng-click="$event.stopPropagation()">
+ <div class="btn-group btn-group-sm" role="group">
+ <button type="button" class="btn btn-default" ng-class="{active: opt === getAlign()}" ng-repeat="(opt, label) in alignments" ng-click="setAlign(opt)" title="{{ label }}">
+ <i class="crm-i fa-{{ opt.replace('text', 'align') }}" ></i>
+ </button>
+ </div>
+ </div>
+</li>
+<li role="separator" class="divider"></li>
+<li>
+ <a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this text') }}</span></a>
+</li>
<button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Configure') }}">
<span><i class="crm-i fa-gear"></i></span>
</button>
- <ul class="dropdown-menu" ng-if="menu.open">
- <li title="{{ ts('Text style') }}">
- <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
- <select class="form-control" ng-model="node['#tag']">
- <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
- </select>
- </a>
- </li>
- <li>
- <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
- <div class="btn-group btn-group-sm" role="group">
- <button type="button" class="btn btn-default" ng-class="{active: opt === getAlign()}" ng-repeat="(opt, label) in alignments" ng-click="setAlign(opt)" title="{{ label }}">
- <i class="crm-i fa-{{ opt.replace('text', 'align') }}" ></i>
- </button>
- </div>
- </a>
- </li>
- <li role="separator" class="divider"></li>
- <li>
- <a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this text') }}</span></a>
- </li>
- </ul>
+ <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/text-menu.html'"></ul>
</div>
</div>
</div>
projects / civicrm-core.git / commitdiff