gsuiTitleUser: attr readonly

gridsound · Oct 26, 2024 · 39b3dfd · 39b3dfd
1 parent cda980f
commit 39b3dfd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/gsuiTitleUser/gsuiTitleUser.css b/gsuiTitleUser/gsuiTitleUser.css
@@ -94,7 +94,10 @@ gsui-titleuser:not( [ connected ] ) .gsuiTitleUser-user {
 	display: flex;
 	height: 20px;
 	border-radius: 4px;
-	background-color: #6677aa;
+	background-color: #67a;
+}
+gsui-titleuser[ readonly ] .gsuiTitleUser-cmp {
+	background-color: #a66;
 }
 
 /* .......................................................................... */
@@ -107,6 +110,9 @@ gsui-titleuser:not( [ connected ] ) .gsuiTitleUser-user {
 	background-color: #ba5d5d;
 	transition: width .2s;
 }
+gsui-titleuser[ readonly ] .gsuiTitleUser-save {
+	display: none;
+}
 gsui-titleuser[ saved ] .gsuiTitleUser-save {
 	width: 0;
 }
@@ -148,12 +154,15 @@ gsui-titleuser[ just-saved ] .gsuiTitleUser-justSaved {
 	text-overflow: ellipsis;
 	padding-right: 2px;
 }
+gsui-titleuser[ readonly ] .gsuiTitleUser-cmpName {
+	font-style: italic;
+}
 .gsuiTitleUser-cmpName:empty::after {
 	content: "Untitled";
 	font-style: italic;
 	opacity: .7;
 }
-gsui-titleuser:not( [ saved ] ) .gsuiTitleUser-cmpName::before {
+gsui-titleuser:not( [ saved ] ):not( [ readonly ] ) .gsuiTitleUser-cmpName::before {
 	content: "*";
 }
 .gsuiTitleUser-cmpEditIcon {

diff --git a/gsuiTitleUser/index.html b/gsuiTitleUser/index.html
@@ -31,6 +31,7 @@
 	<gsui-titleuser avatar="../test-assets/avatar.jpg"></gsui-titleuser>
 </div>
 <div id="TEST-CTRLS">
+	<div><button id="readonly">toggle readonly</button></div>
 	<div><button id="connected">toggle connected</button></div>
 	<div><button id="connecting">toggle connecting</button></div>
 	<div><button id="disconnecting">toggle disconnecting</button></div>
@@ -54,6 +55,7 @@
 <!-- ....................................................................... -->
 <script>
 const elCmp = document.querySelector( "gsui-titleuser" );
+const readonly = document.querySelector( "#readonly" );
 const connected = document.querySelector( "#connected" );
 const connecting = document.querySelector( "#connecting" );
 const disconnecting = document.querySelector( "#disconnecting" );
@@ -63,6 +65,7 @@
 const cmpName = document.querySelector( "#cmpName" );
 const longUser = document.querySelector( "#longUser" );
 
+readonly.onclick = () => GSUtoggleAttribute( elCmp, "readonly" );
 connected.onclick = () => GSUtoggleAttribute( elCmp, "connected" );
 connecting.onclick = () => GSUtoggleAttribute( elCmp, "connecting" );
 disconnecting.onclick = () => GSUtoggleAttribute( elCmp, "disconnecting" );