Skip to content
Permalink
Browse files

improve(search-widget): refresh style

Related to CAM-5819
  • Loading branch information...
zeropaper committed Apr 21, 2016
1 parent 9d71fad commit 838e8072111d0674e2e0f765d5a8cb6e3b78f8e1
@@ -4,37 +4,42 @@
position: relative;
padding: 0;
margin: 0;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;

> .view-value,
> .preview {
.form-control-static;
display: block;
float: left;

>.view-value,
.preview {
max-width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1px 3px;
margin: 0;
position: relative;
vertical-align: middle;

min-height: auto;

color: @link-color;
&:hover {
color: @link-hover-color;
}
}

>.edit {
input {
padding: 1px 3px;
height: auto;
width: auto;
min-width: 40px;
max-width: 100%;
display: inline-block;
border-radius: @border-radius-small 0 @border-radius-small @border-radius-small;
}
> .view-value,
> .preview,
.form-control {
padding-left: 3px;
padding-right: 3px;

padding-top: 0;
padding-bottom: 0;
}

.form-control {
width: auto;
min-width: 40px;
max-width: 100%;
margin-bottom: -1px;
height: auto;
}

.dropdown-menu {
@@ -45,8 +50,7 @@
&[type="date"],
&[type="time"],
&[type="datetime"] {
>.edit {
display: block;
> .edit {
position: relative;
z-index: 99;
min-width: 90px;
@@ -57,12 +61,18 @@
top: 30px;
left: 0;
background-color: @body-bg;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
}
}


.visible-whitespace {
white-space: nowrap;
width: auto;
max-width: none;
}
}

.list-inline>[cam-widget-inline-field] {
.list-inline > [cam-widget-inline-field] {
padding-right: 0;
}

@@ -85,13 +95,9 @@ body > .cam-widget-inline-field {
}

&.btn-group {
margin-top: 2px;
margin-left: -1px;

border-radius: @border-radius-small @border-radius-small 0 0;

> button.btn {
// padding-bottom: 3px;
&:first-child {
border-radius: @border-radius-small 0 0 0;
}
@@ -32,19 +32,19 @@ Field.prototype.inputField = function() {
return this.node.element(by.css('input[ng-model="editValue"]'));
};
Field.prototype.okButton = function() {
return element(by.className('glyphicon-ok'));
return element(by.css('.glyphicon-ok'));
};
Field.prototype.cancelButton = function() {
return element(by.className('glyphicon-remove'));
return element(by.css('.glyphicon-remove'));
};
Field.prototype.calendarButton = function() {
return element(by.className('glyphicon-calendar'));
return element(by.css('.glyphicon-calendar'));
};
Field.prototype.pencilButton = function() {
return element(by.className('glyphicon-pencil'));
return element(by.css('.glyphicon-pencil'));
};
Field.prototype.datepicker = function() {
return element(by.className('datepicker'));
return element(by.css('.datepicker'));
};
Field.prototype.datepicker.day = function(day) {
return this().element(by.cssContainingText('button > span:not(.text-muted)', day));
@@ -78,14 +78,16 @@ <h3>Text Edit</h3>
placeholder="Please enter a name here"&gt;
{{name}}
&lt;/span&gt;</pre>
<span cam-widget-inline-field
class="set-value"
type="text"
value="name"
placeholder="Please enter a name here"
id="field1">
{{name}}
</span>
<div class="test-container">
<span cam-widget-inline-field
class="set-value"
type="text"
value="name"
placeholder="Please enter a name here"
id="field1">
{{name}}
</span>
</div>
</div>
</div><!-- /.widget-example -->

@@ -101,13 +103,15 @@ <h3>Datepicker</h3>
value="date"&gt;
{{ date | camDate }}
&lt;/span&gt;</pre>
<span cam-widget-inline-field
class="set-value"
type="datetime"
value="date"
id="field2">
{{ date | camDate }}
</span>
<div class="test-container">
<span cam-widget-inline-field
class="set-value"
type="datetime"
value="date"
id="field2">
{{ date | camDate }}
</span>
</div>
</div>
</div><!-- /.widget-example -->

@@ -124,14 +128,16 @@ <h3>Options</h3>
value="selectedOption"&gt;
{{ selectedOption }}
&lt;/span&gt;</pre>
<span cam-widget-inline-field
<div class="test-container">
<span cam-widget-inline-field
class="set-value"
type="option"
options="options"
value="selectedOption"
id="field3">
{{ selectedOption }}
</span>
{{ selectedOption }}
</span>
</div>
</div>
</div><!-- /.widget-example -->

@@ -148,14 +154,16 @@ <h3>Options - Key-Value</h3>
value="selectedKeyOption"&gt;
{{ selectedKeyOption.key }} : {{ selectedKeyOption.value }}
&lt;/span&gt;</pre>
<span cam-widget-inline-field
class="set-value"
type="option"
options="keyOptions"
value="selectedKeyOption"
id="field4">
{{ selectedKeyOption.key }} : {{ selectedKeyOption.value }}
</span>
<div class="test-container">
<span cam-widget-inline-field
class="set-value"
type="option"
options="keyOptions"
value="selectedKeyOption"
id="field4">
{{ selectedKeyOption.key }} : {{ selectedKeyOption.value }}
</span>
</div>
</div>
</div><!-- /.widget-example -->

@@ -173,15 +181,17 @@ <h3>Options with allow Non Options</h3>
value="selectedOption2"&gt;
{{ selectedOption2 }}
&lt;/span&gt;</pre>
<span cam-widget-inline-field
class="set-value"
type="option"
options="options"
value="selectedOption2"
allow-non-options="true"
id="field6">
{{ selectedOption2 }}
</span>
<div class="test-container">
<span cam-widget-inline-field
class="set-value"
type="option"
options="options"
value="selectedOption2"
allow-non-options="true"
id="field6">
{{ selectedOption2 }}
</span>
</div>
</div>
</div><!-- /.widget-example -->

@@ -198,14 +208,16 @@ <h3>Flexible: Text/Date-Combo</h3>
flexible="true"&gt;
{{ dateText }}
&lt;/span&gt;</pre>
<span cam-widget-inline-field
class="set-value"
type="text"
value="dateText"
flexible="true"
id="field5">
{{ dateText }}
</span>
<div class="test-container">
<span cam-widget-inline-field
class="set-value"
type="text"
value="dateText"
flexible="true"
id="field5">
{{ dateText }}
</span>
</div>
</div>
</div><!-- /.widget-example -->

0 comments on commit 838e807

Please sign in to comment.
You can’t perform that action at this time.