CSS Style Rule - Make selector editable

author: Eric Guzman 2012-04-12 11:31:39 -0700
committer: Eric Guzman 2012-04-12 11:31:39 -0700
commit: 0a4672001ac5122c512087779e57dc07de4ec1b7 (patch)
tree: bed7b56316cf5e0ced5daa1c5c872706b6771542
parent: a4337391471dd73f351ad2a3b9100e5b5d10f029 (diff)
download: ninja-0a4672001ac5122c512087779e57dc07de4ec1b7.tar.gz
2 files changed, 25 insertions, 3 deletions
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
index 3ec8901a..6918e695 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
@@ -25,4 +25,25 @@
    right: 8px;
    text-decoration: none;
    font-family: "Droid Sans", sans-serif;
+}
+.css-style-rule-item .nj-css-selector {
+    position: relative;
+    border: 1px solid rgba(0,0,0,0);
+}
+.css-style-rule-item .nj-css-selector.editable {
+    border: 1px solid #999;
+    border-radius: 3px;
+    box-shadow: 1px 1px 1px #CCC;
+    color: #333;
+    display: inline-block;
+    margin-right: 7px;
+    max-width: none;
+    overflow: visible;
+    -webkit-user-select: text;
+}
+.css-style-rule-item .nj-css-selector:after {
+    position: absolute;
+    right: -10px;
 }
 \ No newline at end of file
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
index de64f81f..1042d29e 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
@@ -33,9 +33,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                }
            },
            "selector": {
-                "module": "montage/ui/dynamic-text.reel",
+                "module": "js/components/hintable.reel",
-                "name" : "DynamicText",
+                "name" : "Hintable",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "rule-selector"}
                },
                "bindings": {
@@ -64,7 +65,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
    </script>
 </head>
 <body>
-<li id="rule-item" class="css-style-rule-item">
+<li data-montage-id="rule-item" class="css-style-rule-item">
    <div class="style-rule-heading">
        <a href="#" id="style-sheet-name" class="style-sheet-name"></a>
        <span id="rule-selector" class="nj-css-selector"></span>
author	Eric Guzman	2012-04-12 11:31:39 -0700
committer	Eric Guzman	2012-04-12 11:31:39 -0700
commit	0a4672001ac5122c512087779e57dc07de4ec1b7 (patch)
tree	bed7b56316cf5e0ced5daa1c5c872706b6771542
parent	a4337391471dd73f351ad2a3b9100e5b5d10f029 (diff)
download	ninja-0a4672001ac5122c512087779e57dc07de4ec1b7.tar.gz

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css index 3ec8901a..6918e695 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
@@ -25,4 +25,25 @@
25	right: 8px;	25	right: 8px;
26	text-decoration: none;	26	text-decoration: none;
27	font-family: "Droid Sans", sans-serif;	27	font-family: "Droid Sans", sans-serif;
		28	}
		29	.css-style-rule-item .nj-css-selector {
		30	position: relative;
		31	border: 1px solid rgba(0,0,0,0);
		32	}
		33	.css-style-rule-item .nj-css-selector.editable {
		34	border: 1px solid #999;
		35	border-radius: 3px;
		36	box-shadow: 1px 1px 1px #CCC;
		37	color: #333;
		38	display: inline-block;
		39	margin-right: 7px;
		40	max-width: none;
		41	overflow: visible;
		42	-webkit-user-select: text;
		43	}
		44	.css-style-rule-item .nj-css-selector:after {
		45	position: absolute;
		46
		47	right: -10px;
		48
28	} \ No newline at end of file	49	} \ No newline at end of file


diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html index de64f81f..1042d29e 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
@@ -33,9 +33,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
33	}	33	}
34	},	34	},
35	"selector": {	35	"selector": {
36	"module": "montage/ui/dynamic-text.reel",	36	"module": "js/components/hintable.reel",
37	"name" : "DynamicText",	37	"name" : "Hintable",
38	"properties": {	38	"properties": {
		39	"startOnEvent": "click",
39	"element": {"#": "rule-selector"}	40	"element": {"#": "rule-selector"}
40	},	41	},
41	"bindings": {	42	"bindings": {
@@ -64,7 +65,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
64	</script>	65	</script>
65	</head>	66	</head>
66	<body>	67	<body>
67	<li id="rule-item" class="css-style-rule-item">	68	<li data-montage-id="rule-item" class="css-style-rule-item">
68	<div class="style-rule-heading">	69	<div class="style-rule-heading">
69	<a href="#" id="style-sheet-name" class="style-sheet-name"></a>	70	<a href="#" id="style-sheet-name" class="style-sheet-name"></a>
70	<span id="rule-selector" class="nj-css-selector"></span>	71	<span id="rule-selector" class="nj-css-selector"></span>