Skip to content
This repository has been archived by the owner on Nov 28, 2023. It is now read-only.

Commit

Permalink
List editing modes and some visual tweaks.
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaldudek
michaldudek committed Aug 27, 2013
1 parent 1de76dc commit 51e5674
Show file tree
Hide file tree
Showing 8 changed files with 545 additions and 449 deletions.
2 changes: 1 addition & 1 deletion minified/csdleditor.min.css
View file

Large diffs are not rendered by default.

664 changes: 333 additions & 331 deletions minified/csdleditor.min.js
View file

Large diffs are not rendered by default.

Binary file modified minified/images/csdl-header.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 65 additions & 41 deletions src/csdleditor.css
View file
Expand Up @@ -253,12 +253,16 @@
color: #333333;
border-color: #bbbbbb;
}
.csdl-container a.csdl-button:active {
.csdl-container a.csdl-button:active,
.csdl-container a.csdl-button.csdl-active {
background-color: #cccccc \9;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05), transparent 0 0 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05), transparent 0 0 0;
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05), transparent 0 0 0;
}
.csdl-container a.csdl-button.csdl-button-with-icon {
padding-right: 13px;
}
.csdl-container a.csdl-button.csdl-inactive {
cursor: default;
opacity: 0.65;
Expand Down Expand Up @@ -301,10 +305,9 @@
-webkit-box-shadow: transparent 0 0 0, transparent 0 0 0;
box-shadow: transparent 0 0 0, transparent 0 0 0;
}
.csdl-container a.csdl-button.csdl-redo {
margin-right: 20px;
}
.csdl-container a.csdl-button.csdl-listeditor {
.csdl-container a.csdl-button.csdl-redo,
.csdl-container a.csdl-button.csdl-listeditor,
.csdl-container a.csdl-button.csdl-delete {
margin-right: 20px;
}
.csdl-container a.csdl-button.csdl-view-open,
Expand Down Expand Up @@ -343,28 +346,16 @@
float: left;
width: 24px;
height: 24px;
background-image: url('images/csdl-header.png?1');
background-image: url('images/csdl-header.png?2');
background-repeat: no-repeat;
background-size: 20px 260px;
}
.csdl-container a.csdl-button.csdl-sort-az .csdl-button-icon {
background-position: 2px -184px;
}
.csdl-container a.csdl-button.csdl-copy .csdl-button-icon {
background-position: 2px -210px;
}
.csdl-container a.csdl-button.csdl-import .csdl-button-icon {
background-position: 2px -235px;
background-size: 20px 338px;
}
.csdl-container a.csdl-button.csdl-redo .csdl-button-icon {
background-position: 2px -27px;
}
.csdl-container a.csdl-button.csdl-geoselect .csdl-button-icon {
background-position: 2px -53px;
}
.csdl-container a.csdl-button.csdl-listeditor .csdl-button-icon {
background-position: 2px -158px;
}
.csdl-container a.csdl-button.csdl-theme .csdl-button-icon {
background-position: 2px -79px;
}
Expand All @@ -374,6 +365,27 @@
.csdl-container a.csdl-button.csdl-view-close .csdl-button-icon {
background-position: 3px -131px;
}
.csdl-container a.csdl-button.csdl-listeditor .csdl-button-icon {
background-position: 2px -158px;
}
.csdl-container a.csdl-button.csdl-sort-az .csdl-button-icon {
background-position: 2px -184px;
}
.csdl-container a.csdl-button.csdl-copy .csdl-button-icon {
background-position: 2px -210px;
}
.csdl-container a.csdl-button.csdl-import .csdl-button-icon {
background-position: 2px -235px;
}
.csdl-container a.csdl-button.csdl-edit .csdl-button-icon {
background-position: 2px -261px;
}
.csdl-container a.csdl-button.csdl-move .csdl-button-icon {
background-position: 2px -287px;
}
.csdl-container a.csdl-button.csdl-delete .csdl-button-icon {
background-position: 2px -313px;
}
.csdl-container .csdl-icon {
display: inline-block;
width: 26px;
Expand Down Expand Up @@ -630,7 +642,7 @@ body > .csdl-popup .csdl-popup-content {
display: inline-block;
height: 30px;
width: 200px;
margin: 0 10px;
margin: 0 2px;
line-height: 18px;
padding: 4px 6px;
font-size: 13px;
Expand Down Expand Up @@ -712,7 +724,7 @@ body > .csdl-popup .csdl-popup-content {
-o-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.csdl-container .csdl-list .csdl-list-container ol li .csdl-list-item span {
display: inline-block;
Expand All @@ -724,24 +736,14 @@ body > .csdl-popup .csdl-popup-content {
.csdl-container .csdl-list .csdl-list-container ol li .csdl-list-item input {
display: none;
}
.csdl-container .csdl-list .csdl-list-container ol li .csdl-list-item .csdl-item-delete {
display: inline-block;
visibility: hidden;
color: #fff;
width: 12px;
height: 12px;
text-align: center;
line-height: 9px;
background: #ff6569;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
.csdl-container .csdl-list .csdl-list-container ol li .csdl-list-item .csdl-list-item-mode-bar {
display: none;
position: absolute;
top: -5px;
right: 2px;
font-size: 11px;
font-weight: bold;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: transparent;
}
.csdl-container .csdl-list .csdl-list-container ol li .csdl-list-item:hover {
background-color: #f5f5f5;
Expand All @@ -760,9 +762,6 @@ body > .csdl-popup .csdl-popup-content {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05), transparent 0 0 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05), transparent 0 0 0;
}
.csdl-container .csdl-list .csdl-list-container ol li .csdl-list-item:hover .csdl-item-delete {
visibility: visible;
}
.csdl-container .csdl-list .csdl-list-container ol li.csdl-list-active .csdl-list-item {
padding: 3px 5px;
background-color: #f5f5f5;
Expand Down Expand Up @@ -834,6 +833,26 @@ body > .csdl-popup .csdl-popup-content {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), transparent 0 0 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), transparent 0 0 0;
}
.csdl-container .csdl-list .csdl-list-container ol.csdl-mode-edit li .csdl-list-item {
cursor: text;
}
.csdl-container .csdl-list .csdl-list-container ol.csdl-mode-edit li .csdl-list-item .csdl-list-item-mode-bar {
display: none;
}
.csdl-container .csdl-list .csdl-list-container ol.csdl-mode-delete li .csdl-list-item {
cursor: pointer;
}
.csdl-container .csdl-list .csdl-list-container ol.csdl-mode-delete li .csdl-list-item .csdl-list-item-mode-bar {
display: block;
background: red;
}
.csdl-container .csdl-list .csdl-list-container ol.csdl-mode-move li .csdl-list-item {
cursor: move;
}
.csdl-container .csdl-list .csdl-list-container ol.csdl-mode-move li .csdl-list-item .csdl-list-item-mode-bar {
display: block;
background: #388cb8;
}
.csdl-container .csdl-list .csdl-import-view {
position: absolute;
z-index: 55;
Expand Down Expand Up @@ -915,6 +934,11 @@ body > .csdl-popup .csdl-popup-content {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.csdl-container .csdl-list .csdl-import-view .csdl-table-container {
max-width: 460px;
max-height: 330px;
overflow: auto;
}
.csdl-container .csdl-list .csdl-import-view table {
width: 100%;
margin: 0;
Expand Down
88 changes: 56 additions & 32 deletions src/csdleditor.less
View file
Expand Up @@ -20,9 +20,9 @@
@doneBtnBorder: darken(@orange, 15%);

// assets
@headerImg: 'images/csdl-header.png?1';
@headerImg: 'images/csdl-header.png?2';
@headerImgWidth: 20px;
@headerImgHeight: 260px;
@headerImgHeight: 338px;



Expand Down Expand Up @@ -223,11 +223,15 @@
border-color: darken(@btnBorder, 10%);
}

&:active {
&:active, &.csdl-active {
background-color: darken(@btnBackgroundHighlight, 10%) e("\9");
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}

&.csdl-button-with-icon {
padding-right: 13px;
}

&.csdl-inactive {
cursor: default;
.opacity(65);
Expand Down Expand Up @@ -259,11 +263,7 @@
}
}

&.csdl-redo {
margin-right: 20px;
}

&.csdl-listeditor {
&.csdl-redo, &.csdl-listeditor, &.csdl-delete {
margin-right: 20px;
}

Expand Down Expand Up @@ -303,15 +303,18 @@
background-size: @headerImgWidth @headerImgHeight;
}

&.csdl-sort-az .csdl-button-icon {background-position: 2px -184px;}
&.csdl-copy .csdl-button-icon {background-position: 2px -210px;}
&.csdl-import .csdl-button-icon {background-position: 2px -235px;}
&.csdl-redo .csdl-button-icon {background-position: 2px -27px;}
&.csdl-geoselect .csdl-button-icon {background-position: 2px -53px;}
&.csdl-listeditor .csdl-button-icon {background-position: 2px -158px;}
&.csdl-theme .csdl-button-icon {background-position: 2px -79px;}
&.csdl-view-open .csdl-button-icon {background-position: 3px -105px;}
&.csdl-view-close .csdl-button-icon {background-position: 3px -131px;}
&.csdl-listeditor .csdl-button-icon {background-position: 2px -158px;}
&.csdl-sort-az .csdl-button-icon {background-position: 2px -184px;}
&.csdl-copy .csdl-button-icon {background-position: 2px -210px;}
&.csdl-import .csdl-button-icon {background-position: 2px -235px;}
&.csdl-edit .csdl-button-icon {background-position: 2px -261px;}
&.csdl-move .csdl-button-icon {background-position: 2px -287px;}
&.csdl-delete .csdl-button-icon {background-position: 2px -313px;}
}

.csdl-icon {
Expand Down Expand Up @@ -607,7 +610,7 @@ body > .csdl-popup {
display: inline-block;
height: 30px;
width: 200px;
margin: 0 10px;
margin: 0 2px;
line-height: 18px;
padding: 4px 6px;
font-size: 13px;
Expand Down Expand Up @@ -684,7 +687,7 @@ body > .csdl-popup {
margin: 0 3px;
.border-radius(4px);
overflow: hidden;
cursor: pointer;
position: relative;

span {
display: inline-block;
Expand All @@ -698,21 +701,14 @@ body > .csdl-popup {
display: none;
}

.csdl-item-delete {
display: inline-block;
visibility: hidden;
color: #fff;
width: 12px;
height: 12px;
text-align: center;
line-height: 9px;
background: #ff6569;
.border-radius(6px);
.csdl-list-item-mode-bar {
display: none;
position: absolute;
top: -5px;
right: 2px;
font-size: 11px;
font-weight: bold;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: transparent;
}

&:hover {
Expand All @@ -722,10 +718,6 @@ body > .csdl-popup {
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
border-bottom-color: darken(@btnBorder, 10%);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");

.csdl-item-delete {
visibility: visible;
}
}
}

Expand Down Expand Up @@ -791,6 +783,32 @@ body > .csdl-popup {
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
}
}

&.csdl-mode-edit li .csdl-list-item {
cursor: text;

.csdl-list-item-mode-bar {
display: none;
}
}

&.csdl-mode-delete li .csdl-list-item {
cursor: pointer;

.csdl-list-item-mode-bar {
display: block;
background: red;
}
}

&.csdl-mode-move li .csdl-list-item {
cursor: move;

.csdl-list-item-mode-bar {
display: block;
background: @blue;
}
}
}
}

Expand Down Expand Up @@ -866,6 +884,12 @@ body > .csdl-popup {
}
}

.csdl-table-container {
max-width: 460px;
max-height: 330px;
overflow: auto;
}

table {
width: 100%;
margin: 0;
Expand Down

0 comments on commit 51e5674

Please sign in to comment.