javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Slight tweak for item editing

Browse Source
This commit is contained in:
Max Lynch
2013-11-06 09:55:16 -06:00
parent 1c23d085f1
commit b3445155aa
7 changed files with 109 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
dist/css/ionic-ios7.css vendored
View File

@ -182,7 +182,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -518,13 +518,13 @@ address {
font-style: normal; font-style: normal;
line-height: 1.42857; } line-height: 1.42857; }
a.subdued‎ { a.subduedΓÇÄ {
padding-right: 10px; padding-right: 10px;
color: #555555; color: #555555;
text-decoration: none; } text-decoration: none; }
a.subdued‎:hover { a.subduedΓÇÄ:hover {
text-decoration: none; } text-decoration: none; }
a.subdued‎:last-child { a.subduedΓÇÄ:last-child {
padding-right: 0; } padding-right: 0; }
.bar { .bar {
@ -1407,24 +1407,36 @@ button.item-button-right:after {
.item-edit { .item-edit {
position: absolute; position: absolute;
top: 0; top: 0;
left: -48px; left: 8px;
z-index: 0; z-index: 0;
width: 48px; width: 48px;
height: 100%; height: 100%;
line-height: 100%; line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit .button { .item-edit .button {
height: 100%; } height: 100%; }
.item-edit .icon { .item-edit .button .icon, .item-edit .button i {
color: #ef4e3a; color: #ef4e3a;
font-size: 24px; } display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-size: 24px;
position: absolute;
top: 0;
height: 100%; }
.item-edit.ng-enter { .item-edit.ng-enter {
left: -48px; left: -48px;
opacity: 0; opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit.ng-enter-active { .item-edit.ng-enter-active {
left: 0; left: 8px;
opacity: 1; } opacity: 1; }
.item-edit.ng-leave { .item-edit.ng-leave {
left: 0px; left: 0px;
@ -1475,11 +1487,6 @@ button.item-button-right:after {
.list-editing .item-content { .list-editing .item-content {
margin-right: 50px; margin-right: 50px;
margin-left: 50px; } margin-left: 50px; }
.list-editing .item-edit {
left: 0px;
opacity: 1; }
.list-editing .item-edit i {
left: 5px; }
.list-header { .list-header {
margin-top: 20px; margin-top: 20px;
@ -1733,7 +1740,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -1805,7 +1812,7 @@ input[type="checkbox"][readonly] {
right: 20px; right: 20px;
transition: 0.2s ease; transition: 0.2s ease;
transition-property: left, right; transition-property: left, right;
transition-delay: 0s, 0.05s; } transition-delay: 0s, .05s; }
.toggle :checked + .track { .toggle :checked + .track {
/* When the toggle is "on" */ /* When the toggle is "on" */
@ -1820,7 +1827,7 @@ input[type="checkbox"][readonly] {
right: 0; right: 0;
left: 20px; left: 20px;
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: .05s, 0s; }
.item-radio { .item-radio {
padding: 0; } padding: 0; }
@ -2141,7 +2148,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active { .button-icon:active, .button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.padding > .button.block:first-child { .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
@ -2461,9 +2468,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ion-loading:before { .ion-loading:before {
content: "\e144"; } content: "\e144"; }
@ -2476,9 +2483,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ion-refreshing:before { .ion-refreshing:before {
content: "\e144"; } content: "\e144"; }

57
dist/css/ionic-scoped.css vendored
View File

@ -1680,7 +1680,7 @@
.ionic fieldset { .ionic fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
.ionic legend { .ionic legend {
padding: 0; padding: 0;
/* 2 */ /* 2 */
@ -1911,13 +1911,13 @@
margin-bottom: 20px; margin-bottom: 20px;
font-style: normal; font-style: normal;
line-height: 1.42857; } line-height: 1.42857; }
.ionic a.subdued‎ { .ionic a.subduedΓÇÄ {
padding-right: 10px; padding-right: 10px;
color: #555555; color: #555555;
text-decoration: none; } text-decoration: none; }
.ionic a.subdued‎:hover { .ionic a.subduedΓÇÄ:hover {
text-decoration: none; } text-decoration: none; }
.ionic a.subdued‎:last-child { .ionic a.subduedΓÇÄ:last-child {
padding-right: 0; } padding-right: 0; }
.ionic .action-sheet { .ionic .action-sheet {
position: fixed; position: fixed;
@ -2745,24 +2745,36 @@
.ionic .item-edit { .ionic .item-edit {
position: absolute; position: absolute;
top: 0; top: 0;
left: -48px; left: 8px;
z-index: 0; z-index: 0;
width: 48px; width: 48px;
height: 100%; height: 100%;
line-height: 100%; line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.ionic .item-edit .button { .ionic .item-edit .button {
height: 100%; } height: 100%; }
.ionic .item-edit .icon { .ionic .item-edit .button .icon, .ionic .item-edit .button i {
color: #ef4e3a; color: #ef4e3a;
font-size: 24px; } display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-size: 24px;
position: absolute;
top: 0;
height: 100%; }
.ionic .item-edit.ng-enter { .ionic .item-edit.ng-enter {
left: -48px; left: -48px;
opacity: 0; opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.ionic .item-edit.ng-enter-active { .ionic .item-edit.ng-enter-active {
left: 0; left: 8px;
opacity: 1; } opacity: 1; }
.ionic .item-edit.ng-leave { .ionic .item-edit.ng-leave {
left: 0px; left: 0px;
@ -2801,11 +2813,6 @@
.ionic .list-editing .item-content { .ionic .list-editing .item-content {
margin-right: 50px; margin-right: 50px;
margin-left: 50px; } margin-left: 50px; }
.ionic .list-editing .item-edit {
left: 0px;
opacity: 1; }
.ionic .list-editing .item-edit i {
left: 5px; }
.ionic .list-header { .ionic .list-header {
margin-top: 20px; margin-top: 20px;
padding: 5px 15px; padding: 5px 15px;
@ -3028,7 +3035,7 @@
.ionic input[type="file"] { .ionic input[type="file"] {
line-height: 34px; } line-height: 34px; }
.ionic select { .ionic select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
.ionic select[multiple], .ionic select[multiple],
.ionic select[size] { .ionic select[size] {
@ -3077,7 +3084,7 @@
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after { .ionic .checkbox input:after {
position: absolute; position: absolute;
top: 34%; top: 34%;
@ -3090,7 +3097,7 @@
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked:before { .ionic .checkbox input:checked:before {
@ -3464,7 +3471,7 @@
.ionic .button-icon:active, .ionic .button-icon.active { .ionic .button-icon:active, .ionic .button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.ionic .padding > .button.block:first-child { .ionic .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
.ionic .button-full, .ionic .button-full,
@ -3692,9 +3699,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .ion-loading:before { .ionic .ion-loading:before {
content: "\e144"; } content: "\e144"; }
.ionic .ion-refreshing { .ionic .ion-refreshing {
@ -3706,9 +3713,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .ion-refreshing:before { .ionic .ion-refreshing:before {
content: "\e144"; } content: "\e144"; }
.ionic .hidden, .ionic .hidden,

57
dist/css/ionic.css vendored
View File

@ -2013,7 +2013,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -2349,13 +2349,13 @@ address {
font-style: normal; font-style: normal;
line-height: 1.42857; } line-height: 1.42857; }
a.subdued‎ { a.subduedΓÇÄ {
padding-right: 10px; padding-right: 10px;
color: #555555; color: #555555;
text-decoration: none; } text-decoration: none; }
a.subdued‎:hover { a.subduedΓÇÄ:hover {
text-decoration: none; } text-decoration: none; }
a.subdued‎:last-child { a.subduedΓÇÄ:last-child {
padding-right: 0; } padding-right: 0; }
.action-sheet { .action-sheet {
@ -3302,24 +3302,36 @@ button.item-button-right:after {
.item-edit { .item-edit {
position: absolute; position: absolute;
top: 0; top: 0;
left: -48px; left: 8px;
z-index: 0; z-index: 0;
width: 48px; width: 48px;
height: 100%; height: 100%;
line-height: 100%; line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit .button { .item-edit .button {
height: 100%; } height: 100%; }
.item-edit .icon { .item-edit .button .icon, .item-edit .button i {
color: #ef4e3a; color: #ef4e3a;
font-size: 24px; } display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-size: 24px;
position: absolute;
top: 0;
height: 100%; }
.item-edit.ng-enter { .item-edit.ng-enter {
left: -48px; left: -48px;
opacity: 0; opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; } -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit.ng-enter-active { .item-edit.ng-enter-active {
left: 0; left: 8px;
opacity: 1; } opacity: 1; }
.item-edit.ng-leave { .item-edit.ng-leave {
left: 0px; left: 0px;
@ -3370,11 +3382,6 @@ button.item-button-right:after {
.list-editing .item-content { .list-editing .item-content {
margin-right: 50px; margin-right: 50px;
margin-left: 50px; } margin-left: 50px; }
.list-editing .item-edit {
left: 0px;
opacity: 1; }
.list-editing .item-edit i {
left: 5px; }
.list-header { .list-header {
margin-top: 20px; margin-top: 20px;
@ -3628,7 +3635,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -3683,7 +3690,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -3698,7 +3705,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -4114,7 +4121,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active { .button-icon:active, .button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.padding > .button.block:first-child { .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
@ -4691,9 +4698,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ion-loading:before { .ion-loading:before {
content: "\e144"; } content: "\e144"; }
@ -4706,9 +4713,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ion-refreshing:before { .ion-refreshing:before {
content: "\e144"; } content: "\e144"; }

1
dist/js/ionic-angular.js vendored
View File

@ -902,7 +902,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
})(); })();
; ;
;
(function() { (function() {
'use strict'; 'use strict';

2
js/ext/angular/test/list.html
View File

@ -64,7 +64,7 @@
<body> <body>
<content ng-controller="TestCtrl" class="reveal-animation"> <content ng-controller="TestCtrl" class="reveal-animation">
<list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="ion ion-minus-circled" reorder-icon="icon-navicon"> <list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
<list-refresher> <list-refresher>
</list-refresher> </list-refresher>
<list-item ng-repeat="item in items" <list-item ng-repeat="item in items"

21
scss/ionic/_items.scss
View File

@ -431,22 +431,25 @@ button.item-button-right:after {
.item-edit { .item-edit {
position: absolute; position: absolute;
top: 0; top: 0;
left: -48px; left: 8px;
z-index: 0; z-index: 0;
width: 48px; width: 48px;
height: 100%; height: 100%;
line-height: 100%; line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
.button { .button {
height: 100%; height: 100%;
} .icon, i {
color: $brand-danger;
.icon { @include display-flex();
color: $brand-danger; @include align-items(center);
font-size: 24px; font-size: 24px;
position: absolute;
top: 0;
height: 100%;
}
} }
&.ng-enter { &.ng-enter {
@ -455,7 +458,7 @@ button.item-button-right:after {
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
&.ng-enter-active { &.ng-enter-active {
left: 0; left: 8px;
opacity: 1; opacity: 1;
} }
&.ng-leave { &.ng-leave {
@ -498,4 +501,4 @@ button.item-button-right:after {
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
} }

7
scss/ionic/_list.scss
View File

@ -20,13 +20,6 @@
margin-right: 50px; margin-right: 50px;
margin-left: 50px; margin-left: 50px;
} }
.item-edit {
left: 0px;
opacity: 1;
i {
left: 5px;
}
}
} }