コード例 #1
0
def app_information():
    return html.Div(
    [
        dbc.Button("About us", id="open-modal-btn-in-about-us-modal"),
        dbc.Modal(
            [
                dbc.ModalHeader("About us"),
                dbc.ModalBody([
                    html.P(
                    ["Cora is an applicaiton program that can quantify the soil cover by processing/analyzing an image input from the user. The appliation can quantify the soil cover on the basis of soil,residue and canopy. ",
                    html.Br(),html.Br(),
                    "Soil residues are stems and stalks that remain on soil from previous crops. Residue cover is utilized in farming techniques such as no-till farming. This farming technique uses residue as a cover to the soil layer. It acts as a barrier to the soil by deflecting energy from the raindrops that can wash away the soil particles and the nutrients in the soil. It also reduce the soil erosion and preserve water level drying out from sun.",
                    html.Br(),html.Br(),
                    "Identify the residue cover in the soil has higher importance. There percentages of soil cover that maintain throughout farming process. Moreover it also useful research purposes.",
                    html.Br(),html.Br(),
                    "Technology improvement world has have major impact in many fields. We uses a latest computer models to analyse the image data. Our effort is to minimize and save the time and energy in calculating soil cover. "
                    "Hope this app will make your life easier.",
                    html.Br(),html.Br(),
                    #"References",
                    html.Br(),html.Br(), 
                    ]),
                ]   
                ),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close-modal-btn-in-about-us-modal", className="ml-auto")
                ),
            ],
            id="modal_about_us",
        ),
    ]
    )
コード例 #2
0
 def layout(self):
     return html.Div(
         [
             dbc.Button(self.button_text, id=self.name+'modal-open', size=self.button_size, outline=self.button_outline),
             dbc.Modal([
                 dbc.ModalHeader(self.title),
                 dcc.Graph(id=self.name+'-modal-graph', style={"max-height": "none", "height": "80%"}),
                 dbc.ModalFooter([   
                     html.Div([
                         html.Div([
                             html.Div([
                                 dbc.Button(html.Small("Description"), 
                                        id=self.name+'-show-description',
                                        color='link', className="text-muted ml-auto"),
                                 dbc.Fade([
                                         html.Small(self.description, className="text-muted")],
                                         id=self.name+'-fade',
                                         is_in=True,
                                         appear=True), 
                             ], style=dict(display="none" if not self.description else None))
                         ], className="text-left"),  
                         html.Div([
                             dbc.Button("Close", id=self.name+'-modal-close', className="mr-auto")            
                         ], className="text-right", style=dict(float='right')),   
                         
                     ], style={"display":"flex"}),             
                 ], className="justify-content-between")       
             ], id=self.name+'-modal', style={"max-width": "none", "width": "80%"}) 
         ], style={"display":"flex", "justify-content":"flex-end"})
コード例 #3
0
def get_input():
    inputFeed = html.Div(children=[
        dbc.Input(id='username',
                  placeholder='Enter feedback here!',
                  bs_size="lg",
                  type='text'),
        html.Br(),
        dbc.Button(id='submit-button',
                   children='Submit',
                   style={
                       'text-align': 'center',
                       'width': '460px'
                   }),
        html.Div(id='output_div')
    ],
                         style={'width': '460px'})

    modal = html.Div(children=[
        dbc.Button("Give us feedback!", id="open"),
        dbc.Modal(
            [
                dbc.ModalHeader("Enter your feedback down below!"),
                dbc.ModalBody(inputFeed),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")),
            ],
            id="modal",
        ),
    ],
                     style={'width': '150px'})
    return modal
コード例 #4
0
def manager_modal_bundle_performance_details(app):
    return html.Div([
            dbc.Button(
                        "Result Details",
                        id = 'manager-button-openmodal-bundle-performance-details',
                        className="mb-3",
                        style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.6rem"},
                    ),
            dbc.Modal([
                dbc.ModalHeader(
                    [
                        html.H1("Result Details", style={"font-size":"0.8rem"}),
                        html.H2("TOTAL COST", style={"font-size":"1.6rem","color":"#1357DD","background-color":"#c6d9ff","padding":"0.5rem","border-radius":"0.5rem"})
                    ],
                    
                ),
                dbc.ModalBody([
                    html.Div('Bundle Total'),
                    table_bundle_dtls(df_bundle_performance_details),
                    html.Div('Bundle Average'),
                    table_bundle_dtls(df_bundle_performance_details_pmpm),
                    ], style={"padding":"2rem"}),
                dbc.ModalFooter(dbc.Button('Close', style={"border-radius":"10rem"}, id = 'manager-button-closemodal-bundle-performance-details')),
                ], id = 'manager-modal-bundle-performance-details'),

        ])
コード例 #5
0
def get_sidebar_layout():
    return dbc.Container(
        [
            dbc.Modal(
                [
                    dbc.ModalHeader("St Louis DSA Open Data Project"),
                    dbc.ModalBody([
                        html.P([
                            "On ",
                            html.B("March 2,"),
                            """
                                    St Louis City will have primary elections for a number of municipal offices, 
                                    including mayor, comptroller, and more than half of the Board of Alders.
                                    """,
                        ]),
                        html.P([
                            html.A(
                                "St Louis DSA",
                                href="https://stldsa.org",
                                style={
                                    "color": "red",
                                    "font": "Roboto",
                                    "textDecoration": "underline",
                                },
                            ),
                            """
                                     is proud to provide this tool to the voters of St Louis.
                                    You can use the options below to view campaign contributions for candidates 
                                    in the upcoming municipal elections. We hope that in democratizing access to 
                                    this information, voters will be best able to decide who they would like to represent them.
                                    """,
                        ]),
                        html.P(
                            html.
                            I("St Louis DSA has endorsed Megan Green for 15th Ward Alderperson."
                              ), ),
                    ], ),
                    dbc.ModalFooter(
                        dbc.Button("Close", id="close", className="ml-auto")),
                ],
                id="modal",
                is_open=True,
                size="lg",
                style={
                    "padding": "20px",
                    "fontSize": "1em",
                    "lineHeight": "1.2em"
                },
            ),
            dbc.Row(
                [
                    dbc.Col(get_side_panel_layout(), md=5, lg=4),
                    dbc.Col(mapping.get_map_panel_layout(), md=7, lg=8),
                ],
                no_gutters=True,
            ),
        ],
        fluid=True,
        className="remove-padding",
    )
コード例 #6
0
def get_uninstall(product):
    return dbc.FormGroup([
        dbc.Col([
            dbc.Button(
                'Uninstall', color='danger', id=f'uninstall-image-{product}'),
            html.Span('',
                      id=f'span-uninstall-{product}',
                      className='align-middle',
                      style={'color': 'red'}),
            dbc.Modal(
                [
                    dbc.ModalHeader('Uninstall'),
                    dbc.ModalBody(
                        'Are you sure you want to uninstall an image?'),
                    dbc.ModalFooter([
                        dbc.Button(
                            'OK', color='danger', id=f'ok-uninstall-{product}'),
                        dbc.Button('Cancel', id=f'cancel-uninstall-{product}')
                    ]),
                ],
                id=f'modal-uninstall-{product}',
                centered=True,
            ),
        ],
                width=1),
        dcc.Loading(type='circle',
                    children=html.Div(id=f'loading-uninstall-{product}')),
        dbc.Label(
            'Remove the Docker image and mark the product as uninstalled.',
            html_for=f'uninstall-image-{product}',
            width=11),
    ],
                         row=True,
                         style=NONE,
                         id=f'uninstall-{product}')
コード例 #7
0
def modal_kccq_questionaire_answer(app):
    return html.Div([
        html.H6("Review", style={
            "font-size": "0.7rem",
            "padding-top": "10px"
        }),
        dbc.Button(children=[
            html.Img(src=app.get_asset_url("icon-inspection-100.png"),
                     style={
                         "height": "1.5rem",
                         "padding-top": "0px"
                     })
        ],
                   color="light",
                   style={"border-radius": "10rem"},
                   id='kccq-modal-answer-button-open'),
        dbc.Modal([
            dbc.ModalHeader(id="kccq-modal-answer-header"),
            dbc.ModalBody(modal_kccq_questionaire_body_answer(),
                          style={
                              "padding": "40px",
                              "margin-top": "-20px"
                          }),
            dbc.ModalFooter(dbc.Button("Close",
                                       id="kccq-modal-answer-button-submit",
                                       className="mr-2",
                                       style={"width": "160px"}),
                            style={"padding-right": "42%"})
        ],
                  id="kccq-modal-answer",
                  size='xl',
                  backdrop="static")
    ],
                    style={"text-align": "center"})
コード例 #8
0
ファイル: app.py プロジェクト: portiagaitskell/SES_2020
def update_figure(article_type):
    print(article_type)

    title = 'Today\'s Top News Articles in {x}'.format(
        x=article_type.capitalize())

    df = dfs[index_conversion[article_type]]

    #info = df.iloc[0]
    #hret=c['url']
    # add a button
    # create a pattern matched button
    # give each button a id that's a dictionary
    html_lines = []
    modal_content = []
    for i, c in enumerate(df.iloc):
        #index = i+index_conversion[article_type]
        index = i
        #modal_type = 'modal-' + str(article_type)
        button_id = {'type': 'button-preview', 'index': index}
        modal_id = {'type': 'modal-popup', 'index': index}
        #modal_id = {'type': modal_type, 'index': index}
        close_id = {'type': 'modal-close', 'index': index}

        description = c['description']

        if isinstance(description, float):
            description = 'No preview available'

        line = html.Div([
            html.A(html.P(c['title']), href=c['url'], target='_blank'),
            html.Button('Preview', id=button_id, n_clicks=0)
        ],
                        id='article-container')
        html_lines.append(html.A(line))

        source = 'Source: ' + str(c['source_name'])

        modal = dbc.Modal([
            dbc.ModalHeader(html.H1(c['title'])),
            dbc.ModalBody(
                [html.H3(description), html.H3(source)], id='modal-content'),
            dbc.ModalFooter(children=[
                html.
                A(html.H4('Link to article'), href=c['url'], target='_blank'),
                dbc.Button(
                    "Close", id=close_id, className="ml-auto", n_clicks=0)
            ]),
        ],
                          id=modal_id,
                          size="lg",
                          is_open=False)
        #modal.
        modal_content.append(modal)

    article_html = html.Div(html_lines)
    #article_html = html.Div([html.A(html.P(c['title']), href=c['url'], target='_blank') for c in df.iloc],[])
    #article_html = html.Div([html.A(html.P(children=info['title']), id="preview-link")])

    return [article_html, title, modal_content]
コード例 #9
0
def manager_modal_metricsdetail(app):
    return html.Div([
        dbc.Button(
            "Result Details",
            id='manager-button-openmodal-metricsdetail',
            className="mb-3",
            style={
                "background-color": "#38160f",
                "border": "none",
                "border-radius": "10rem",
                "font-family": "NotoSans-Regular",
                "font-size": "0.6rem"
            },
        ),
        dbc.Modal([
            dbc.ModalHeader([
                html.H1("Result Details", style={"font-size": "0.8rem"}),
                html.H2("TOTAL COST",
                        style={
                            "font-size": "0.8rem",
                            "color": "#1357DD"
                        })
            ], ),
            dbc.ModalBody(children=table_result_dtls(df_result_details),
                          style={"padding": "2rem"}),
            dbc.ModalFooter(
                dbc.Button('Close',
                           style={"border-radius": "10rem"},
                           id='manager-button-closemodal-metricsdetail')),
        ],
                  id='manager-modal-metricsdetail',
                  backdrop='static'),
    ])
コード例 #10
0
ファイル: custom_geojson.py プロジェクト: imfht/flaskapps
def build_modal(map_type, loc_mode):
    return html.Div(
        [
            html.Div(
                html.Span(
                    html.Span("GeoJSON Options",
                              style=dict(whiteSpace="pre-line")),
                    className="input-group-addon d-block pt-1 pb-0 pointer",
                ),
                className="input-group mr-3",
                id="open-geojson-modal",
            ),
            dbc.Modal(
                [
                    dbc.ModalHeader("Custom GeoJSON Options"),
                    dbc.ModalBody(build_geojson_upload(loc_mode)),
                    dbc.ModalFooter(
                        dbc.Button("Close",
                                   id="close-geojson-modal",
                                   className="ml-auto")),
                ],
                id="geojson-modal",
                size="lg",
                centered=True,
            ),
        ],
        className="col-auto",
        style={} if map_type == "choropleth" and loc_mode == "geojson-id" else
        {"display": "none"},
        id="custom-geojson-input",
    )
コード例 #11
0
def bundle_modal_bundles():
    return html.Div([
        dbc.Button(
            'Edit Bundles',
            id='bundle-button-openmodal',
            style={
                "background-color": "#38160f",
                "border": "none",
                "border-radius": "10rem",
                "font-family": "NotoSans-Regular",
                "font-size": "0.6rem",
                "width": "8rem"
            },
        ),
        dbc.Modal([
            dbc.ModalHeader(html.H2('Bundles', style={"font-size": "2rem"}), ),
            dbc.ModalBody(bundle_modal_bundles_body()),
            dbc.ModalFooter(dbc.Button('Submit',
                                       id='bundle-button-closemodal'))
        ],
                  id='bundle-modal-bundles',
                  size='xl',
                  backdrop='static')
    ],
                    style={"padding": "1rem"})
コード例 #12
0
def modal(name, is_graph=False):
    return dbc.Modal(
        [
            html.Div(html.Section(
                [
                    html.Div(id=name + '-title'),
                    html.Div(
                        dbc.Button("×", id=name + '-close1',
                                   className='close'))
                ],
                style={
                    'display': 'flex',
                    'width': '100%',
                    'justify-content': 'space-between'
                }),
                     className='modal-header'),

            # dbc.ModalBody(dcc.Graph(figure=fig)),
            dcc.Graph(id=name + '-children', config=graph_config)
            if is_graph else dbc.ModalBody(html.Div(id=name + '-children')),
            dbc.ModalFooter(dbc.Button("Закрыть", id=name + '-close')),
        ],
        id=name,
        size="xl",
        fade=False
        # className='fade'
    )
コード例 #13
0
 def well_points_tab_layout(self) -> html.Div:
     return html.Div([
         dbc.Button("Table Settings",
                    id=self.ids("button-open-table-settings")),
         dbc.Modal(
             children=[
                 dbc.ModalHeader("Table Settings"),
                 dbc.ModalBody(children=[
                     html.Label(
                         style={
                             "font-weight": "bold",
                             "textAlign": "Left",
                         },
                         children="Select Table Columns",
                     ),
                     dcc.Checklist(
                         id=self.ids("columns-checklist"),
                         options=[{
                             "label": name,
                             "value": column_name
                         } for name, column_name in zip(
                             self.df_well_target_points.get_wellpoints_df().
                             keys().values,
                             self.df_well_target_points.get_wellpoints_df(
                             ).keys().values,
                         )],
                         value=[
                             "Surface",
                             "Well",
                             "TVD",
                             "MD",
                             "Outlier",
                             "Deleted",
                             "Residual",
                         ],
                         persistence=True,
                         persistence_type="session",
                     ),
                 ], ),
                 dbc.ModalFooter(children=[
                     dbc.Button(
                         "Close",
                         id=self.ids("button-close-table-settings"),
                         className="ml-auto",
                     ),
                     dbc.Button(
                         "Apply",
                         id=self.ids("button-apply-columnlist"),
                         className="ml-auto",
                     ),
                 ]),
             ],
             id=self.ids("modal-table-settings"),
             size="sm",
             centered=True,
             backdrop=False,
             fade=False,
         ),
         html.Div(id=self.ids("well-points-table-container")),
     ])
コード例 #14
0
def render():
    return dbc.Modal(
        [
            dbc.ModalHeader([
                html.H4("Deader", id=MODAL_HEADER_ID),
                dbc.Button("CITY", id=OPEN_CITY_EVENT_MODAL),
                dbc.Button("ROAD", id=OPEN_ROAD_EVENT_MODAL)
            ]),
            dbc.ModalBody("This is the content of the modal",
                          id=MODAL_BODY_ID),
            dbc.ModalFooter([
                dbc.Button("Close", id=CLOSE_MODAL_ID, color="info"),
                html.Div([
                    dbc.Button("Fail",
                               id=FAIL_SCENARIO_ID, color="danger"),
                    dbc.Button(DEFAULT_PROGRESS_TEXT % 1, id=PROGRESS_SCENARIO_ID,
                               color="secondary"),
                    dbc.Button("Complete",
                               id=COMPLETE_SCENARIO_ID, color="success")
                ])],
                className="d-flex justify-content-between",
                id=MODAL_FOOTER_ID
            ),
        ],
        id=MODAL_ID,
        size="lg",
        # centered=True,
    )
コード例 #15
0
def modal_drilldown_tableview():
    return html.Div(
                [
                    dbc.Button("OPEN TABLE VIEW", id="drilldown-open-centered-kccq", color="light", block=True, style={"color":"#1357DD","border":"1.8px dotted","border-radius":"0.5rem","font-family":"NotoSans-CondensedBlack"}),
                    dbc.Modal(
                        [
                            dbc.ModalHeader(
                                html.Div(
                                    [
                                        html.H2("TABLE VIEW", style={"font-size":"2rem", "color":"#1357DD"})
                                    ],
                                    style={"color":"#1357DD"}
                                )
                            ),
                            dbc.ModalBody(
                                tableview()
                            ),
                            dbc.ModalFooter(
                                dbc.Button(
                                    "CLOSE", id="drilldown-close-centered-kccq", className="ml-auto",
                                    style={"margin-right":"20px", "background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Black", "font-size":"1rem"}
                                )
                            ),
                        ],
                        id="drilldown-modal-centered-kccq",
                        size='xl',
                        scrollable=False,
                        backdrop = 'static',
                    ),
                ]
            )
コード例 #16
0
def modal_self_recording_review(app):
    return html.Div([
        html.H6("Review", style={
            "font-size": "0.7rem",
            "padding-top": "10px"
        }),
        dbc.Button(children=[
            html.Img(src=app.get_asset_url("icon-laptop-play-video-100.png"),
                     style={
                         "height": "1.5rem",
                         "padding-top": "0px"
                     })
        ],
                   color="light",
                   style={"border-radius": "10rem"},
                   id='video-modal-review-button-open'),
        dbc.Modal([
            dbc.ModalHeader(id="video-modal-review-header"),
            dbc.ModalBody(id="video-modal-review-body"),
            dbc.ModalFooter(
                dbc.Button("close",
                           id="video-modal-review-button-submit",
                           className="mr-2"), )
        ],
                  id="modal-selfrecording-review",
                  size='xl',
                  backdrop="static")
    ],
                    style={"text-align": "center"})
コード例 #17
0
def card_key_driver_drilldown_crhr(app):
	return dbc.Card(
                dbc.CardBody(
                    [
                        dbc.Row(
                            [
                                dbc.Col(html.Img(src=app.get_asset_url("bullet-round-blue.png"), width="10px"), width="auto", align="start", style={"margin-top":"-4px"}),
		                        dbc.Col(html.H4("Key Drivers", style={"font-size":"1rem", "margin-left":"10px"}), width=8),
                                dbc.Col([dbc.Button("See All Drivers", id = 'button-all-driver-crhr',
                                                        style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.6rem"},
                                                    ),
                                        dbc.Modal([
                                                dbc.ModalHeader("All Drivers"),
                                                dbc.ModalBody(children = html.Div([table_driver_all(df_driver_all_crhr)], style={"padding":"1rem"})),
                                                dbc.ModalFooter(
                                                        dbc.Button("Close", id = 'close-all-driver-crhr',
                                                                        style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.8rem"},
                                                                    )
                                                        )
                                                ], id = 'modal-all-driver-crhr', size="lg")],
                                        width=3,
                                        ),
                            ],
                            no_gutters=True,
                        ),
                        
                        dbc.Row(
                            [
                                dbc.Col(
                                    [
                                        html.Div([gaugegraph(df_driver_crhr,0)], style={"padding-top":"1.5rem"}),
                                        html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][0]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#ffeb78"}),
                                    ],
                                    width=6),
                                dbc.Col(
                                    [
                                        html.Div([gaugegraph(df_driver_crhr,1)], style={"padding-top":"1.5rem"}),
                                        html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][1]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#aeff78"}),
                                    ],
                                    width=6),
                                dbc.Col(
                                    [
                                        html.Div([gaugegraph(df_driver_crhr,2)], style={"padding-top":"1.5rem"}),
                                        html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][2]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#39db44"}),
                                    ],
                                    width=6),
                                dbc.Col(
                                    [
                                        html.Div([gaugegraph(df_driver_crhr,3)], style={"padding-top":"1.5rem"}),
                                        html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][3]*100)),style={"color":"#18cc75"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#39db44"}),
                                    ],
                                    width=6),
                                
                            ],
                        ),
                    ]
                ),
                className="mb-3",
                style={"box-shadow":"0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)", "border":"none", "border-radius":"0.5rem"}
            )
コード例 #18
0
def manager_modal_alldrivers(app):
    return html.Div([
        dbc.Button(
            "See All Drivers",
            id='manager-button-openmodal-alldriver',
            style={
                "background-color": "#38160f",
                "border": "none",
                "border-radius": "10rem",
                "font-family": "NotoSans-Regular",
                "font-size": "0.6rem"
            },
        ),
        dbc.Modal([
            dbc.ModalHeader("All Drivers"),
            dbc.ModalBody(
                children=html.Div(["contents"], style={"padding": "1rem"})),
            dbc.ModalFooter(
                dbc.Button(
                    "Close",
                    id='manager-button-closemodal-alldriver',
                    style={
                        "background-color": "#38160f",
                        "border": "none",
                        "border-radius": "10rem",
                        "font-family": "NotoSans-Regular",
                        "font-size": "0.8rem"
                    },
                ))
        ],
                  id='manager-modal-alldriver',
                  size="lg",
                  backdrop='static')
    ], )
コード例 #19
0
ファイル: app.py プロジェクト: collincr/ini_team_13
def layer_selection_intro():
    return html.Div(children=[
        html.Div([
            html.Div(children=[
                html.P('Main Visualization Map',
                       className="title-with-helper"),
                html.A(className="far fa-question-circle helper-icon",
                       id="layer-helper"),
            ],
                     className="title"),
            dbc.Modal(
                [
                    dbc.ModalHeader("Introduction to the Visualization Types"),
                    dbc.ModalBody(
                        dcc.Markdown(texts.layer_selection_helper_text)),
                    dbc.ModalFooter(
                        dbc.Button("Close",
                                   id="layer-helper-close",
                                   className="ml-auto")),
                ],
                id="layer-helper-modal",
                centered=True,
            ),
            html.Div(dcc.Markdown(texts.layer_selection_intro_text)),
        ],
                 id="layer-help")
    ],
                    className="layer-selection-intro")
コード例 #20
0
def edit_tags_modal(id_prefix: str):
    return dbc.Modal(
        [
            dbc.ModalHeader("Edit tags"),
            dbc.ModalBody(
                [
                    dcc.Dropdown(
                        id=f"{id_prefix}-edit-tags-dropdown",
                        multi=True,
                        options=[{"label": t, "value": t} for t in get_all_tags()],
                    )
                ]
            ),
            dbc.ModalFooter(
                [
                    dbc.Button("Save", id=f"{id_prefix}-edit-tags-save", color="info"),
                    dbc.Button(
                        "Close",
                        id=f"{id_prefix}-edit-tags-modal-close",
                        className="ml-auto",
                    ),
                ]
            ),
        ],
        id=f"{id_prefix}-edit-tags-modal",
    )
コード例 #21
0
ファイル: info_pane.py プロジェクト: DalbergDataInsights/cehs
 def get_layout(self):
     layout = dbc.Col(
         dbc.Modal(
             [
                 dbc.ModalHeader("How to use the tool"),
                 dbc.ModalBody([
                     html.Img(
                         src=self.image,
                         style={
                             "width": "auto",
                             "height": "600px"
                         },
                     ),
                     html.Br(),
                     html.P(self.text)
                 ], ),
                 dbc.ModalFooter(
                     dbc.Button("Close",
                                id="info-pane__close",
                                className="ml-auto")),
             ],
             id="info-pane",
             centered=True,
             size="xl",
         ))
     return layout
コード例 #22
0
def build_init_modal(id_modal, slider_id, generate_id, text, min, max, step,
                     value):
    return dbc.Modal([
        dbc.ModalHeader('Initialize'),
        dbc.ModalBody([
            html.Div([
                html.Div(text,
                         id=f'{slider_id}-value',
                         style={'padding-left': '30px'}),
                dcc.Slider(
                    id=slider_id, min=min, max=max, step=step, value=value),
            ],
                     style={'width': '200px'})
        ]),
        dbc.ModalFooter([
            dbc.Button('Close',
                       id=f'modal-{id_modal}-close',
                       className='ml-auto',
                       style={'width': '10em'}),
            dbc.Button('Generate',
                       id=generate_id,
                       className='ml-auto',
                       style={'width': '10em'})
        ],
                        style={
                            'margin-left': 'auto',
                            'margin-right': '0'
                        }),
    ],
                     id=f'modal-{id_modal}')
コード例 #23
0
 def make_configuration_modal(self, activity: Activity,
                              config: UserConfig) -> html:
     config_modal = html.Div([
         dbc.Button("Configuration",
                    id="btn_open_configuration",
                    color="link",
                    n_clicks=0),
         dbc.Modal(
             [
                 dbc.ModalTitle("Configuration"),
                 dbc.ModalBody(self.make_charts_selector(activity, config)),
                 dbc.ModalFooter([
                     dbc.Button("Save",
                                id="btn_save_configuration",
                                color="link",
                                n_clicks=0),
                     dbc.Button("Close",
                                id="btn_close_configuration",
                                color="link",
                                n_clicks=0)
                 ])
             ],
             id="configuration_modal_centered",
             centered=True,
             is_open=False,
         )
     ])
     return config_modal
コード例 #24
0
def make_modal(plot_config, stations):
    camera_header = dbc.CardHeader("camera access",
                                   style={
                                       "textAlign": "center",
                                       "padding": "0px",
                                       "border": "0px",
                                       "color": plot_config['textcolor'],
                                       "borderRadius": "0px"
                                   })

    camera_text = html.P([
        "Montreal also provides realtime feed of traffic cameras that update at approximately 5 minute intervals. "
        "Select to view feed of traffic cameras located at detector locations.",
    ],
                         style={
                             "margin": "16px",
                             "textAlign": "justify",
                             "color": "#7a7a7a"
                         })
    btn = dbc.Button("view traffic cam",
                     id="open-modal",
                     style={"marginTop": "16px"})

    modal = dbc.Modal([
        dbc.ModalHeader(id="modal-header"),
        dbc.ModalBody(
            dbc.Row([
                dbc.Col(dbc.Button(
                    "previous", id="prev-camera", style={"marginTop": "55%"}),
                        width=3,
                        style={"height": "100%"}),
                dbc.Col(id="modal-body", width=6),
                dbc.Col(dbc.Button(
                    "next", id="next-camera", style={"marginTop": "55%"}),
                        width=3,
                        style={"height": "100%"})
            ],
                    style={"textAlign": "center"})),
        dbc.ModalFooter(
            dbc.Button("Close", id="close-modal", className="ml-auto")),
    ],
                      id="camera-modal",
                      centered=True,
                      size="lg")

    dropdown = dcc.Dropdown(id="station-camera-dropdown",
                            value="station 1",
                            options=[{
                                "label": o,
                                'value': o
                            } for o in stations],
                            clearable=False)

    modal_layout = html.Div([
        html.Div([camera_header, dropdown, modal, btn],
                 style={"textAlign": "center"}), camera_text
    ], )

    return modal_layout
コード例 #25
0
def footer():
    save_button = dbc.Button(
        "Save",
        id="save_info_modal",
        color="dark",
        className="ml-auto",
        outline=True,
    )
    return dbc.ModalFooter(save_button)
コード例 #26
0
def make_pulsar_display_modal(pulsar_name):
    print("Pulsar NAME: ", pulsar_name)
    record = records[pulsar_name]
    generator = PulsarDetailGenerator(record)
    header = dbc.ModalHeader([dbc.ModalTitle(pulsar_name)])
    body = dbc.ModalBody(children=generator.generate())
    footer = dbc.ModalFooter([])
    children = [header, body, footer]
    return children
コード例 #27
0
ファイル: app.py プロジェクト: DenisFromRussia/PetFinder
def create_submit_modal(pet_id):
    modal = html.Div([
        dbc.Button("Забрать",
                   id=f"open_submit_{pet_id}",
                   style={'margin': '0px 0px 0px 20px'},
                   size='lg',
                   color='dark',
                   outline=True),
        dbc.Modal(
            [
                dbc.ModalHeader(f"Готовы взять питомца"),
                dbc.ModalBody(
                    dbc.Form(
                        [
                            dbc.FormGroup(
                                [
                                    dbc.Label("Имя", className="mr-2"),
                                    dbc.Input(type="text",
                                              placeholder="Введите Ваше имя"),
                                ],
                                className="mr-3",
                            ),
                            dbc.FormGroup(
                                [
                                    dbc.Label("e-mail", className="mr-2"),
                                    dbc.Input(type="email",
                                              placeholder="Введите e-mail"),
                                ],
                                className="mr-3",
                            ),
                            dbc.FormGroup(
                                [
                                    dbc.Label("Комментарий", className="mr-2"),
                                    dbc.Input(type="text"),
                                ],
                                className="mr-3",
                            ),
                            dbc.Button("Отправить", color="primary"),
                        ],
                        inline=True,
                    )),
                dbc.ModalFooter(
                    dbc.Button("Закрыть",
                               id=f"close_submit_{pet_id}",
                               className="ml-auto")),
            ],
            id=f"modal_submit_{pet_id}",
            is_open=False,  # True, False
            size="xl",  # "sm", "lg", "xl"
            backdrop=
            True,  # True, False or Static for modal to not be closed by clicking on backdrop
            scrollable=True,  # False or True if modal has a lot of text
            centered=True,  # True, False
            fade=True  # True, False
        ),
    ])
    return modal
コード例 #28
0
ファイル: sidebar.py プロジェクト: tazeek/tracking-work-hours
def _generate_reset_event_modal():

	return dbc.Modal(id='reset-hours-modal', children=[
		dbc.ModalHeader('Reset Weekly Hours'),
		dbc.ModalBody('Do you want to reset your weekly hours?'),
		dbc.ModalFooter([
			dbc.Button('Yes',id='yes-reset'),
			dbc.Button('No',id='no-reset')
		])
	])
コード例 #29
0
def build_modal(ext_aggs, chart_type, y):
    return [
        build_hoverable(
            html.I(
                className="ico-settings pointer",
                id="open-extended-agg-modal",
                style=show_style(chart_type not in NON_EXT_AGGREGATION
                                 and len(y)),
            ),
            html.Div(html.Span(text("ext_agg_desc")),
                     id="extended-aggregation-tooltip"),
            hover_class="saved-chart-config",
            top="100%",
            additional_classes="mb-auto mt-auto",
        ),
        dcc.Store(id="extended-aggregations", data=ext_aggs),
        dcc.Store(id="prev-open-extended-agg-modal", data=0),
        dcc.Store(id="prev-close-extended-agg-modal", data=0),
        dcc.Store(id="prev-clear-extended-agg-modal", data=0),
        dcc.Store(id="prev-apply-extended-agg-modal", data=0),
        dbc.Modal(
            [
                dbc.ModalHeader(
                    html.Div(
                        [
                            html.Div(
                                text("Extended Aggregations"),
                                className="col mt-auto mb-auto",
                            ),
                            html.Button(
                                html.Span("X"),
                                className="close mr-5",
                                id="close-extended-agg-modal",
                            ),
                        ],
                        className="row",
                    )),
                dbc.ModalBody(build_body(ext_aggs)),
                dbc.ModalFooter([
                    dbc.Button(
                        text("Clear"),
                        id="clear-extended-agg-modal",
                        className="ml-auto",
                    ),
                    dbc.Button(
                        text("Apply"),
                        id="apply-extended-agg-modal",
                    ),
                ]),
            ],
            id="extended-agg-modal",
            size="lg",
            centered=True,
        ),
    ]
コード例 #30
0
def get_infoBox1(pathname):
    infobox = dbc.Row(
        [
            html.P(
                "Information Box", className="lead", style={'width': '100%'}),
            dbc.Button("Object",
                       id="patent_open1",
                       style={
                           'margin': '10px',
                           'width': '95%'
                       }),
            dbc.Modal([
                dbc.ModalHeader("Object"),
                dcc.Markdown(children=markdown_text1,
                             style={'padding': '15px'}),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="patent_close1", className="ml-auto"))
            ],
                      id="patent_modal1",
                      scrollable=True),
            dbc.Button("Data Source",
                       id="patent_open2",
                       style={
                           'margin': '10px',
                           'width': '95%'
                       }),
            dbc.Modal([
                dbc.ModalHeader("Data Source"),
                dcc.Markdown(children=markdown_text2,
                             style={'padding': '15px'}),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="patent_close2", className="ml-auto"))
            ],
                      id="patent_modal2",
                      scrollable=True),
        ],
        style={'margin': 0},
    )
    if pathname == "/page1":
        return infobox