This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/master by this push:
new 19d781f Replace JS package toggle w/ pure CSS solution (#11035)
19d781f is described below
commit 19d781f2fdcc21bfd1be98ece5a864bf342c2adc
Author: Ryan Hamilton <[email protected]>
AuthorDate: Mon Sep 21 07:29:05 2020 -0400
Replace JS package toggle w/ pure CSS solution (#11035)
---
.rat-excludes | 2 -
airflow/www/package.json | 1 -
airflow/www/static/css/switch.css | 84 +++++++++++++++++++++++++++++++++
airflow/www/templates/airflow/dag.html | 9 ++--
airflow/www/templates/airflow/dags.html | 11 +++--
airflow/www/webpack.config.js | 4 +-
airflow/www/yarn.lock | 5 --
licenses/LICENSE-bootstrap-toggle.txt | 21 ---------
setup.cfg | 1 -
9 files changed, 98 insertions(+), 40 deletions(-)
diff --git a/.rat-excludes b/.rat-excludes
index ea26511..608e1da 100644
--- a/.rat-excludes
+++ b/.rat-excludes
@@ -64,8 +64,6 @@ underscore.js
jquery.dataTables.min.js
jqClock.min.js
dagre-d3.min.js
-bootstrap-toggle.min.js
-bootstrap-toggle.min.css
d3.v3.min.js
ace.js
node_modules/*
diff --git a/airflow/www/package.json b/airflow/www/package.json
index 955df82..166e73c 100644
--- a/airflow/www/package.json
+++ b/airflow/www/package.json
@@ -60,7 +60,6 @@
},
"dependencies": {
"bootstrap-3-typeahead": "^4.0.2",
- "bootstrap-toggle": "^2.2.2",
"d3": "^3.4.4",
"d3-tip": "^0.9.1",
"dagre-d3": "^0.6.4",
diff --git a/airflow/www/static/css/switch.css
b/airflow/www/static/css/switch.css
new file mode 100644
index 0000000..1d8d988
--- /dev/null
+++ b/airflow/www/static/css/switch.css
@@ -0,0 +1,84 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.switch-label {
+ display: inline-block;
+ margin: 0;
+ cursor: pointer;
+}
+
+.switch-input {
+ /* Visusally hidden input but still accessible */
+ position: absolute;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ border: 0;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ white-space: nowrap;
+ clip-path: inset(50%);
+}
+
+.switch {
+ box-sizing: content-box;
+ display: inline-flex;
+ align-items: center;
+ border-radius: 999px;
+ width: 2.5rem;
+ padding: 2px;
+ background-color: #c4c2c1;
+ cursor: pointer;
+}
+
+.switch::before {
+ border-radius: 50%;
+ width: 1.5rem;
+ height: 1.5rem;
+ content: '';
+ background-color: #edecec;
+ transition-timing-function: ease-in-out;
+ transition-duration: 0.25s;
+ transition-property: transform, background-color;
+}
+
+.switch-input:checked + .switch {
+ background-color: #005c66;
+}
+
+.switch-input:checked + .switch::before {
+ background-color: #fffefd;
+ transform: translateX(1rem);
+}
+
+.switch-input:focus + .switch {
+ box-shadow: 0 0 0 3px rgba(0, 92, 102, 0.4);
+}
+
+.switch-input:focus + .switch::before {
+ background-color: #fff;
+}
+
+.switch-input:not(:checked) + .switch:hover {
+ background-color: #9e9e9c;
+}
+
+.switch-input:not(:checked) + .switch:hover::before {
+ background-color: #f5f5f5;
+}
diff --git a/airflow/www/templates/airflow/dag.html
b/airflow/www/templates/airflow/dag.html
index 611a2f6..817d10b 100644
--- a/airflow/www/templates/airflow/dag.html
+++ b/airflow/www/templates/airflow/dag.html
@@ -23,7 +23,7 @@
{% block head_css %}
{{ super() }}
- <link href="{{ url_for_asset('bootstrap-toggle.min.css') }}"
rel="stylesheet" type="text/css">
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static',
filename='css/switch.css') }}">
{% endblock %}
{% block content %}
@@ -32,7 +32,10 @@
{% if dag.parent_dag is defined and dag.parent_dag %}
<span class="text-muted">SUBDAG:</span> {{ dag.dag_id }}
{% else %}
- <input id="pause_resume" dag_id="{{ dag.dag_id }}" type="checkbox" {{
"checked" if not dag.is_paused else "" }} data-toggle="toggle" data-size="mini"
method="post">
+ <label class="switch-label js-tooltip" title="Pause/Unpause DAG">
+ <input class="switch-input" id="pause_resume" dag_id="{{ dag.dag_id
}}" type="checkbox" {{ "checked" if not dag.is_paused else "" }} method="post">
+ <span class="switch" aria-hidden="true"></span>
+ </label>
<span class="text-muted">DAG:</span> {{ dag.dag_id }}
<small class="text-muted">{{ dag.description[0:150] + '…' if
dag.description and dag.description|length > 150 else
dag.description|default('', true) }}</small>
{% endif %}
@@ -343,7 +346,6 @@
{% endblock %}
{% block tail %}
{{ super() }}
- <script src="{{ url_for_asset('bootstrap-toggle.min.js') }}"></script>
<script>
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
@@ -595,5 +597,6 @@
$buttons.addClass('btn-danger');
});
});
+ $('.js-tooltip').tooltip();
</script>
{% endblock %}
diff --git a/airflow/www/templates/airflow/dags.html
b/airflow/www/templates/airflow/dags.html
index f7697fe..d688a32 100644
--- a/airflow/www/templates/airflow/dags.html
+++ b/airflow/www/templates/airflow/dags.html
@@ -29,8 +29,8 @@
{% block head_css %}
{{ super() }}
- <link href="{{ url_for_asset('dataTables.bootstrap.min.css') }}"
rel="stylesheet" type="text/css">
- <link href="{{ url_for_asset('bootstrap-toggle.min.css') }}"
rel="stylesheet" type="text/css">
+ <link rel="stylesheet" type="text/css" href="{{
url_for_asset('dataTables.bootstrap.min.css') }}">
+ <link rel="stylesheet" type="text/css" href="{{ url_for_asset('switch.css')
}}">
{% endblock %}
{% block content %}
@@ -102,7 +102,10 @@
<!-- Column 2: Turn dag on/off -->
<td>
- <input id="toggle-{{ dag.dag_id }}" dag_id="{{ dag.dag_id }}"
type="checkbox" {{ "checked" if not dag.is_paused else "" }}
data-toggle="toggle" data-size="mini" method="post">
+ <label class="switch-label js-tooltip" title="Pause/Unpause DAG">
+ <input class="switch-input" id="toggle-{{ dag.dag_id }}"
dag_id="{{ dag.dag_id }}" type="checkbox" {{ "checked" if not dag.is_paused
else "" }} method="post">
+ <span class="switch" aria-hidden="true"></span>
+ </label>
</td>
<!-- Column 3: Name -->
@@ -245,7 +248,6 @@
<script src="{{ url_for_asset('d3.min.js') }}"></script>
<script src="{{ url_for_asset('jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for_asset('dataTables.bootstrap.min.js') }}"></script>
- <script src="{{ url_for_asset('bootstrap-toggle.min.js') }}"></script>
<script>
const DAGS_INDEX = "{{ url_for('Airflow.index') }}";
@@ -593,5 +595,6 @@
hideSvgTooltip();
});
});
+ $('.js-tooltip').tooltip();
</script>
{% endblock %}
diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
index 98bcd04..3424e43 100644
--- a/airflow/www/webpack.config.js
+++ b/airflow/www/webpack.config.js
@@ -40,6 +40,7 @@ const config = {
'task-instances': `${STATIC_DIR}/js/task-instances.js`,
ganttChartD3v2: `${STATIC_DIR}/js/gantt-chart-d3v2.js`,
main: `${STATIC_DIR}/css/main.css`,
+ switch: `${STATIC_DIR}/css/switch.css`,
airflowDefaultTheme: `${STATIC_DIR}/css/bootstrap-theme.css`,
moment: 'moment-timezone',
},
@@ -146,9 +147,6 @@ const config = {
from: 'node_modules/bootstrap-3-typeahead/*min.*',
flatten: true
}, {
- from: 'node_modules/bootstrap-toggle/**/*bootstrap-toggle.min.*',
- flatten: true,
- }, {
from: 'node_modules/datatables.net/**/**.min.*',
flatten: true
}, {
diff --git a/airflow/www/yarn.lock b/airflow/www/yarn.lock
index daf56e8..a464313 100644
--- a/airflow/www/yarn.lock
+++ b/airflow/www/yarn.lock
@@ -1161,11 +1161,6 @@ bootstrap-3-typeahead@^4.0.2:
resolved
"https://registry.yarnpkg.com/bootstrap-3-typeahead/-/bootstrap-3-typeahead-4.0.2.tgz#cb1c969044856862096fc8c71cc21b3acbb50412";
integrity sha1-yxyWkESFaGIJb8jHHMIbOsu1BBI=
-bootstrap-toggle@^2.2.2:
- version "2.2.2"
- resolved
"https://registry.yarnpkg.com/bootstrap-toggle/-/bootstrap-toggle-2.2.2.tgz#2b88534fc1b998674f877f98ba0d8b5b743e96fe";
- integrity sha1-K4hTT8G5mGdPh3+Yug2LW3Q+lv4=
-
bootstrap@^3.3:
version "3.4.1"
resolved
"https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72";
diff --git a/licenses/LICENSE-bootstrap-toggle.txt
b/licenses/LICENSE-bootstrap-toggle.txt
deleted file mode 100644
index 0bd2831..0000000
--- a/licenses/LICENSE-bootstrap-toggle.txt
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2011-2014 Min Hur, The New York Times Company
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/setup.cfg b/setup.cfg
index 359a705..593dae5 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -26,7 +26,6 @@ license_files =
LICENSE
NOTICE
# Start of licenses generated automatically
- licenses/LICENSE-bootstrap-toggle.txt
licenses/LICENSE-bootstrap.txt
licenses/LICENSE-bootstrap3-typeahead.txt
licenses/LICENSE-d3-tip.txt
