Skip to content

Commit 78789e6

Browse files
justin212407justin212407
authored
Adding Play-Only-Mode to MusicBlocks (sugarlabs#4320)
* No pallete when the play-only-mode is triggered Signed-off-by: Justin Charles <[email protected]> * Added persistent notification for play-only-mode Signed-off-by: Justin Charles <[email protected]> * Removing right bottom buttons Signed-off-by: Justin Charles <[email protected]> * Fixed responsiveness of main menu below width of 400px Signed-off-by: Justin Charles <[email protected]> * Stopped triggering of Auxiliary Menu in play only mode Signed-off-by: Justin Charles <[email protected]> * Fixing accidental aux menu triggering Signed-off-by: Justin Charles <[email protected]> * Enabling Aux button in play-only-mode Signed-off-by: Justin Charles <[email protected]> * Added custom dropdown menu Signed-off-by: Justin Charles <[email protected]> * Fixing breaking changes Signed-off-by: Justin Charles <[email protected]> --------- Signed-off-by: Justin Charles <[email protected]>
1 parent 07f906a commit 78789e6

File tree

3 files changed

+264
-4
lines changed

3 files changed

+264
-4
lines changed

‎css/activities.css‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
}
1313
*/
1414

15+
@import url("play-only-mode.css");
16+
1517
*:focus {
1618
outline: none;
1719
}
@@ -1897,4 +1899,22 @@ table {
18971899
fill : #033CD2;
18981900
stroke : #78E600;
18991901
stroke-width: 3;
1900-
}
1902+
}
1903+
1904+
#persistentNotification {
1905+
position: fixed;
1906+
bottom: 20px;
1907+
left: 50%;
1908+
transform: translateX(-50%);
1909+
background-color: #1E88E5;
1910+
color: white;
1911+
padding: 15px 20px;
1912+
border-radius: 8px;
1913+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
1914+
font-size: 14px;
1915+
font-weight: bold;
1916+
z-index: 1000;
1917+
text-align: center;
1918+
min-width: 250px;
1919+
max-width: 80%;
1920+
}

‎css/play-only-mode.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.play-only #palette {
2+
display: none !important;
3+
visibility: hidden !important;
4+
height: 0 !important;
5+
width: 0 !important;
6+
pointer-events: none !important;
7+
overflow: hidden !important;
8+
}
9+
10+
.play-only #Grid {
11+
display: none !important;
12+
visibility: hidden !important;
13+
height: 0 !important;
14+
width: 0 !important;
15+
pointer-events: none !important;
16+
overflow: hidden !important;
17+
}
18+
19+
.play-only #Clear {
20+
display: none !important;
21+
visibility: hidden !important;
22+
height: 0 !important;
23+
width: 0 !important;
24+
pointer-events: none !important;
25+
overflow: hidden !important;
26+
}
27+
28+
.play-only #Collapse {
29+
display: none !important;
30+
visibility: hidden !important;
31+
height: 0 !important;
32+
width: 0 !important;
33+
pointer-events: none !important;
34+
overflow: hidden !important;
35+
}
36+
37+
.play-only [id="Show/hide blocks"] {
38+
display: none !important;
39+
visibility: hidden !important;
40+
height: 0 !important;
41+
width: 0 !important;
42+
pointer-events: none !important;
43+
overflow: hidden !important;
44+
}
45+
46+
.play-only [id="Expand/collapse blocks"] {
47+
display: none !important;
48+
visibility: hidden !important;
49+
height: 0 !important;
50+
width: 0 !important;
51+
pointer-events: none !important;
52+
overflow: hidden !important;
53+
}
54+
55+
.play-only [id="Decrease block size"]{
56+
display: none !important;
57+
visibility: hidden !important;
58+
height: 0 !important;
59+
width: 0 !important;
60+
pointer-events: none !important;
61+
overflow: hidden !important;
62+
}
63+
64+
.play-only [id="Increase block size"] {
65+
display: none !important;
66+
visibility: hidden !important;
67+
height: 0 !important;
68+
width: 0 !important;
69+
pointer-events: none !important;
70+
overflow: hidden !important;
71+
}
72+
73+
.play-only #buttoncontainerBOTTOM {
74+
display: flex !important;
75+
justify-content: flex-end !important;
76+
align-items: center !important;
77+
width: 100% !important;
78+
position: fixed !important;
79+
bottom: 10px !important;
80+
left: 0 !important;
81+
padding: 5px 10px !important;
82+
background: rgba(255, 255, 255, 0.85) !important;
83+
z-index: 9999 !important;
84+
}
85+
86+
.play-only #Home\ \[HOME\] {
87+
display: flex !important;
88+
justify-content: center !important;
89+
align-items: center !important;
90+
position: fixed !important;
91+
right: 15px !important;
92+
bottom: 15px !important;
93+
width: auto !important;
94+
height: auto !important;
95+
z-index: 10000 !important;
96+
background-color: rgba(255, 255, 255, 0.9) !important;
97+
padding: 5px !important;
98+
border-radius: 5px !important;
99+
}
100+
101+
@media only screen and (max-width: 400px) {
102+
.play-only ul.main.right {
103+
margin-top: 0px !important;
104+
position: relative !important;
105+
display: flex !important;
106+
flex-wrap: wrap !important;
107+
justify-content: center !important;
108+
align-items: center !important;
109+
gap: 10px !important;
110+
}
111+
112+
.play-only nav {
113+
min-height: 50px !important;
114+
display: flex !important;
115+
align-items: center !important;
116+
justify-content: center !important;
117+
}
118+
}
119+
120+
@media (max-width: 768px), (max-height: 600px) {
121+
/* Enable the auxiliary button */
122+
.play-only #toggleAuxBtn {
123+
pointer-events: auto !important;
124+
opacity: 1 !important;
125+
}
126+
127+
/* Hide the full auxiliary toolbar */
128+
.play-only #aux-toolbar {
129+
display: none !important;
130+
}
131+
}
132+
133+
/* Make the container background invisible without affecting child elements */
134+
.play-only #buttoncontainerBOTTOM {
135+
background: transparent !important;
136+
border: none !important;
137+
padding: 0 !important;
138+
margin: 0 !important;
139+
height: auto !important;
140+
box-shadow: none !important;
141+
}
142+
143+
/* Ensure the Home button remains visible */
144+
.play-only #Home\ \[HOME\] {
145+
display: flex !important;
146+
position: fixed !important;
147+
}
148+

‎index.html‎

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -676,9 +676,8 @@
676676
id="menu"
677677
class="animated-icon material-icons md-48 "
678678
>menu</i
679-
></a
680-
>
681-
</li>
679+
></a>
680+
</li>
682681
<li>
683682
<a
684683
id="helpIcon"
@@ -781,6 +780,7 @@
781780
class="tooltipped dropdown-trigger"
782781
data-position="left"
783782
data-activates="themedropdown"
783+
data-tooltip="Select Theme"
784784
><i class="material-icons md-48">brightness_7</i></a
785785
>
786786
</li>
@@ -837,6 +837,7 @@
837837
id="restoreIcon"
838838
class="tooltipped"
839839
data-position="bottom"
840+
data-tooltip="Restore"
840841
><i class="material-icons md-48"
841842
>restore_from_trash</i
842843
></a
@@ -873,6 +874,7 @@
873874
class="tooltipped dropdown-trigger"
874875
data-position="left"
875876
data-activates="languagedropdown"
877+
data-tooltip="Select Language"
876878
><i class="material-icons md-48"
877879
>translate</i
878880
></a
@@ -989,6 +991,96 @@
989991
</script>
990992
</div>
991993
</div>
994+
995+
<script>
996+
document.addEventListener('DOMContentLoaded', function() {
997+
let persistentNotification = null;
998+
999+
function showPersistentNotification() {
1000+
if (!persistentNotification) {
1001+
persistentNotification = document.createElement("div");
1002+
persistentNotification.id = "persistentNotification";
1003+
persistentNotification.innerHTML = "Play only mode enabled. For full Music Blocks experience, use a larger display.";
1004+
document.body.appendChild(persistentNotification);
1005+
}
1006+
}
1007+
1008+
function removePersistentNotification() {
1009+
if (persistentNotification) {
1010+
persistentNotification.remove();
1011+
persistentNotification = null;
1012+
}
1013+
}
1014+
1015+
function hideElementById(elementId) {
1016+
const elem = document.getElementById(elementId);
1017+
if (elem) {
1018+
elem.style.display = "none";
1019+
}
1020+
}
1021+
1022+
function showElementById(elementId) {
1023+
const elem = document.getElementById(elementId);
1024+
if (elem) {
1025+
elem.style.display = "";
1026+
}
1027+
}
1028+
1029+
function togglePlayOnlyMode() {
1030+
const isSmallScreen = (window.innerWidth < 768) || (window.innerHeight < 600);
1031+
const body = document.body;
1032+
const homeButton = document.getElementById("Home [HOME]");
1033+
const buttonContainer = document.getElementById("buttoncontainerBOTTOM");
1034+
1035+
if (isSmallScreen) {
1036+
// Enable play-only mode
1037+
body.classList.add("play-only");
1038+
showPersistentNotification();
1039+
1040+
if (buttonContainer) {
1041+
buttonContainer.style.display = "flex";
1042+
buttonContainer.style.justifyContent = "flex-end";
1043+
buttonContainer.style.alignItems = "center";
1044+
}
1045+
if (homeButton) {
1046+
homeButton.style.display = "flex";
1047+
homeButton.style.position = "fixed";
1048+
homeButton.style.right = "15px";
1049+
homeButton.style.bottom = "15px";
1050+
homeButton.style.zIndex = "10000";
1051+
}
1052+
1053+
// Hide certain elements
1054+
hideElementById("Show/hide blocks");
1055+
hideElementById("Expand/collapse blocks");
1056+
hideElementById("Decrease block size");
1057+
hideElementById("Increase block size");
1058+
hideElementById("grid");
1059+
hideElementById("palette");
1060+
1061+
} else {
1062+
// Disable play-only mode
1063+
body.classList.remove("play-only");
1064+
removePersistentNotification();
1065+
1066+
if (homeButton) homeButton.style = "";
1067+
if (buttonContainer) buttonContainer.style = "";
1068+
1069+
showElementById("Show/hide blocks");
1070+
showElementById("Expand/collapse blocks");
1071+
showElementById("Decrease block size");
1072+
showElementById("Increase block size");
1073+
showElementById("grid");
1074+
showElementById("palette");
1075+
}
1076+
}
1077+
1078+
togglePlayOnlyMode();
1079+
1080+
window.addEventListener("resize", togglePlayOnlyMode);
1081+
});
1082+
</script>
1083+
9921084
<div id="searchBar" tabindex="-1">
9931085
<input
9941086
type="text"

0 commit comments

Comments
 (0)