Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: Rename Try_OCaml→Tutorials, --enable-tryocaml→--enable-tutorials (
#451)

* Rename all relevant identifiers in the code, to avoid any ambiguity;

* learnocaml_main.ml: Keep CLI option --enable-tryocaml for
  backward-compatibility; Use a dedicated list of old option names

Close #415
  • Loading branch information
erikmd committed Feb 25, 2022
1 parent 9d5c7de commit 9651160
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 72 deletions.
2 changes: 1 addition & 1 deletion src/app/learnocaml_config.ml
Expand Up @@ -8,7 +8,7 @@
module Js = Js_of_ocaml.Js

class type learnocaml_config = object
method enableTryocaml: bool Js.optdef_prop
method enableTutorials: bool Js.optdef_prop
method enableLessons: bool Js.optdef_prop
method enableExercises: bool Js.optdef_prop
method enableToplevel: bool Js.optdef_prop
Expand Down
2 changes: 1 addition & 1 deletion src/app/learnocaml_config.mli
Expand Up @@ -12,7 +12,7 @@
module Js = Js_of_ocaml.Js

class type learnocaml_config = object
method enableTryocaml: bool Js.optdef_prop
method enableTutorials: bool Js.optdef_prop
method enableLessons: bool Js.optdef_prop
method enableExercises: bool Js.optdef_prop
method enableToplevel: bool Js.optdef_prop
Expand Down
12 changes: 6 additions & 6 deletions src/app/learnocaml_index_main.ml
Expand Up @@ -56,7 +56,7 @@ module El = struct
module Dyn = struct
(** Elements that are dynamically created (ids only) *)
let exercise_list_id = "learnocaml-main-exercise-list"
let tryocaml_id = "learnocaml-main-tryocaml"
let tutorial_id = "learnocaml-main-tutorial"
let lesson_id = "learnocaml-main-lesson"
let toplevel_id = "learnocaml-main-toplevel"
end
Expand Down Expand Up @@ -301,7 +301,7 @@ let lessons_tab select (arg, set_arg, _delete_arg) () =
end >>= fun () ->
Lwt.return lesson_div

let tryocaml_tab select (arg, set_arg, _delete_arg) () =
let tutorial_tab select (arg, set_arg, _delete_arg) () =
let open Tutorial in
let navigation_div =
Tyxml_js.Html5.(div ~a: [ a_class [ "navigation" ] ] []) in
Expand All @@ -320,7 +320,7 @@ let tryocaml_tab select (arg, set_arg, _delete_arg) () =
let buttons_div =
Tyxml_js.Html5.(div ~a: [ a_class [ "buttons" ] ] []) in
let tutorial_div =
Tyxml_js.Html5.(div ~a: [ a_id El.Dyn.tryocaml_id ])
Tyxml_js.Html5.(div ~a: [ a_id El.Dyn.tutorial_id ])
[ navigation_div ; step_div ; toplevel_div ; buttons_div ] in
let toplevel_buttons_group = button_group () in
disable_button_group toplevel_buttons_group (* enabled after init *) ;
Expand All @@ -329,7 +329,7 @@ let tryocaml_tab select (arg, set_arg, _delete_arg) () =
let on_enable () = Manip.removeClass step_div "disabled" in
toplevel_launch ~on_disable ~on_enable toplevel_div
Learnocaml_local_storage.toplevel_history
(fun () -> Lwt.async select) toplevel_buttons_group "tryocaml"
(fun () -> Lwt.async select) toplevel_buttons_group "tutorials"
in
show_loading [%i"Loading tutorials"] @@ fun () ->
Lwt_js.sleep 0.5 >>= fun () ->
Expand Down Expand Up @@ -680,8 +680,8 @@ let () =
let init_tabs token =
let get_opt o = Js.Optdef.get o (fun () -> false) in
let tabs =
(if get_opt config##.enableTryocaml
then [ "tryocaml", ([%i"Try OCaml"], tryocaml_tab) ] else []) @
(if get_opt config##.enableTutorials
then [ "tutorials", ([%i"Tutorials"], tutorial_tab) ] else []) @
(if get_opt config##.enableLessons
then [ "lessons", ([%i"Lessons"], lessons_tab) ] else []) @
(if get_opt config##.enableExercises then
Expand Down
16 changes: 10 additions & 6 deletions src/main/learnocaml_main.ml
Expand Up @@ -155,14 +155,18 @@ module Args = struct
value & opt dir default & info ["contents-dir"] ~docv:"DIR" ~doc:
"directory containing the base learn-ocaml app contents"

let enable opt doc =
(** [enable "opt" ~old["old";"very old"](*backward-compat opts*) "the.."] *)
let enable opt ?(old: string list = []) doc =
let f_on_off opt = ("enable-"^opt, "disable-"^opt) in
let on_opt, off_opt =
List.split (List.map f_on_off (opt :: old)) in
value & vflag None [
Some true, info ["enable-"^opt] ~doc:("Enable "^doc);
Some false, info ["disable-"^opt] ~doc:("Disable "^doc);
Some true, info on_opt ~doc:("Enable "^doc);
Some false, info off_opt ~doc:("Disable "^doc);
]

let try_ocaml = enable "tryocaml"
"the 'TryOCaml' tab (enabled by default if the repository contains a \
let try_ocaml = enable "tutorials" ~old:["tryocaml"]
"the 'Tutorials' tab (enabled by default if the repository contains a \
$(i,tutorials) directory)"

let playground = enable "playground"
Expand Down Expand Up @@ -367,7 +371,7 @@ let main o =
(fun oc ->
Lwt_io.fprintf oc
"var learnocaml_config = {\n\
\ enableTryocaml: %b,\n\
\ enableTutorials: %b,\n\
\ enablePlayground: %b,\n\
\ enableLessons: %b,\n\
\ enableExercises: %b,\n\
Expand Down
108 changes: 54 additions & 54 deletions static/css/learnocaml_main.css
Expand Up @@ -652,13 +652,13 @@ body {
}
}

/* -- Try OCaml activity --------------------------------------------------- */
/* -- Tutorials activity --------------------------------------------------- */

#learnocaml-main-tryocaml {
#learnocaml-main-tutorial {
position: absolute;
top:0 ; left:0; right:0; bottom:0;
}
#learnocaml-main-tryocaml > .buttons {
#learnocaml-main-tutorial > .buttons {
height: 40px;
background: linear-gradient(to bottom, #fff 0px, #ddd 10px, #aaa 60px);
color: #fff;
Expand All @@ -667,11 +667,11 @@ body {
flex-direction: row;
}
@media (max-width: 1399px) {
#learnocaml-main-tryocaml {
#learnocaml-main-tutorial {
display: flex ;
flex-direction: column;
}
#learnocaml-main-tryocaml > .navigation {
#learnocaml-main-tutorial > .navigation {
position: relative;
z-index: 3;
display: flex;
Expand All @@ -681,15 +681,15 @@ body {
padding: 0px;
flex: 0 0 auto;
}
#learnocaml-main-tryocaml > .toplevel-pane {
#learnocaml-main-tutorial > .toplevel-pane {
flex: 1 1 auto;
position: relative;
z-index: 1;
}
#learnocaml-main-tryocaml > .buttons {
#learnocaml-main-tutorial > .buttons {
flex: 0 0 auto;
}
#learnocaml-main-tryocaml > .step-pane {
#learnocaml-main-tutorial > .step-pane {
flex: 0 0 auto;
position: relative;
z-index: 2;
Expand All @@ -699,15 +699,15 @@ body {
flex-direction: column;
max-height: 50%;
}
#learnocaml-main-tryocaml > .step-pane::after {
#learnocaml-main-tutorial > .step-pane::after {
position: absolute;
left:0; right:0; bottom: -8px; height: 8px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
content:"";
}
}
@media (min-width: 1400px) {
#learnocaml-main-tryocaml > .navigation {
#learnocaml-main-tutorial > .navigation {
position: absolute;
top: 0; left:0; right: 0; height: 60px;
z-index: 3;
Expand All @@ -717,16 +717,16 @@ body {
background: #ddd;
padding: 0px;
}
#learnocaml-main-tryocaml > .toplevel-pane {
#learnocaml-main-tutorial > .toplevel-pane {
position: absolute;
right: 500px; top: 61px; bottom: 40px; left: 0px;
z-index: 1;
}
#learnocaml-main-tryocaml > .buttons {
#learnocaml-main-tutorial > .buttons {
position: absolute;
right: 500px; bottom: 0; left: 0px;
}
#learnocaml-main-tryocaml > .step-pane {
#learnocaml-main-tutorial > .step-pane {
position: absolute;
right: 0; top: 61px; bottom: 0; width: 500px;
z-index: 2;
Expand All @@ -735,20 +735,20 @@ body {
display: flex;
flex-direction: column;
}
#learnocaml-main-tryocaml > .step-pane::after {
#learnocaml-main-tutorial > .step-pane::after {
position: absolute;
top:0; bottom:0; left: -8px; width: 8px;
background: linear-gradient(to left, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
content:"";
}
}
#learnocaml-main-tryocaml > .toplevel-pane > .toplevel-output::after {
#learnocaml-main-tutorial > .toplevel-pane > .toplevel-output::after {
position: absolute;
left:0; top:0; bottom: 0px; width: 8px;
background: linear-gradient(to right, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
content:"";
}
#learnocaml-main-tryocaml > .step-pane > h3 {
#learnocaml-main-tutorial > .step-pane > h3 {
margin: 0;
padding: 0;
background: #dfcf8f;
Expand All @@ -757,85 +757,85 @@ body {
text-align: center;
flex: 0 0 auto;
}
#learnocaml-main-tryocaml > .step-pane::before {
#learnocaml-main-tutorial > .step-pane::before {
position: absolute;
left:0; right:0; bottom:0;
content:"";
background: rgba(128,128,128,0.4);
opacity: 0;
}
#learnocaml-main-tryocaml > .step-pane.disabled::before {
#learnocaml-main-tutorial > .step-pane.disabled::before {
top:0;
transition: opacity 0.5s 0.5s;
opacity: 1;
}
#learnocaml-main-tryocaml > .step-pane > h3 > span {
#learnocaml-main-tutorial > .step-pane > h3 > span {
padding: 10px 0px 10px 0px;
flex: 1 1 auto;
}
#learnocaml-main-tryocaml > .step-pane > h3 > button {
#learnocaml-main-tutorial > .step-pane > h3 > button {
padding: 10px 5px 10px 5px;
flex: 0 0 auto;
border: none;
background: none;
}
#learnocaml-main-tryocaml > .step-pane > h3 > button .label {
#learnocaml-main-tutorial > .step-pane > h3 > button .label {
display: none;
}
#learnocaml-main-tryocaml > .step-pane > div {
#learnocaml-main-tutorial > .step-pane > div {
padding: 10px;
flex: 1 1 auto;
overflow: auto;
}
#learnocaml-main-tryocaml > .step-pane ul,
#learnocaml-main-tryocaml > .step-pane p {
#learnocaml-main-tutorial > .step-pane ul,
#learnocaml-main-tutorial > .step-pane p {
margin: 0;
}
#learnocaml-main-tryocaml > .step-pane ul + ul,
#learnocaml-main-tryocaml > .step-pane ul + p,
#learnocaml-main-tryocaml > .step-pane p + ul,
#learnocaml-main-tryocaml > .step-pane p + p {
#learnocaml-main-tutorial > .step-pane ul + ul,
#learnocaml-main-tutorial > .step-pane ul + p,
#learnocaml-main-tutorial > .step-pane p + ul,
#learnocaml-main-tutorial > .step-pane p + p {
margin-top: 5px;
}
#learnocaml-main-tryocaml > .step-pane pre.runnable {
#learnocaml-main-tutorial > .step-pane pre.runnable {
margin: 5px -5px 5px -5px;
display: block;
padding: 2px 7px 2px 7px;
background: #fff8b8;
cursor: pointer;
}
#learnocaml-main-tryocaml > .step-pane code.runnable {
#learnocaml-main-tutorial > .step-pane code.runnable {
padding: 2px;
background: #fff8b8;
cursor: pointer;
}
#learnocaml-main-tryocaml > .step-pane pre.runnable:hover,
#learnocaml-main-tryocaml > .step-pane code.runnable:hover {
#learnocaml-main-tutorial > .step-pane pre.runnable:hover,
#learnocaml-main-tutorial > .step-pane code.runnable:hover {
background: #ffffdd;
}
#learnocaml-main-tryocaml > .step-pane > div > pre.runnable:last-child {
#learnocaml-main-tutorial > .step-pane > div > pre.runnable:last-child {
margin-bottom: -5px;
}
#learnocaml-main-tryocaml > .navigation::after {
#learnocaml-main-tutorial > .navigation::after {
position: absolute;
left:0; bottom: -9px; right: 0px; height: 8px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
content:"";
}
#learnocaml-main-tryocaml > .navigation > button {
#learnocaml-main-tutorial > .navigation > button {
flex: 0;
padding: 0 10px 0 10px;
background: none;
border: none;
position: relative;
display: block;
}
#learnocaml-main-tryocaml > .navigation > button > * {
#learnocaml-main-tutorial > .navigation > button > * {
padding: 5px;
color: black;
text-align: center;
}
#learnocaml-main-tryocaml > .navigation > select {
#learnocaml-main-tutorial > .navigation > select {
flex: 1 1 auto;
padding: 0 10px 0 10px;
background: none;
Expand All @@ -848,17 +848,17 @@ body {
-moz-appearance:none;
appearance:none;
}
#learnocaml-main-tryocaml > .navigation > select[disabled] {
#learnocaml-main-tutorial > .navigation > select[disabled] {
transition: background 0.5s 0.5s;
background: rgba(128,128,128,0.4);
}
#learnocaml-main-tryocaml > .navigation > select:not([disabled]):hover {
#learnocaml-main-tutorial > .navigation > select:not([disabled]):hover {
background: rgba(170,204,255,0.3);
}
#learnocaml-main-tryocaml > .toplevel-pane {
#learnocaml-main-tutorial > .toplevel-pane {
overflow: hidden;
}
#learnocaml-main-tryocaml > .buttons > button {
#learnocaml-main-tutorial > .buttons > button {
flex: 1 1 auto;
background: none;
border: none;
Expand All @@ -868,40 +868,40 @@ body {
position: relative;
padding: 0;
}
#learnocaml-main-tryocaml > .buttons > button:not(:first-child) {
#learnocaml-main-tutorial > .buttons > button:not(:first-child) {
border-left: 1px #666 solid;
}
@media (min-width: 550px) {
#learnocaml-main-tryocaml > .navigation {
#learnocaml-main-tutorial > .navigation {
flex: 0 0 60px;
}
#learnocaml-main-tryocaml > .step-pane > h3 > span,
#learnocaml-main-tryocaml > .navigation > select {
#learnocaml-main-tutorial > .step-pane > h3 > span,
#learnocaml-main-tutorial > .navigation > select {
font-weight: bold;
font-size: 22px;
}
#learnocaml-main-tryocaml > .step-pane > h3 > button,
#learnocaml-main-tryocaml > .navigation > button {
#learnocaml-main-tutorial > .step-pane > h3 > button,
#learnocaml-main-tutorial > .navigation > button {
min-width: 80px;
}
}
@media (max-width: 549px) {
#learnocaml-main-tryocaml > .buttons > button > .label {
#learnocaml-main-tutorial > .buttons > button > .label {
display: none;
}
#learnocaml-main-tryocaml > .navigation {
#learnocaml-main-tutorial > .navigation {
flex: 0 0 40px;
}
#learnocaml-main-tryocaml > .navigation > button > .label {
#learnocaml-main-tutorial > .navigation > button > .label {
display: none;
}
#learnocaml-main-tryocaml > .step-pane > h3 > span,
#learnocaml-main-tryocaml > .navigation > select {
#learnocaml-main-tutorial > .step-pane > h3 > span,
#learnocaml-main-tutorial > .navigation > select {
font-weight: bold;
font-size: 18px;
}
#learnocaml-main-tryocaml > .step-pane > h3 > button,
#learnocaml-main-tryocaml > .navigation > button {
#learnocaml-main-tutorial > .step-pane > h3 > button,
#learnocaml-main-tutorial > .navigation > button {
min-width: 40px;
}
}
Expand Down

0 comments on commit 9651160

Please sign in to comment.